web页面之切换输入域组

柔情只为你懂 2022-09-17 14:29 138阅读 0赞

## 功能概述 ##

web开发页面中，可能会有一种情况，根据不同的类型，显示不同的输入域，如果输入域过多，靠一个个的隐藏或显示输入域代码量很多，且不容易维护。我们可以给输入域的样式class进行设置，对其进行控制，显示隐藏，就可以比较容易达到效果，且代码量比较少。

## 页面效果 ##

待补充。

## 源码构件 ##

1.引入js库，css样式

<table> 
 <tbody> 
 <tr> 
 <td>&lt;link href="&lt;%=path%&gt;/oms/css/oms.css" rel="stylesheet" type="text/css" /&gt; &lt;script type="text/javascript" src="&lt;%=path%&gt;/js/jquery.js"&gt;&lt;/script&gt;</td> 
 </tr> 
 </tbody> 
</table>

2.页面代码如下：

<table> 
 <tbody> 
 <tr> 
 <td>&lt;div class="listfen" style="height: 405px;"&gt; &lt;table width="30%" border="0" cellspacing="0" cellpadding="0" style="margin-top: 1px;"&gt; &lt;tr&gt; &lt;th colspan="2"&gt;基本条件&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align="right"&gt;需求类型：&lt;/td&gt; &lt;td&gt; &lt;s:select list="#{'raw':'标准影像产品','orthor':'正射影像产品','theme':'专题产品'}" name="require.reqtype" listKey="key" listValue="value" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align="right"&gt;产品类型：&lt;/td&gt; &lt;td&gt; &lt;s:select list="#{'image':'影像产品','topic':'专题产品'}" name="requireRawDo.productType" id="productType" listKey="key" listValue="value" &nbsp;οnchange="changeProductType()"/&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr class="yx"&gt; &lt;td align="right"&gt;业务类型：&lt;/td&gt; &lt;td&gt; &lt;s:select list="#{'normal':'普通','aMap':'一张图'}" name="requireRawDo.businessType" listKey="key" listValue="value" id="businessType" οnchange="changeBusinessType()"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="yx zhsh"&gt; &lt;td align="right"&gt;产品级别：&lt;/td&gt; &lt;td&gt; &nbsp;&lt;s:select list="#{'standardimg':'标准影像产品','shineupon':'正射影像产品'}" name="requireOrthorDo.prodlevel" listKey="key" listValue="value" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="yx normal"&gt; &lt;td align="right"&gt;卫星/传感器：&lt;/td&gt; &lt;td style="padding-top: 10px;"&gt;&lt;!-- &lt;img src="images/tree.png" width="264" height="111" /&gt; --&gt; &nbsp;&lt;s:textfield name="satellitenamesTag" id="satellitenamesTag" readonly="true" size="50" maxlength="100" cssStyle=""&gt;&lt;/s:textfield&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;a id="satellite_sele" style="color:red;cursor: pointer"&gt;请选择&lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr class="yx normal"&gt; &lt;td align="right"&gt;分辨率：&lt;/td&gt; &lt;td style="padding-top: 2px;"&gt; &nbsp;&lt;s:textfield name="resolutionnamesTag" id="resolutionnamesTag" readonly="true" size="50" maxlength="100" cssClass=""&gt;&lt;/s:textfield&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;a id="resolution_sele" style="color:red;cursor: pointer"&gt;请选择&lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr class="yx normal" &gt; &lt;td align="right"&gt;云量&lt;=：&lt;/td&gt; &lt;td&gt; &nbsp;&lt;s:select list="#{'0':'0%','5':'5%','10':'10%','15':'15%'}" name="requireRawDo.cloudcover" listKey="key" listValue="value" /&gt; &lt;/td&gt; &lt;/tr&gt; ... &lt;tr class="zt" style="display:none"&gt; &lt;td align="right"&gt;专题模型：&lt;/td&gt; &lt;td&gt;&nbsp; &lt;s:select list="#{'whzt':'围海造田工程','dqhpgz':'低丘缓坡改造工程','xjczkz':'县级城镇扩展监测','gtzyzd':'国土资源重大工程'}" name="requireTopicDo.topicmode" listKey="key" listValue="value" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;div&gt;</td> 
 </tr> 
 </tbody> 
</table>

3.对输入域组的操作切换的js代码如下：

<table> 
 <tbody> 
 <tr> 
 <td>//查看需求基本条件信息，根据内容类型展示不同的信息项 function viewReqContent(){ var reqcontenttype=$("#reqcontenttype").val(); if(reqcontenttype=="&lt;%=Require.REQCONTENTTYPE_IMG_NORMAL%&gt;"){ $(".yx").show(); $(".normal").show(); $(".zhsh").hide(); $(".aMap").hide(); $(".zt").hide(); }else if(reqcontenttype=="&lt;%=Require.REQCONTENTTYPE_IMG_AMAP%&gt;"){ $(".yx").show(); $(".zhsh").show(); $(".normal").hide(); $(".aMap").show(); $(".zt").hide(); }else if(reqcontenttype=="&lt;%=Require.REQCONTENTTYPE_TOPIC%&gt;"){ $(".zt").show(); $(".yx").hide(); $(".aMap").hide(); $(".normal").hide(); } }&nbsp;</td> 
 </tr> 
 </tbody> 
</table>

## 原理点评 ##

本例的实现原理是，通过对不同的输入域组指定样式，以class定义，并不是真正的css，是逻辑上指定的名字而已，对这些不同的class名操作，切换它们的不同展现形式，来实现业务上的界面要求。