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里面本身就包括了类型。





        

  • 相关阅读:
    点击对应不同name的button,显示不同name的弹窗(弹窗功能)
    点击添加本地图片的前端效果制作
    巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁)
    移动端取消touch高亮效果
    手机网站的几点注意
    图片自动切换+链接
    使用DOM的方法获取所有li元素,然后使用jQuery()构造函数把它封装为jQuery对象
    使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息
    利用jQuery扩展接口为jQuery框架定义了两个自定义函数,然后调用这两个函数
    jQuery链式语法演示
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/4299562.html
Copyright © 2011-2022 走看看