jquery easyui 控件是如何封装的，请简单示例代码方法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery easyui 控件是如何封装的，请简单示例代码方法相关的知识，希望对你有一定的参考价值。
中<input id="dd" class="easyui-datebox" ></input>这样就能加载一个日期控件，我想自己去封装一个控件，类似于它一样，不知道怎么做，请会的人指点一下，有源代码最好，谢谢。我的邮箱：javasky@yeah.net
easyui 这个东西我做了一个小项目了，但是效率太低，想写一个新的控件，更是不会写，问也没人知道怎么写，知道的也不说，没办法了。
<input id="dd" class="mywidget-userlist" ></input>
在全局加载的公用脚本里，添加如下代码：
$("input.mywidget-userlist").live("click", function(evt)
alert("此处具体实现你要的效果，放你的大段代码。");
);
这样，以后你就不用重复那些代码了，而是只要在需要使用的input上加个class就能实现这样的效果了。追问
非常好，如上，我如果做的控件如日期一下，在输入框右边有一个小图片控件，是怎么做到的，而且我还要弹出一个DIV,有例子吗？ 非常感谢您的指点。
追答这个可以参考easyui的源代码，看他的日历控件的实现方法，一般来说是在input外面wrap上一个div，后面再加一个图标，同时将input的边框隐藏。给div加上一个边框，这样看起来整个div就象是一个控件了。细节你可以用FireBug去观察easyui的控件。
也可以参考一下这个http://www.ligerui.com/lib/ligerUI/js/plugins/ligerComboBox.js 源码，这个是ligerUI的，源码比较清晰，供参考。
参考资料：www.ligerui.com/demos/comboBox/comboBoxSingle.htm
参考技术A easy-ui的代码format一下就能读了,思路就是先用jquery遍历标签查询class为easy-ui的关键字的所有标签,然后在根据class进行渲染,重做的目的何在?功能不够用?追问我不是想重做这个控件，我是要写一个新的控件，之前用时要写很大一片，我也想和这个一样，在用的地方调用一下就行了。
追答不明白写一大片是什么意思,easy-ui是我用过的最简洁的jquery插件之一,如果你还嫌麻烦可以试试梅花雪的日历控件,或其他的控件,怎么都比重写强,而且easy-ui的源码是完全公开的啊,不是很难读,直接在源码基础上改也比重写强
追问我是写这么一个控件，举例：一点击弹出一个对话框，上面有我从数据库查出的多条人员信息，选中其中一条，对话框关闭，同时返回选中人员的主键，这个主键用来保存传给后台，但显示的是人名（只供显示），如果我输入编码时，回车同样显示人名，保存主键（这个主键是不显示的），当前我是和下图一样实现的，但写的非常多，重复的内容也很多，每用一次都要复制一片，因为相当于是多个控件写组合。
追答这和日历又有什么关系呢~汗...........既然你的需求easy-ui无法满足,要么改源码,要么去找更符合你需求的suggest控件,蛮多的,怎么也比自己写容易~
如何设置jquery easyui中下拉框不可编辑
设置jqueryeasyui中下拉框不可编辑的方法：EasyUI常用控件禁用方法：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);4.combogrid禁用启用方法:.$("#FPayApplySupAccountID").combogrid("disable");$("#FPayApplySupAccountID").combogrid("enable");5.lable标签ID附加文字：.$("#id").text("标题:");//此方法可以屏蔽掉lable标签内的文字 参考技术A 首先，利用jquery easyui中的下拉框，需要放在Java Web项目中。新建一个Java Web项目，并将相应的js和css放到目录下，并在pages目录下新建select.jsp引入jquery easyui需要的js和css
<link rel="stylesheet" type="text/css" href="../styles/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../styles/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../styles/demo.css">
<script type="text/javascript" src="../scripts/jquery.min.js"></script>
<script type="text/javascript" src="../scripts/jquery.easyui.min.js"></script>
如下图所示：
在<body></body>中插入div和select
<div style="text-align: center; vertical-align:middle; width: 100%; height: 100%;">
<select id="cc" class="easyui-combobox" style="width:200px;">
<option>苹果</option>
<option>香蕉</option>
<option>橘子</option>
<option>荔枝</option>
<option>樱桃</option>
<option>草莓</option>
<option>芒果</option>
<option>桃子</option>
<option>葡萄</option>
</select>
</div>
如下图所示：
启动Tomcat服务器，在浏览器中查看页面
http://localhost:端口号/项目名称/页面名称
查看结果如下：
现在，就要实现下拉框不可编辑的功能，要保证有修改权限的人可以修改，没有修改权限的人只能有查看，设置其不能编辑
<script type="text/javascript">
$(function()
$('#cc').combobox(
required:true,
multiple:true,
disabled:true
);
);
</script>
如下图所示：本回答被提问者采纳
以上是关于jquery easyui 控件是如何封装的，请简单示例代码方法的主要内容，如果未能解决你的问题，请参考以下文章
Jquery EasyUI Editable DataGrid如何绑定combogrid控件