EasyUI的简单了解

js框架的一种就是easyUI，这样能解决很多引起冲突的的小方面，毕竟封装起来的东西不容易更改，时间是最大的阻碍。在选择之初就基本确定了demo的内容，直接使用官网的demo就可以，节省了大量的时间、人力，对于界面的美化工作可是替代性的啊，但是美工还是不可或缺。尽管easyUI的界面效果可能不是特别尽人意，做出来的页面相对不是非常炫，应该是不够好，但是相对之前的开发就简单多了，正如名字是的-easy就是容易。这样拿来就能使用的，可谓是so easy。

jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等

没有完美的功能，只有不断的满足需求，项目的使用、访问的次数、在这样的不选需求下，就要不断提高效率，高手的地位就显示出来了，因此，还是需要自己手写关键JS代码，毕竟效率才是最关键的，不同浏览器的兼容需要不断的测试，此时高手做的就不是直接引用demo了，借鉴一下才是更好的理解。

首先我们引用的时候需要对语言进行汉化，这就需要国际化显示中文的，下面这几个就需要我们添加到里面。

/scripts/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js要在后面引入。

1.tools定义工具栏，继承自panel的应该都可以使用。

$('#p').panel({     
    width:500,     
    height:150,     
    title: 'My Panel',     
   tools: [{     
     iconCls:'icon-add',     
     handler:function(){alert('new')}     
    },{     
     iconCls:'icon-save'    
     handler:function(){alert('save')}     
   }]     
});

easyui 里面的组件属性，同样可以写在标签里面。

<div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;"    
          iconCls="icon-save"  closable="true"    
          collapsible="true" minimizable="true" maximizable=true>    
      <p>panel content.</p>    
      <p>panel content.</p>    
</div>

秒客网

EasyUI的简单了解

相关文章