如何用javascript控制JSF标签的显示、隐藏

一、如何用javascript控制JSF标签的显示、隐藏

1、javascript语句解释：

window.document.all.item("theForm:te1").style.display=""

其中：window.document是把操作对象限定在当前页面内

all.item ("theForm:te1")是jsf标签翻译成html后的对象名称。all[]是一个多功能的数组，他的元素是文档中的所有的HTML元素。all[]中的元素是按照他们在文档中出现的顺序排放的，如果知道某个元素在数组中的数字位置，就可以直接将他从数组中提取出来，但通常还是使用all.item()提取某个具有名字的元素。

style.display用来控制该对象的显示和隐藏，等于空值时表示显示，等于“none”时则表示隐藏。

2、获得JSF 标签翻译成html后的对象名称：

通过上面对代码的解释我们知道，一般情况下只要知道JSF翻译成html后的标签的ID即可进行捕获、操作，那么我们如何翻译呢？首先，给JSF的标签命好id值；其次，运行该页面；再次，在运行后的页面上点击右键“查看源文件”即可获得翻译后的id。

3、实例代码：

<%@ page session="false" contentType="text/html;charset=GBK"%>

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<%@ taglib uri="http://myfaces.apache.org/extensions" prefix="x"%>

<%@ taglib uri="http://www.ccb.cn/xmdc" prefix="xmdc"%>

<%@ taglib uri="http://jsftutorials.net/htmLib" prefix="htm"%>

<f:view>

<%//控制显示、隐藏的函数代码%>                                

<f:verbatim>

    <script language="JavaScript">

    function openTable(select){               <%//select为参数%>

    if(select.value==0){

                window.document.all.item("theform:te1").style.display="none";

                window.document.all.item("theform:te2").style.display="none";

                window.document.all.item("theform:te3").style.display="none";

              }

    if(select.value==1){

                window.document.all.item("theform:te1").style.display="";

                window.document.all.item("theform:te2").style.display="";

                window.document.all.item("theform:te3").style.display="none";

              }

    if(select.value==2){

                window.document.all.item("theform:te1").style.display="";

                window.document.all.item("theform:te2").style.display="";

                window.document.all.item("theform:te3").style.display="";

              }

     }

     </script>

</f:verbatim>

<%//触发函数代码，其中itemValue 与上段代码中的select.value 一一对应%>

<h:form id="theform">

<h:selectOneMenu id="select2" value="" onchange="javascript:openTable(this)">    

    <f:selectItem itemLabel="请选择" itemValue="0" />

    <f:selectItem itemLabel="显示两个表格" itemValue="1" />

    <f:selectItem itemLabel="显示三个表格" itemValue="2" />

</h:selectOneMenu>

<%//被显示、隐藏的标签代码%>

<xmdc:panelGrid id="te1" width="95%" height="60"  columns="2" border="1" style="display:none">

    <xmdc:outputText value="上海分行"/>

    <xmdc:outputText value="吉林分行"/>

</xmdc:panelGrid>

<f:verbatim><br></f:verbatim>

<xmdc:panelGrid id="te2" width="95%" height="60"  columns="2" border="1" style="display:none">

    <xmdc:outputText value="厦门分行"/>

    <xmdc:outputText value="北京分行"/>

</xmdc:panelGrid>

<f:verbatim><br></f:verbatim>

<xmdc:panelGrid id="te3" width="95%" height="60"  columns="2" border="1" style="display:none">

    <xmdc:outputText value="辽宁分行"/>

    <xmdc:outputText value="湖北分行"/>

</xmdc:panelGrid> value="湖北分行"/>

</h:form>

</f:view>