17. 如何在XPages里创建大纲/导航?

XPages自带的控件集最缺乏的恐怕就是类似于经典Notes开发的大纲了。虽然一个大纲/导航是一个Web应用几乎不可缺少的部分,但是截至8.5.3,IBM仍然没有为开发人员提供这个方便。接着,提供了一堆控件的UpgradePack 1来了,继承了大量在OpenNTF网站上已经发布的XPagesExtension Library的内容。其中,就有一个outline和一个navigator。但是这些控件的质量参差不齐,与设计器的结合和文档更是初级。往页面上放outline和navigator各一个,添加必要的属性和treeNodes。显示页面,结果相当令人失望。Outline控件被转换成一个单纯的HTML的UL,没有任何修饰,也就是左边带有黑色圆点的列表,甚至添加了list-style-type:none的style属性之后,转换成HTML时也丢失了。Navigator控件则消失在一个空白的DIV中。另外,即使显示效果能调节成IBM附带的XPages版本的Teamroom应用中的那样美观,这两个控件的功能也不完备,比如不能指定链接的target属性,treeNodes支持的事件也只有onItemClick。

幸好,我们可以像在《14. 如何在XPages中插入HTML》里说的,在XPage中添加HTML,再利用CSS和Javascript,做出想要的大纲效果:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom"
	style="background-color: #F4F5F6;">
	<xp:this.resources>
		<xp:styleSheet href="/ui.css"></xp:styleSheet>
	</xp:this.resources>
<script language="Javascript">
		XSP.addOnLoad(function () {
		dojo.query(".menu li a").onclick(function (e){
		dojo.query(".menu li a").removeClass("selected");
		dojo.query(e.target).addClass("selected");
		});
		}
		);
</script>
	<xp:br></xp:br>
	<xp:panel style="width:100%">
		<ul class="menu">
			<li>
				<xp:link escape="true" text="Access Record" id="link1"
					target="right" value="/viewRecord.xsp" styleClass="selected">
				</xp:link>
			</li>
			<li>
				<xp:link escape="true" text="Exception" id="link2"
					target="right" value="/viewException.xsp">
				</xp:link>
			</li>
			<li>
				<xp:link escape="true" text="Settings" id="link3" value="viewsettings.xsp"
					target="right" rendered="#{javascript: //control the visibility}">
				</xp:link>
			</li>
			<li>
				<xp:link escape="true" text="Log" id="link6" value="/viewLogs.xsp"
					target="right">
					<xp:this.rendered><![CDATA[${javascript: //control the visibility}]]></xp:this.rendered>
				</xp:link>
			</li>
		</ul>
	</xp:panel>
</xp:view>

整个页面放置在一个frames中作为导航之用。大纲由一个UL包含xp:link组成。显示效果由CSS和通过XSP.addOnLoad()执行的函数完成,控制大纲项目在默认、鼠标悬浮和选定状态下的属性。ui.css相关部分的内容如下:

ul.menu{
	list-style-type: none;
	margin: 0;
	padding: 5px 0;
	font-weight:bold;
}

.menu li a{
	text-decoration: none;
	display: block;
	padding: 5px 0 5px 10px;
}

.menu li a.selected{
	color:white;
	background-color: #1384B8;
}

.menu li a:hover{
	color:white;
	background-color: #1384B8;
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值