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

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入门

title="这是我第一次使用EasyUI" iconCls="icon-ok"

toolbar="#dlg-toolbar" buttons="#dlg-buttons">

hello world!

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

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

二,使用easyloader方式

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

这时,我们只需引入:

使用时:

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

相关任务