您的位置:首页 > 产品设计 > UI/UE

给easyui-datebox设置隐藏或者不可用

2017-05-25 19:51 274 查看
我们公司做的是一套安全监测系统。所以呢对于前台页面没有像一些门户网站布局那么丰富,特效特别炫。目前只需要一套简单的UI界面即可,所以我选择了用easyui进行搭建,easyui是一种基于jQuery的用户界面插件集合。使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。方便而且也比较美观。但是随着项目的进展,对于一些功能的选择上,需要给一些元素加一些样式。渐渐我发现easyui的一些控件对css的兼容性不是很好。于是我总结了一些解决方法如下,我解决的是easyui-datebox控件的隐藏。除此之外我也总结了一些其他控件隐藏或者设置不可用的方法,希望可以提供一些建议。

1.validatebox可以用的用法:前两种适用于单个的validatebox;

  第三种应用于整个form里面的输入框;  

 <1>.$("#id").attr("readonly", true); -----  $("#id").removeAttr("readonly");

 <2>.$("#id").attr("readonly", "readonly"); -----  $("#id").removeAttr("readonly");

 <3>.$("#Form :input").attr("readonly", "readonly"); //对form里面的禁用

 <4>.$("input").attr("readonly", "readonly"); //对所有的input标签禁用

2.combobox禁用启用用法:

 <1>.$("#id").combobox({ disabled: true }); -----  $("#id").combobox({ disabled: false});

 <2>.$("#id").attr("readonly", "readonly");  //对单个禁用   -----  $("#id").removeAttr("readonly");

 <3>.$("#fm .easyui-combobox").combobox({ disabled: true });  //对form里面的下拉框禁用

 <4>.$("#ID").combobox("disable"); ------ $("#ID").combobox("enable");

3.datebox与datetimebox禁用启用方法:

 <1>.$("#fm .easyui-datebox").datebox({ disabled: true }); -----  $("#fm .easyui-datebox").datebox({ disabled: false});

 <2>.$("#id").attr("readonly", "readonly");  -----  $("#id").removeAttr("readonly");

 <3>.$("#fm .easyui-datetimebox").datetimebox({ disabled: true }); ----- $("#fm .easyui-datetimebox").datetimebox({ disabled: true });

4.还有一种比较投机取巧的方法,但是也可以用    例子如下:

<div id=" divParent"style="margin:10px 0;">
<input id='test' class="easyui-datebox" ></input></div> 现在我要隐藏那个input ,既然不兼容,那我就隐藏他父元素。
$("#divParent" ).css("display", "none");
以下是设置不可用的方法:

$("#test").datebox({
disabled: true
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ui easyui 插件