EasyUi的基础学习和总结

今天学习了easyUI的基础知识，个人总结了一下几点：

一、EasyUi是基于jquery的基础上开发的第三方插件，内部提供了大量的用于交互的JavaScript代码，所以我们只要简单的定义我们的用户界面就可以实现一个具有交互的界面了。使用EasyUi的几个注意点：

1.首先我们要引入Easyui的样式包：

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />

引入EasyUi的图标包：

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

之前说过EasyUi是基于jquery的基础上开发的所以在引入EasyUi的js包之前我们要先引入jquery包：

<script type="text/javascript" src="easyui/jquery.min.js"></script>

引入EasyUi的核心js包：

<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

引入EasyUi中文提示包：

<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

引入EasyUi中文提示包：

<script type="text/javascript" src="js/index.js"></script>

引入完这些包我们就可以设计我们EasyUi界面了，并且能很简单的就实现交互。

二、如何使用EasyUi定义的组件，主要由两种方式（以dialog组件为例）

1.使用class方式加载：

<ol class="linenums"><li class="L0"><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"dd"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"easyui-dialog"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"My Dialog"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="lit">400px</span><span class="pun">;</span><span class="pln">height</span><span class="pun">:</span><span class="lit">200px</span><span class="pun">;</span><span class="atv">"</span></li><li class="L1"><span class="pln">        </span><span class="atn">data-options</span><span class="pun">=</span><span class="atv">"iconCls:'icon-save',resizable:true,modal:true"</span><span class="tag">></span></li><li class="L2"><span class="pln">    Dialog Content.</span></li><li class="L3"><span class="tag"></div></span></li></ol>

通过给dom对象添加class属性就可以实现将div变成dialog组件，其中data-options（数据设置）属性使用来设置dialog的一系列属性的。

2.使用dom对象利用js的方式加载

<ol class="linenums"><li class="L0"><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"dd"</span><span class="tag">></span><span class="pln">Dialog Content.</span><span class="tag"></div></span></li></ol>

<ol class="linenums"><li class="L0"><span class="pln">$</span><span class="pun">(</span><span class="str">'#dd'</span><span class="pun">).</span><span class="pln">dialog</span><span class="pun">({</span></li><li class="L1"><span class="pln">    title</span><span class="pun">:</span><span class="pln"> </span><span class="str">'My Dialog'</span><span class="pun">,</span></li><li class="L2"><span class="pln">    width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">400</span><span class="pun">,</span></li><li class="L3"><span class="pln">    height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">200</span><span class="pun">,</span></li><li class="L4"><span class="pln">    closed</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span></li><li class="L5"><span class="pln">    cache</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span></li><li class="L6"><span class="pln">    href</span><span class="pun">:</span><span class="pln"> </span><span class="str">'get_content.php'</span><span class="pun">,</span></li><li class="L7"><span class="pln">    modal</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span></li><li class="L8"><span class="pun">});</span></li></ol>

通过{ }中的json形式来设置dialog组件的属性和外观。

三、如何调用组件的方法

调用组件的方法都是类似的，首先要获得组件对象然后在调用组件的方法并给出参数。下面还是以dialog组件对象来调用其方法

<ol class="linenums"><li class="L0"><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"dd"</span><span class="tag">></span><span class="pln">Dialog Content.</span><span class="tag"></div></span></li></ol>

<ol class="linenums"><li class="L0"><span class="pln">$</span><span class="pun">(</span><span class="str">'#dd'</span><span class="pun">).</span><span class="pln">dialog</span><span class="pun">({</span></li><li class="L1"><span class="pln">    title</span><span class="pun">:</span><span class="pln"> </span><span class="str">'My Dialog'</span><span class="pun">,</span></li><li class="L2"><span class="pln">    width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">400</span><span class="pun">,</span></li><li class="L3"><span class="pln">    height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">200</span><span class="pun">,</span></li><li class="L4"><span class="pln">    closed</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span></li><li class="L5"><span class="pln">    cache</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span></li><li class="L6"><span class="pln">    href</span><span class="pun">:</span><span class="pln"> </span><span class="str">'get_content.php'</span><span class="pun">,</span></li><li class="L7"><span class="pln">    modal</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span></li><li class="L8"><span class="pun">});  //这是定义了dialog组件</span></li></ol><p>$("#dd").dialog('方法名'，参数  ) //参数要根据具体的参数类型给</p>

经过这么简单的总结接下来对照EasyUi的API学习就轻松很多了