EasyUI入门:如何引入及简单使用 【转】

 也许，只有当做比较大的项目的时候，才会发现封装好的东西会为程序猿们带来多少方便。合作开发的时候更应该强调复用，才能更加发挥团队的优势。

 

        今天使用了一些EasyUI,发现很wonderful!

        比如，以前，我们为了写一个还看得过去的按钮，得先在HTML里面加入按钮，然后在CSS里面写入样式，又用JS控制它的事件，整个按钮写下来，我们已经快被烦死了，抬起头看看，我们还有label,dropList,text......等N多个这样的东西要写。后来有了jQuery了，我们的日子似乎好过了点儿，尝试过EasyUI,忽然就又体会到了封装的好处。

 

           ok,开始进入正题，本文主要是简介在使用EasyUI进行开发时，要引入那些东西，以及一些注意事项，还有运行下我们的dialog版的“hello world”.

 

一，直接引入方式

 

         如下代码，我们首先要引入我们的Jquery,这个jquery的版本最好跟EasyUI里面使用的Jquery版本一至，以免出现我们使用EasyUI时莫名其妙的错误。

     然后引入的是EasyUI的JS文件，注意，这两个JS文件都要指定charset.

    

    接着是CSS文件的引入，我们选择如下的CSS文件：

接着是Icon，接着是汉化包：

        

        

所有文件引入完成之后，我们从官网上粘段代码来看看EasyUI的效果：

 

        

 

 

 

      

 

在浏览器中看到结果如图：

     

     

            

 

 

       二，使用easyloader方式

 

 

                               如果觉得上面的引入文件的方式太烦琐了，我们可以使用easyloader的方式，动态加载我们要使用到的JS，CSS，或者模块。

 

                  

 

 

                   这时，我们只需引入：

 

[html]  view plain  copy

 

 

1. <script language="JavaScript" type="text/javascript" src="../jquery-easyui-1.2.6/jquery-1.7.2.min.js" charset="utf-8"></script>  <!--(指定编码方式，防止出现乱码)引入EasyUI中使用的Jquery版本-->  
2. <script language="JavaScript" type="text/javascript" src="../jquery-easyui-1.2.6/easyloader.js"></script>  

 

 

              使用时：

 

              

                    

 

 

                      使用easyloader后，可以用ID创建对象，也可以用class，但是因为parser的存在，使用class的时候，无需再在load方法里面指定类型，因为class里面本身就包含了类型。