给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 相关文章推荐
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
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
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
Python中将字典转换为列表的方法
2016/09/21 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
Django websocket原理及功能实现代码
2020/11/14 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
银行办理业务介绍信
2014/01/18 职场文书
基督教婚礼主持词
2014/03/14 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
政风行风评议心得体会
2014/10/21 职场文书
老龙头导游词
2015/02/11 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书