jquery ligerui是基于jquery而设计的一系列ui插件集合，其核心设计目标是快速开发、使用简单、功能强大、轻量级、易扩展，使用ui可以帮助开发者快速地创建友好的用户界面。
本文操作环境：windows10系统、jquery 2.2.4、thinkpad t480电脑。
相关推荐：《jquery教程》
jquery ligerui 快速开发ui框架
ligerui 是基于jquery 的ui框架，其核心设计目标是快速开发、使用简单、功能强大、轻量级、易扩展。简单而又强大，致力于快速打造web前端界面解决方案，可以应用于.net,jsp,php等等web服务器环境。
ligerui有如下主要特点：
使用简单，轻量级
控件实用性强，功能覆盖面大，可以解决大部分企业信息应用的设计场景
快速开发，使用ligerui可以比传统开发减少极大的代码量
易扩展，包括默认参数、表单/表格编辑器、多语言支持等等
支持java、.net、php等web服务端
支持 ie6+、chrome、firefox等浏览器
开源，源码框架层次简单易懂。
jquery ligerui怎么使用
在写具体的使用之前先简单的说明下，小弟也是在项目上现学现卖，有不对的地方欢迎指正，小弟先谢过了。好了言归正传，大家可以在ligerui的官方网站上下载一份源码，我们可以在 lib/ligerui 目录下找到ligerui的所有插件如下图：
可以看到ligerui目录下面主要包括了，脚本，和皮肤这两个目录，js下存放着ligerui的所有插件，skin目录下提供了浅绿色，和灰色两种不同风格的皮肤，大家可以根据自己的喜好选择使用哪种皮肤。json2.js文件是用来解决ie6 和ie7不支持json对象的问题（json.parse(),和json.stringify()）,如果你需要你的程序支持ie6和ie7浏览器，你可能需要引用改脚本。接下来我们用简单例子来说明：
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <link href="http://www.cnblogs.com/lib/ligerui/skins/aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> <style type="text/css"> </style> <script src="http://www.cnblogs.com/lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="http://www.cnblogs.com/lib/ligerui/js/core/base.js" type="text/javascript"></script> <script src="http://www.cnblogs.com/lib/ligerui/js/plugins/ligercombobox.js" type="text/javascript"></script> <script src="http://www.cnblogs.com/lib/ligerui/js/plugins/ligerresizable.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#test1").ligercombobox({ data: [ { text: '张三', id: '1' }, { text: '李四', id: '2' }, { text: '赵武', id: '44' } ], valuefieldid: 'test3' }); }); </script></head><body style="padding:10px"> <input type="text" id="test1" /></body></html>
效果如图：
从上面的代码我们可以看出，首先需要引入对应你风格的皮肤下的ligerui-all.css文件，需要引入jquery文件，需要引入js/core/base.js文件，这个文件就如同你在使用jquery的时候需要引入jquery 的api文件一样，是个基础类吧，我个人的理解是这样。但在ligerui给出的demo中布局页面没有使用该文件而使用了/js/ligerui.min.js文件，我在一个项目中尝试过，如果同时引入了这两个则会出现错误，所以我在使用过程中除了布局页面，在别的画面中在引用ligerui别的插件之前都引用base.js文件。其次，你当前页面使用到了哪些ligerui的控件，则必须引用js/plugins下面对应的js插件。比如上面的例子中使用了ligerui的combox控件，则必须要引用对应的ligercombobox.js插件。 控件的初始化如例子代码中的js部分，需要放在$(function(){...})中也就是，不同控件的初始化方法都类似，比如combox的初始化方法为$("...").ligercombobox({...}), grid的初始化方法为("...").ligergrid({...}).如上面的例子其中data参数为该控件数据源参数，在ligerui中所有的数据源只能试用json格式，不同插架的具体参数、事件、方法请参考官方api：
在实际的项目中我们的数据源肯定是动态从数据库中存取，下面我将我在项目中使用的将datatable转换为json格式的类贴出来，有需要的可以拿去用。
public class jsonoperation { /// <summary> /// datatable转换json /// </summary> /// <param name="dtsource">转换数据源</param> /// <param name="strjosoncols">joson格式列</param> /// <param name="strparcols">datatable格式列</param> /// <returns>json字符串</returns> public static string datatabletojson(datatable source, string[] strjosoncols, string[] strparcols) { stringbuilder json = new stringbuilder(); json.append("["); if (source.rows.count > 0) { for (int introw = 0; introw < source.rows.count; introw++) { json.append("{"); for (int intcol = 0; intcol < strjosoncols.length; intcol++) { json.append(strjosoncols[intcol] + ":\"" + source.rows[introw][strparcols[intcol]].tostring().replace("\"","").trim() + "\""); if (intcol < strjosoncols.length - 1) { json.append(","); } } json.append("}"); if (introw < source.rows.count - 1) { json.append(","); } } } json.append("]"); return json.tostring(); } /// <summary> /// datatable转换json /// </summary> /// <param name="dtsource">转换数据源</param> /// <returns>json字符串</returns> public static string datatabletojson(datatable source) { stringbuilder json = new stringbuilder(); json.append("["); if (source.rows.count > 0) { for (int i = 0; i < source.rows.count; i++) { json.append("{"); for (int j = 0; j < source.columns.count; j++) { json.append(source.columns[j].columnname.tostring() + ":\"" + source.rows[i][j].tostring() + "\""); if (j < source.columns.count - 1) { json.append(","); } } json.append("}"); if (i < source.rows.count - 1) { json.append(","); } } } json.append("]"); return json.tostring(); } }
更多编程相关知识，请访问：编程课程！！
以上就是jquery ligerui是什么？的详细内容。