jQuery-Visibly是一款小巧简单的jQuery隐藏显示元素插件。该插件根据某个元素的值,如下拉框的值、输入框的值等来判断是否显示某个指定的元素。用于判断的值可以是单个值,或者是多个值,也可以是正则表达式,非常灵活。

使用方法

使用该隐藏显示元素插件首先要在页面中引入jQuery和jquery-visibly.js文件。

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-visibly.min.js"></script>                
              

基本调用插件方法如下:

$(document).ready(function() {
  $('[visibly]').Visibly();
})                
              

可使用可用参数来覆盖默认的参数选项:

$(document).ready(function() {
  options = {
    clearOnHide: true
  }
  $('[visibly]').Visibly(options);
})                
              

应用举例

例如该隐藏显示元素的HTML结构如下:

<div visibly="field1:a,b;field2:1"></div>                
              

上面的HTML结构使该div元素在field1的值为a或b,并且field2的值为1的时候才显示,否则处于隐藏状态。

配置参数

名称 默认值 描述
attr Default: visibly 用于存储隐藏显示规则的属性。
clearOnHide Default: false 如果设置为true,当一个inputselect元素被隐藏时将清除它的文本值。这个操作时递归的,例如:在div中有一个input元素,div被隐藏时将清除input元素的值。
regularExpression Default: false 是否使用正则表达式来作为测试值。
vdelim Default: , 用于分割某个字段测试条件的分隔符。
edelim Default: ; 用于分割多个不同字段的分隔符。
fdelim Default: : 字段名称和值之间的分割符。
rdelim Default: % 多重规则之间的分割符。

具体应用请查看DEMO