zoukankan      html  css  js  c++  java
  • EasyUI入门:怎样引入及简单使用


            或许,仅仅有当做比較大的项目的时候,才会发现封装好的东西会为程序员们带来多少方便。合作开发的时候更应该强调复用,才干更加发挥团队的优势。


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

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


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


    一,直接引入方式


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

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

       

        接着是CSS文件的引入,我们选择例如以下的CSS文件:


                 


        

     

       接着是Icon,接着是汉化包:

           

           

          



          

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>EasyUI入门</title>
    	
    	
    	
    </head>
    
    	<script language="JavaScript" type="text/javascript" src="../jquery-easyui-1.2.6/jquery-1.7.2.min.js" charset="utf-8"></script>  
                                                              <!--(指定编码方式,防止出现乱码)引入EasyUI中使用的Jquery版本号-->
    	<script language="JavaScript" type="text/javascript" src="../jquery-easyui-1.2.6/jquery.easyui.min.js" charset="utf-8"></script> 
                                                                    <!--(指定编码方式,防止出现乱码)引入EasyUi文件-->
    
    	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.2.6/themes/default/easyui.css">   <!--引入CSS样式-->
    	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.2.6/themes/icon.css">   <!--Icon引入-->
    	
    	<script language="JavaScript" type="text/javascript" src="../jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>  <!--汉化-->
    
    	<script>
    		
    	</script>
    <body>
    	
    	   <!--此处,class="easyui-dialog" 要注意,在EasyUi里面,Parser会将easyui-+****的div转换为元件,不能省去-->
    		<div id="dd" class="easyui-dialog" style="padding:5px;400px;height:200px;"
    				title="这是我第一次使用EasyUI" iconCls="icon-ok"
    				toolbar="#dlg-toolbar" buttons="#dlg-buttons">
    		hello world!
           </div>
    	
    	
    	
    </body>
    </html>
    


         

        全部文件引入完毕之后,我们从官网上粘段代码来看看EasyUI的效果:


           




         


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

        

        

               



           二,使用easyloader方式



                                   假设认为上面的引入文件的方式太烦琐了,我们能够使用easyloader的方式,动态载入我们要使用到的JS,CSS,或者模块。


                     



                       这时,我们仅仅需引入:

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



                  使用时:


                 

                       



                          使用easyloader后,能够用ID创建对象,也能够用class,可是由于parser的存在,使用class的时候,无需再在load方法里面指定类型,由于class里面本身就包括了类型。





        

  • 相关阅读:
    MySQL 索引优化指南
    Servlet,Tomcat,Jetty,Netty,Mina 对比
    Linux 磁盘IO速度测试
    flume 数据链路问题排查
    MySQL 强行kill后启动失败问题:[ERROR] Plugin 'InnoDB' registration as a STORAGE ENGINE failed.
    hdfs web界面介绍
    python2/python3 编码问题
    Spark WARN Utils: Service 'sparkDriver' could not bind on port 0. Attempting port 1.
    python2 升级到 python3
    万维网的信息检索系统【计算机网络】
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/4299562.html
Copyright © 2011-2022 走看看