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

简介:         也许,只有当做比较大的项目的时候,才会发现封装好的东西会为程序猿们带来多少方便。合作开发的时候更应该强调复用,才能更加发挥团队的优势。         今天使用了一些EasyUI,发现很wonderful!         比如,以前,我们为了写一个还看得过去的按钮,得先在HTML里面加入按钮,然后在CSS里面写入样式,又用JS控制它的事件,整个按钮写下来,我们已经快被烦死了,抬起头看看,我们还有label,dropList,text......等N多个这样的东西要写。


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


        今天使用了一些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,接着是汉化包:

       

       

      



      

<!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;width: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里面本身就包含了类型。





    

目录
相关文章
|
Web App开发 JavaScript 前端开发
EasyUI之Hello world(EasyUI的入门学习)
1:创建一个动态web工程:    去官网http://www.jeasyui.net/download/下载官网文档    我去官网下载的最新版本,个人根据自己的需求下载即可。 点击之后看到很多版本,根据自己的需求进行下载:   选择版本之后就可以进行下载了(这里下载免费版本):   2:在webContent下面创建js文件和easyUi文件。
1337 0
|
前端开发 JavaScript 数据安全/隐私保护
easyui 入门
http://www.cnblogs.com/tangge/p/3214496.html 1.页面引用. jquery,easyui,主题easyui.css,图标ico.css,语言zh_CN.
1374 0