给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 相关文章推荐
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
Ajax同步与异步传输的示例代码
Nov 21 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 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
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
js运动应用实例解析
2015/12/28 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
Python读写文件方法总结
2015/06/09 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
民主生活会对照检查材料范文
2014/10/01 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
运动会开幕词
2015/01/28 职场文书
公司更名通知函
2015/04/24 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android