给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 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
node文件批量重命名的方法示例
Oct 23 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
js简单实现自动生成表格功能示例
Jun 02 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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
微信小程序实现星星评价效果
2018/11/02 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
基石观后感
2015/06/12 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS