最近在看jQuery的EasyUI，当前公司也是用这个前端框架的。EasyUI的学习节奏和JavaScript等不一样，JavaScript一类因为是一门独立的语言，所以一般是从语法入手，先语法然后再了解一些特性、一些内置内容、一些包，基本就能有一个比较系统的认识。而EasyUI因为是一个框架，其实是由一系列的控件插件组成的，所以从教程学习时，直接就触碰到插件本身，读手册太过乏味，不读又会觉得莫名其妙，学起来麻烦一点。但其实只要打通的前置内容（JavaScript、JQuery、CSS、JSON以及一门后端语言），学习是没有障碍的。我碰到的难点主要在于前端经验太缺乏，对于前端内容虽然能想起来，但是熟练度不够，这也是这一段正在改善的。
学习思路是，先通读，整理一个泛读，保罗各组件的常用方法和范例，再来一个提升，整理各个组件的关系以及推理原理。废话少说，show you the code。
1.easyui是基于jQuery的框架，集成了各种用户界面插件。插件的实现，很多都是结合了jQuery完成控制，CSS处理样式，服务器端规定数据格式（通常是JSON），通过这三个点协同完成。
2.需要引入指定包
3.两种申明方法，一种是通过指定 class为特定的easyui类，结合指定属性设定来完成。第二种是通过jQuery语法，调用特定的函数来完成，这种函数，可以实现给一个元素添加类型控件（这一点自己实现也简单，就是添加class属性）。
范例：
<div class="easyui-dialog" style="width:400px;height:200px"
data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">dialog content.</div>
或
<input id="cc" style="width:200px" />
$("#cc").combobox({ url:...,required:true;valueField:'id',textField:'text'});
//这里有一个问题要考虑的是，第二种方法中，原控件原始类型种类是否有关系？（推测是，感觉要看easyui是以什么层级的元素来实现的，如果是以最底层的层级实现，那么就没有关系，因为所有元素最底层的层级应该是一样的；如果是以高层层级来实现，那么可能就有影响，待验证）
4.CRUD应用（CRUD-> create+retrieve+update+delete）
常用控件：
datagrid,可以展示列表数据，也可以开启编辑模式
dialog,可以创建编辑窗口
form,可以提交表单数据
messager，显示操作信息
（搞清楚与后台的通讯格式后，实际应用是非常简单的，因为完全无需介入从后台获取数据载入控件的过程。自己实现的话，需要发送请求，获取数据后，还需要逐个控件来设置值，而用easyui控件，这三步直接通过一个url以及与后台约定返回格式就搞定）
5.jEasyUI拖放
5.1通过draggable()方法，可以给元素控件添加拖拽插件(注意这个控件不依赖于元素类型，也就意味着前面所想的那个基于最底层实现来写easyui插件是可行的，所以大概率可以无视控件的类型)
范例:
$("#dd").draggable();
两种可选的配置：
$("#dd").draggable({proxy:'clone'}); //注意，这里用的是用{}添加参数
或
$("#dd").draggable({proxy:function(source){
var p = $('<div class="proxy">proxy</div>');
p.appendTo('body');
return p;
}});
//这里两个注意点，一个是 $('<div>...</div>')这种直接创建元素的写法
第二个是 appendTo('body')的写法以及这个操作放入body中的含义
5.2 draggable的更高级用法
$(".item").draggable({
revert:true,
proxy:'clone',
onStartDrag:function(){
$(this).draggable('options').cursor='not-addlowed';
$(this).draggable('proxy').css('z-index',10);
},
onStopDrag:function(){
$(this).draggable('options').cursor='move';
} });
//这里有几个注意点，1.可以通过$(.item)这种写法来获取一类子元素,从而可以实现模拟事件。白天时我还在纠结怎么获取propertygrid的子元素，后面通过其他方法取巧实现，但是如果一定要获取,其实通过选择器就可以搞定，因为范围内的子元素的类型是可以获知的，写法类似于(这里的easyui-grid为乱写的，具体的明天测试一下)
$("#mypropertygrid.easyui-grid").blur(function(){alert("离开焦点";)});
或 $("#mypropertygrid.easyio-grid").bind('blur',function(){alert("离开焦点";)});
2.easyUI的控件参数貌似是通过 {a1:v1,a2:v2,a3:function(){}}这种JSON语法来搞的
3.控件获取自身属性的语法貌似是 $(this).draggable('option') 这种语法，获取的应该是一个属性对象，然后通过 $(this).draggable('option').cursor='not-allowed'这种手法就可以调整
4.类似的内置参数还有 onDragEnter,onDragLeave,onDrag （应该还有很多，更多的需要看一下后面的手册内容）
//虽然开始想吐槽easyUI教程设置不合理的，因为直接把几个最麻烦和完整的crud案例放在最前面，初看是云里雾里的，不过看到draggable这里，才知道编者也是用心良苦。先用完整案例示范用法，然后从最简单的draggable插件开始讲解。
//今天先到这里了，回家早睡~~~~~
未完待续...
6. jQuery EasyUI 菜单与按钮
这个目录下的几个常用类型有，
easyui-menu
easyui-linkbutton
easyui-menubutton
easyui-splitbutton
范例：
easyui-menu：
<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="javascript:alert('new')">New</div>
<div>
<span>Open</span>
<div style="width:150px;">
<div><b>Word</b></div>
<div>Excel</div>
<div>PowerPoint</div>
</div>
<div icon="icon-save">Save</div>
<div class="menu-sep"></div>
<div>Exit</div>
</div>
</div>
easyui-menu创建后默认是隐藏的，用下述方法显示
$("mm").menu('show',{ left:200,top:100});
//上述范例可以看出来，这些插件通常都是两类方法处理，一类是通过html，一类是通过 $("id").插件名(....)
//html规则下，可以看出来，在标志了class为特定的插件类型时，其子空间下的标签，类似于<div>这类，会按照插件定义的规则来显示和处理（因为jQuery通过选择器要筛选子控件十分简单，所以这类实现很好处理，而且如果没猜测，这个机制也就意味着，很多控件，利用选择器以及对于子元素的理解，都是有办法修改控件样式元素样式的）
//列出来是想熟悉一下 style="width:100px;" 以及 iconCls="icon-cancel"这类写法，iconCls调用的这些图标，在做小项目或测试时可以省掉很多功夫；plain=“true”；$(selector).linkbutton('disable')；<div class = "menu-sep" ></div>
//这一些在很多地方都是可以通用的
7.jQuery EasyUI布局
常用的插件主要有:
easyui-layout (布局)
easyui-panel (面板)
easyui-accordion (折叠面板)
easyui-tabs (标签页)
7.1 easyui-layout提供五个区域:easy,west,north,south,center，其中center是必须有的，其余的是可选的
范例：
<div class="easyui-layout" style="width:400px;height:200px">
<div region="west" split="true" title="Navigator" style="width:150px">
<p style="padding:5px;margin:0;">Select language: </p>
<ul>
<li><a href="javascript:void(0)" onclick="showcontent('java')">Java</a></li>
<li><a href="#" onclick="showcontent('erlang')">Erlang</a></li>
</ul>
</div>
<div id="content" region="center" title="Language" style="padding:5px"></div>
</div>
function showcontent(lan){
$("#content").html('Introduction to'+language+" language");
}
//这里的要点有如下几个：
1.由region=“west”这里想到的，html元素自定义参数如何使用（JSP添加新标签好像是要通过TLD文件，html元素添加新标签，可以通过DOM自带的API来实现，对于拓展已有元素的方法需要再研究一下，暂时放着，后面单独单独章节来搞一搞）
2.split=“true”是允许通过拖拽边框改变区域大小的意思
3.<ul>和<li>标签无需结合table也可以使用
4.href值为“javascript:void(0)”与"#"的区别是什么,"#"相当于锚的写法，但是没有写ID，所以默认跳转到页面顶部，而且会在页面url后面出现一个#,而javascript：void(0)是一个空操作，也没有返回值，所以就是一个空链接
5.再就是 <div .. class ="easyui-layout">...<div .. region="center"..>..</div>...</div> 这种插件用法。推测也支持jQuery写法，因为运行时编译的特性，所以对于center的检测应该是在显示环节
7.2 easyui-panel
范例：
<div class="easyui-panel" title="Complex" iconCls="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;">
...
</div>
//这里的要点有，自带的title和iconCls的标题属性；collapsible控制是否可折叠
7.3 easyui-accordion (折叠面板)
范例：
<div class="easyui-accordion"...>
<div ..title="..."...></div>...
</div>
//easyui-accordion和easyui-panel collapsible的区别在于，easyui-accordion会自动把下述的第一级<div>处理成easyui-panel，而且实现了自动控制，一次只有一个下述一级easyui-panel展开的效果 （可以把easyui-accordion理解为更精细的easyui-panel封装）
7.4 easyui-tabs （标签页）
<div class="easyui-tabs" ...>
<div ... title="xx"... closable="true"...>
</div>
//可以看出，easyui-tabs和easyui-accordion类似，也会把下述第一级的<div>解析成easyui-panel，而且它还添加了一些类似于closable的自定义参数，它的最终实现样式是标签页的形式
几个常用方法有：
$("tt").tabs('exists',title)
$("tt").tabs('add',{title:"abc",content:"<iframe>..." closable:true});
//这里有两个要点，一个是之前熟悉的 插件名('方法名','内容')这种用法
第二个是，添加插件对象时，参数是用{name1:va1,name2:va2}这种JSON方式传递的
7.5 easyui-tabs 自动播放的一种写法
var index=0;
var t = $('tt');
var tabs = t.tabs('tabs');
setInterval(function(){
t.tabs('select',tabs[index].panel('option').title);
index ++;
if(index >= tabs.length){
index=0;
}
},3000);
//这里的要点有如下几个
1.$('tt').tabs('tabs') 为获取panel对象组
2. tabs[index].panel('option').title 语法为首先通过panel('option')拿到panel的option对象，title就是option对象的title属性。（title为easy-panel的第一级属性，但是值却是存在option中的，关于这一点，了解自定义元素属性后应该能更好的理解）
7.6自定义panel样式
CSS语法为
.panel-body{
...}
.panel-header{
...}
.panel-tool-collapse{
...}
// .xx 为类选择器语法，由此可以看出来，easyui控件在内部实现显示效果时，显示元素是定义了特定的类名的，类似于panel-header这种，通过给这些类添加样式可以达成修改样式的效果。但是目前怎么获知这些类名，对于我是黑盒。。。。
//今天先到这里了，
未完待续
网友评论