首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

EasyUI的容易使用

2013-03-14 
EasyUI的简单使用ext 和easyui 都算是JS框架吧,不同的是easyui 是基于JQUERY 的。这两个东西做出来的页面都

EasyUI的简单使用

      ext 和easyui 都算是JS框架吧,不同的是easyui 是基于JQUERY 的。这两个东西做出来的页面都还算比较好看,至少比我折腾出来的页面好看,个人认为,如果是做项目,给某个企业做东西,还是选一个的比较好,或者都不选,另外选个与这两个类似的一个框架也行,总之用了有好处。

      以前的项目都是程序员,写代码,然后找美工来美化页面,这样的一个模式,很容易一遍又一遍,反复又反复,因为一个项目总有很多相关项目人员,美工、程序员、项目经理、单位领导、客户。十个先生九本书,每个人看东西的眼光都不一样,尤其遇到一些注重字体和颜色的领导,下面的人就有事情可做了。最后的结果往往还是一个是大家都不满意的结果,因为时间不允许折腾了。有js框架后,这个问题就基本上没有了。因为页面风格基本上定了,想大修改也不行,而且也是一个大部分人都能认可的,还算是比较好看的。

        当然框架缺点也不是没有,ext 这个东西大家都知道的,一是页面有点慢,二是开发速度慢,三是好看程度也就这样了,不能更好。所以注定了这个玩意的生存空间了。还有一个js 框架 easyui,对这个了解一点,别的js框架俺不了解,俺就不说了,正如某伟人说的,没有调查就没有发言权嘛。  easyui嘛,做出来的页面相对不是非常炫,应该是不够好,个人感觉哦,但是相对ext使用和开发就简单多了,所谓easy就是容易嘛。确实相对ext 来说要是easy多了。

       说了这么多,到具体项目,我们应该怎么选择,这个嘛,有个什么培训中有一句名言,你的任何选择,都是对的。其实那个培训是激励那些在生活中有时候,不敢做出各种选择的人。在这里借用一下,但是意思不一样的哦。首先一点,如果项目将来访问用户很多很多的话,个人觉得都不能选,最好是自己写原生的JS代码,而且还得是高手来写,因为访问用户多了,页面代码既需要效率,又需要好看,还要使用各种浏览器,甚至还需要满足别的条件之类的,所以js高手就有了用武之地了,当然像12306刚推出来的时候,是个人都能感觉到,那系统好像也是花了好多银子的......扯远了.......

      如果项目很大,人很多,还是用EXT更好,有了人多就不怕事多,不怕开发效率,不怕没时间,更不怕花钱了,要的就一个,最好一定得出来个漂亮的东西,你好,我好,大家好。也许这就是大项目的特色。但是小项目就不一定了,如果现实需要,花更少的钱做更多事情的。那就没办法,easyui或者与类似于easyui的框架 就是最好的选择。

    扯了这么多没用的,简单说说easyui具体怎么用吧。

      引用 easyui 框架文件,包括css和js 这个../js/ 路径自己改哦 

    <link rel="stylesheet" type="text/css" href="../js/themes/default/easyui.css"/>      <link rel="stylesheet" type="text/css" href="../js/themes/icon.css"/>      <script type="text/javascript" src="../js/EasyUI/jquery-1.8.0.min.js"></script>      <script type="text/javascript" src="../js/EasyUI/jquery.easyui.min.js"></script>      <script type="text/javascript" src="../js/EasyUI/easyui-lang-zh_CN.js"></script>

这个还是简单,我们整个简单点panel 吧

 <div id="p" class="easyui-panel" title="Basic Panel" style="width:500px;height:200px;padding:10px;">   第一个easyui-panel </div>  

与html 写法是一样的 div 的class 设置为 "easyui-panel" 而已。 
这个写法就是让我们熟悉html + js 的高手不用重新学习,而ext 就不一样了,所有的都是界面元素都js来动态生成,系统运行效率没什么,关键作为程序开发效率就 纠结了

当然,easyui-panel 还有一种写法,那就是动态渲染,简单写写

<div id="p" style="padding:10px;">       <p>panel content.</p>       <p>panel content.</p>   </div>     $('#p').panel({     width:500,     height:150,     title: 'My Panel',    tools: [{     iconCls:'icon-add',      handler:function(){alert('new')}    },{      iconCls:'icon-save',      handler:function(){alert('save')}     }]   });   

这个搞法,个人感觉太麻烦了,EXT好像都是这么搞的,写的时候麻烦,维护的时候更麻烦.......还是第一种方式好啊,ext在以后的版本如果也能有这个,那就不得了,尤其没有版权不版权的时候。又说远了,我们是说easyui,不是说ext,哈哈

     当然,关于easyui中的panel,还有很多的属性和方法,这个不急,我们可以慢慢来。easyui 官网地址:http://www.jeasyui.com/ 有demo 也有API文档,还有教程。

这个东西,网上有说好,也说不好的,个人感觉总体还是不错的。有兴趣的自己尝试吧。

 

热点排行