rich:tabPanel 切换 tab

最新推荐文章于 2023-05-30 13:33:09 发布

转载最新推荐文章于 2023-05-30 13:33:09 发布 · 1.5k 阅读

文章标签：

#richfaces #javascript #文档 #api #c

jsf 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用RichFaces的TabPanel组件，并通过自定义JavaScript实现Tab页由鼠标移动触发切换的效果。提供了具体的实现代码及关键函数RichFaces.switchTab的用法。

rich:tabPanel 切换 tab

2009年08月26日星期三 15:50

RichFaces的官方文档没有提供javascript的API，但仔细观察RichFaces组件生成的页面代码后，发现还是有规律可循，下面仅举一例子：

RichFaces的Tab页默认的切换方式是点击(Click)，但我要想换成鼠标移动就切换呢？以下是实现代码：

<h:form id="f1">

    <rich:tabPanel id="abc" switchType="client" selectedTab="bb"
width="210">
        <rich:tab id="aa" label="a"
onlabelmousemove="if (RichFaces.onTabChange(event, 'f1:abc','f1:aa'))RichFaces.switchTab('f1:abc','f1:aa','')">a</rich:tab>
        <rich:tab id="bb" label="b"
onlabelmousemove="if (RichFaces.onTabChange(event, 'f1:abc','f1:bb'))RichFaces.switchTab('f1:abc','f1:bb','')">b</rich:tab>
        <rich:tab id="cc" label="c"
onlabelmousemove="if (RichFaces.onTabChange(event, 'f1:abc','f1:cc'))RichFaces.switchTab('f1:abc','f1:cc','')">c</rich:tab>
</rich:tabPanel>

</h:form>
可以看出，RichFaces有它专门的一套JavaScript库，但官方并没有公布（也可能是小弟不才，从没发现）。在本例中，主要应用了RichFaces.switchTab(arg1,arg2,arg3)函数，其中，arg1指tabPanel的ID，arg2指Tab的ID，arg3指Tab的name（可省略为''）。

关于更多的RichFaces javascript 函数功能，还请大家共同进一步研究。