如何在 Xpages 中将 css 设置为 xe:pageTreeNode
how can I set css with xe:pageTreeNode in Xpages
我完全是css的新手,谢天谢地网上有很多文章,就像"CSS for IBM Notes and Domino XPages Developers"一样,但我仍然对它感到困惑,现在转到我的问题见面,我没有使用自己创建的主题,而是 native bootstrap4 主题
这是我的代码(部分)
<xe:applicationLayout id="applicationLayout1">
<xp:callback facetName="facetMiddle" id="facetMiddle">
</xp:callback>
<xp:this.facets>
<xe:navigator id="navigator1" xp:key="LeftColumn">
<xe:this.treeNodes>
<xe:pageTreeNode page="/View.xsp">
</xe:pageTreeNode>
<xe:pageTreeNode page="/View_ip.xsp" imageHeight="27px" imageWidth="27px">
<xe:this.image>
<![CDATA[#{javascript:var nr=2 ; nr> 0 ? (Math.min(nr, 10) + '.gif') : '';}]]>
</xe:this.image>
</xe:pageTreeNode>
</xe:this.treeNodes>
</xe:navigator>
</xe:this.treeNodes>
</xe:navigator>
</xp:this.facets>
<xe:this.configuration>
<xe:simpleResponsiveConfiguration collapseLeftColumn="true" collapseLeftTarget=".applayout-column-left"
collapsedLeftMenuLabel="Menu" navbar="false" pageWidth="fluid" invertedNavbar="true">
</xe:simpleResponsiveConfiguration>
</xe:this.configuration>
</xe:applicationLayout>
是的...我使用了 Knut 关于徽章的想法,谢谢~ Knut
html代码(部分):
<div class="applayout-main" id="view:_id1:_id2:applicationLayout1">
<div role="main" class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 hidden-sm-down applayout-column-left sidebar">
<ul role="tree" id="view:_id1:_id2:navigator1" class="nav nav-pills nav-stacked xspNavigator">
<li class="nav-item">
<a role="treeitem" href="/OA/VVUS.nsf/View.xsp" class="nav-link">
All Documents
</a>
</li>
<li class="nav-item">
<a role="treeitem" href="/OA/VVUS.nsf/View_ip.xsp" class="active nav-link">
<img src="/OA/VVUS.nsf/2.gif" height="27px" width="27px">
In Process
</a>
</li>
</ul>
这就是我想向用户展示的内容:
基本上,我需要这个图像始终正确浮动,这意味着我需要自己添加 css,正如我开始时所说的,虽然我读了很多人的文章,但我不知道它,并在我的代码中尝试这个, 有趣的是它与下面 css...
<style type="text/css" media="print">
#applicationLayout1 {
background-color:blue;
}
.xspNavigator .nav-item img {
float:right;
}
</style>
2018/01/06 更新....是的,那是 media="print" 东西...我之前用过这个 css 文件,但永远不要尝试删除它....我怎么这么笨...谢谢你们的帮助...还有一件事我要做....重新安装我的系统....
<style type ="text/css">
.xspNavigator .nav-item img {
float:right;
}
</style>
2018/01/10:最后一次更新,我想我发现问题是...我不仅删除了媒体="print",还删除了标签...一切都归于平静.. ..
.xspNavigator .nav-item img {
float:right;
}
我知道它有效,因为“.xspNavigator .nav-item img”,奇怪的是如果我删除 #applicationLayout1 ,它会像这样回来,只是对 css 没有影响了.. .我真的很想不明白为什么....
所以...我的 css 文件有什么问题?谢谢
从 STYLE 标签中删除 media="print"
。
删除 media="print" 部分,因为它告诉浏览器在打印时只使用 CSS。
我完全是css的新手,谢天谢地网上有很多文章,就像"CSS for IBM Notes and Domino XPages Developers"一样,但我仍然对它感到困惑,现在转到我的问题见面,我没有使用自己创建的主题,而是 native bootstrap4 主题
这是我的代码(部分)
<xe:applicationLayout id="applicationLayout1">
<xp:callback facetName="facetMiddle" id="facetMiddle">
</xp:callback>
<xp:this.facets>
<xe:navigator id="navigator1" xp:key="LeftColumn">
<xe:this.treeNodes>
<xe:pageTreeNode page="/View.xsp">
</xe:pageTreeNode>
<xe:pageTreeNode page="/View_ip.xsp" imageHeight="27px" imageWidth="27px">
<xe:this.image>
<![CDATA[#{javascript:var nr=2 ; nr> 0 ? (Math.min(nr, 10) + '.gif') : '';}]]>
</xe:this.image>
</xe:pageTreeNode>
</xe:this.treeNodes>
</xe:navigator>
</xe:this.treeNodes>
</xe:navigator>
</xp:this.facets>
<xe:this.configuration>
<xe:simpleResponsiveConfiguration collapseLeftColumn="true" collapseLeftTarget=".applayout-column-left"
collapsedLeftMenuLabel="Menu" navbar="false" pageWidth="fluid" invertedNavbar="true">
</xe:simpleResponsiveConfiguration>
</xe:this.configuration>
</xe:applicationLayout>
是的...我使用了 Knut 关于徽章的想法,谢谢~ Knut
html代码(部分):
<div class="applayout-main" id="view:_id1:_id2:applicationLayout1">
<div role="main" class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 hidden-sm-down applayout-column-left sidebar">
<ul role="tree" id="view:_id1:_id2:navigator1" class="nav nav-pills nav-stacked xspNavigator">
<li class="nav-item">
<a role="treeitem" href="/OA/VVUS.nsf/View.xsp" class="nav-link">
All Documents
</a>
</li>
<li class="nav-item">
<a role="treeitem" href="/OA/VVUS.nsf/View_ip.xsp" class="active nav-link">
<img src="/OA/VVUS.nsf/2.gif" height="27px" width="27px">
In Process
</a>
</li>
</ul>
这就是我想向用户展示的内容:
基本上,我需要这个图像始终正确浮动,这意味着我需要自己添加 css,正如我开始时所说的,虽然我读了很多人的文章,但我不知道它,并在我的代码中尝试这个, 有趣的是它与下面 css...
<style type="text/css" media="print">
#applicationLayout1 {
background-color:blue;
}
.xspNavigator .nav-item img {
float:right;
}
</style>
2018/01/06 更新....是的,那是 media="print" 东西...我之前用过这个 css 文件,但永远不要尝试删除它....我怎么这么笨...谢谢你们的帮助...还有一件事我要做....重新安装我的系统....
<style type ="text/css">
.xspNavigator .nav-item img {
float:right;
}
</style>
2018/01/10:最后一次更新,我想我发现问题是...我不仅删除了媒体="print",还删除了标签...一切都归于平静.. ..
.xspNavigator .nav-item img {
float:right;
}
我知道它有效,因为“.xspNavigator .nav-item img”,奇怪的是如果我删除 #applicationLayout1 ,它会像这样回来,只是对 css 没有影响了.. .我真的很想不明白为什么....
所以...我的 css 文件有什么问题?谢谢
从 STYLE 标签中删除 media="print"
。
删除 media="print" 部分,因为它告诉浏览器在打印时只使用 CSS。