ligerui的使用心得

1.ligerui的起源

LigerUI 是基于jQuery 的UI框架，其核心设计目标是快速开发、使用简单、功能强大、轻量级、易扩展。简单而又强大，致力于快速打造Web前端界面解决方案，可以应用于.net,jsp,php等等web服务器环境。

2.ligerui的优势

使用简单，轻量级
控件实用性强，功能覆盖面大，可以解决大部分企业信息应用的设计场景
快速开发，使用LigerUI可以比传统开发减少极大的代码量
易扩展，包括默认参数、表单/表格编辑器、多语言支持等等
支持Java、.NET、PHP等web服务端
支持 IE6+、Chrome、FireFox等浏览器
开源，源码框架层次简单易懂。
3.ligerui的常用组件

分页组件:ligerGrid

实例:

html

1 <div class="liger-treegrid" id="treegrid1" data="CustomersData" enabledEdit="true"> 2 <ul class="liger-treegrid-columns"> 3 <li name="CustomerID" width="200">CustomerID 4 <input class="liger-treegrid-editor" ltype="text" /> 5 </li> 6 <li name="CompanyName" width="200">CompanyName 7 <input class="liger-treegrid-editor" ltype="date" data-property="type:'checkbox'" /> 8 </li> 9 <li display="Address"> 10 <ul class="liger-treegrid-columns"> 11 <li name="City" width="100">City</li> 12 <li name="Address" width="100">Address</li> 13 <li name="PostalCode" width="100">PostalCode</li> 14 </ul> 15 </li> 16 </ul> 17 <div class= "liger-treegrid-detail"></div> 18 </div>

效果图:

弹窗组件:

$.ligerDialog.confirm(content, title, callback)

实例:

switch(type){

case "confirm": 16 $.ligerDialog.confirm('提示内容', function (yes) 17 { 18 alert(yes); 19 }); 20 break;

}

按钮组件:

实例:

1 $("#toptoolbar").ligerToolBar({ items: [ 2 { text: '增加', click: itemclick , icon:'add'}, 3 { line:true }, 4 { text: '修改', click: itemclick }, 5 { line:true }, 6 { text: '删除', click: itemclick } 7 ] 8 });

截图:

4.ligerui使用总结

ligerui里面的ligergrid是里面的核心组件