0201 添加EasyUI组件的两种方法、parse解析器

1 使用class方式加载

　　格式为

　　　　easyui-组件名

　　例子　

　　<div class="easyui-dialog" id="box" title="标题" style="width:400px;height:200px;">
　　　　内容部分
　　</div>

1 <div class="easyui-dialog" id="box" title="标题" style="width:400px;height:200px;">
2 内容部分
3 </div>
利用类加载EasyUI源代码

　　PS：使用了规定的格式就可以生成一个UI 组件，这是由于jQuery EasyUI 的一个解析器（Parser）的起到了作用。解析之后，从Firebug 里面可以看到UI 组件变化后的HTML。

 

2 使用JS 调用加载

　　格式

　　　　$('需要记载组件的元素id').dialog();   注意：此处 .dialog() 表示加载dialog组件

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <script type="text/javascript" src="../js/test.js"></script>
17 
18     <link rel="shortcut icon" href="../img/study1.ico">
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24     </style>
25 </head>
26     <h2>测试</h2>
27     <div id="box">hello EasyUI</div>
28 <body>
29     
30 </body>
31 </html>
调用js加载的HTML源代码
1 /**
2  * 
3  * @authors Your Name (you@example.org)
4  * @date    2017-05-11 10:35:42
5  * @version $Id$
6  */
7 $( function() {
8     $("#box").dialog();
9 })
利用js加载的JavaScript源代码

　　PS：一般推荐使用第二种JS 调用加载，因为一个UI 组件有很多属性和方法，如果使用class 的用法将极大的不方便。并且根据JS 和HTML 分离的原则，第二种提高了代码的可读性。

 

3 Parser 解析器　　

　　Parser 解析器是专门解析渲染各种UI 组件了，一般来说，我们并不需要使用它即可自动完成UI 组件的解析工作。当然，有时可能在某些环境下需要手动解析的情况

　　手动解析一般是使用class 的情况下有效，比如设置class="easyui-dialog"

　　注意：需要时请自行查阅资料

posted @ 2017-05-11 11:09  寻渝记  阅读(159)  评论(0)    收藏  举报