给Easyui-Datebox设置隐藏或者不可用的解决方法


Posted in Javascript onMay 26, 2017

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

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

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

$("#id").attr("readonly", true); ----- $("#id").removeAttr("readonly");
 $("#id").attr("readonly", "readonly"); ----- $("#id").removeAttr("readonly");
 $("#Form :input").attr("readonly", "readonly"); //对form里面的禁用
 $("input").attr("readonly", "readonly"); //对所有的input标签禁用

2.combobox禁用启用用法:

$("#id").combobox({ disabled: true }); ----- $("#id").combobox({ disabled: false});
 $("#id").attr("readonly", "readonly"); //对单个禁用 ----- $("#id").removeAttr("readonly");
 $("#fm .easyui-combobox").combobox({ disabled: true }); //对form里面的下拉框禁用
 $("#ID").combobox("disable"); ------ $("#ID").combobox("enable");

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

$("#fm .easyui-datebox").datebox({ disabled: true }); ----- $("#fm .easyui-datebox").datebox({ disabled: false});
 $("#id").attr("readonly", "readonly"); ----- $("#id").removeAttr("readonly");
 $("#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 
 });
Javascript 相关文章推荐
js兼容标准的表格变色效果
Jun 28 Javascript
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
JS中的作用域链
Mar 01 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 #Javascript
BootStrap中的Fontawesome 图标
May 25 #Javascript
Vue.js 中的 $watch使用方法
May 25 #Javascript
详解Javascript获取缓存和清除缓存API
May 25 #Javascript
Angularjs 实现动态添加控件功能
May 25 #Javascript
JavaScript实现自动跳转文本功能
May 25 #Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 #Javascript
You might like
Terran热键控制
2020/03/14 星际争霸
MySQL相关说明
2007/01/15 PHP
IIS6的PHP最佳配置方法
2007/03/19 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
javascript轮播图算法
2016/10/21 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
python比较2个xml内容的方法
2015/05/11 Python
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
找工作最新求职信
2013/12/22 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
行政管理专业求职信
2014/07/06 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
小学生学习保证书
2015/02/26 职场文书
勤俭节约主题班会
2015/08/13 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
Nginx 匹配方式
2022/05/15 Servers