Jquery easyui总结

到现在为止，已经使用Jquery Easyui有一年了，在使用过程中，遇到了不同的问题。从一开始jquery easyui1.1版本到easyui 1.2版本，从它本身bug到功能上的不足，从本身样式的单一到多套皮肤的制作，一路走来发现主要常见的问题还是主要集中在Jquery easyui代码书写上。

首先，从基础讲起，初次接触jqeury easyui的时候，大部分人不知道jquery easyui和jquery UI的区别。他们的共同点有如下几点：

1、它们都是基于Jquery的，这都是基于jquery插件式开发比较的灵活。

2、都是对界面上的相关组件进行封装，如布局组件，表单组件以及相关特效的组件。当然目前jquery mobile也是类似的。

不同的是他们是有不同的研发团队开发的。

 

其次，要说明的是jquery对象与dom对象是不同的，这也是初学者一般注意不到的。平时我们用javascript操作的都是dom节点，而通过jquery的选择器返回的是jquery对象。jquery对象和dom对象都有自己的相关属性和方法以及事件。而且两者之间的方法、属性和事件不能够呼唤使用的。但是jquery对象与dom对象是可以相互转换的，具体的转换可以观摩一下其他的文章。

一、layout总结

     1、layout以html标签方式建立的

      

1. <div id="content" region="center" border="false" class="easyui-layout">  
2.                       
3.                     <div id="divPage1"  
4.                         data-options="region:'west'"  
5.                         style="width: 150px;"></div>  
6.                     <div id="divPage2"  
7.                         data-options="region:'center',href:'${basePath}/userManage_main.jspx'"></div>  
8.                       
9.                 </div> 
10. 这样，如果我想重新修改 div id="divPage1"这个layout的href属性，应该怎么实行？
11. 1. $("#divPage1").panel({region:'west',href:'${basePath}/userManage_left.jspx?width='+width});  
    2. $("#divPage1").panel('refresh'); 
       
    必须执行panel的‘refresh’方法才会生效，因此这个‘userManage_left.jspx’页面会被执行2次。目前我的解决办法是使用js脚本建立的方式来解决。

2、用js脚本方式建立的

先建立一个div标签，用于生成layout。

1. <div id="content" /> 
   

1. $('#content').layout('add',{     
2.                     region: 'west',     
3.                     width: 180,     
4.                     title: 'West Title',     
5.                     split: true,     
6.                     href:'${basePath}/userManage_left.jspx?width='+width,  
7.                     tools: [{     
8.                         iconCls:'icon-add',     
9.                         handler:function(){alert('add')}     
10.                     },{     
11.                         iconCls:'icon-remove',     
12.                         handler:function(){alert('remove')}     
13.                     }]     
14.                 });  
15.                 $('#content').layout('add',{     
16.                     region: 'center',     
17.                     width: 580,     
18.                     title: 'center Title',     
19.                     split: true,     
20.                     href:'${basePath}/userManage_main.jspx',  
21.                     tools: [{     
22.                         iconCls:'icon-add',     
23.                         handler:function(){alert('add')}     
24.                     },{     
25.                         iconCls:'icon-remove',     
26.                         handler:function(){alert('remove')}     
27.                     }]     
28.                 }); 
    

     3.easyui所有控件显示中文

         在引用jquery.easyui.min.js文件后，引用locale/easyui-lang-zh_CN.js