获取最新代码
可以到下载最新代码。
简介
jQuery LigerUI 是基于jQuery的一系列UI控件组合，简单而又强大，致力于快速打造Web前端界面解决方案。 因为是前端控件，跟服务器无关，可以适合.net,jsp,php等等web服务器环境。目前全部插件的打包压缩JS只有100K左右,很轻巧。使用插件式的开发模式，以“简单”为原则的设计，每个插件尽量独立，并可依赖拓展。
ligerUI是什么
jQuery LigerUI控件丰富，包括基础、导航、布局、表单、表格、树形、窗口等
基础：Resizable、Drag、Tip
导航：Menu、MenuBar、ToolBar
布局：Layout、Tab
表单：Form、TextBox、Button、CheckBox、ComboBox、DateEditor、Radio、Spinner
表格：Grid
树形：Tree
窗口：Dialog、MessageBox、Window
回到顶部
如何使用
jQuery LigerUI是基于jQuery而设计的一系列插件集合。基本上每个插件都是相对独立的。但是彼此之间又紧密地关联着，合理地对插件进行组装，实现出现各种复杂的功能。 使用UI可以帮助你快速地创建友好的用户界面。
第一个例子
复制代码 代码如下:
<head>
<title></title>
<link href="https://www.cnblogs.com/lib/ligerUI/skins/Aqua/css/ligerui-all.css" type="text/css" />
<script src="https://www.cnblogs.com/lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="https://www.cnblogs.com/lib/ligerUI/js/core/base.js" type="text/javascript"></script>
<script src="https://www.cnblogs.com/lib/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{
//我们将一个html文本框对象转换成ligerui文本框对象,并返回ligerui对象
var g = $("#txt1").ligerTextBox(
{
//如果没有输入时,会提示不能为空
nullText: '不能为空'
});
/*
如何获取属性
*/
//方式一
alert('方式一:' + g.get('disabled'));
//方式二
alert('方式二:' + $("#txt1").ligerTextBox('option', 'disabled'));
/*
如何设置属性
*/
//方式一
g.set('disabled', true);
//方式二
$("#txt1").ligerTextBox('option', 'disabled', false);
/*
如何调用方法
*/
//方式一
g.setDisabled();
//方式二
$("#txt1").ligerTextBox('setEnabled');
/*
如何设置事件
*/
//这里给文本框绑定一个改变值的事件
//也可以设置onChangeValue参数
g.bind('changeValue', function (value)
{
alert(value);
});
});
</script>
</head>
<body>
<input type="text" value=""/>
</body>
更多的参数和方法的设置可以查看API：
上面是TextBox的使用范例，其他的插件使用方式类似。
如何使用ligerUI对象
我们应用完插件以后，是返回一个ligerui对象的，可以把这个对象保存在一个全局的变量里面。在后续的操作中可能会用到。如果因为变量作用域的限制等，没有及时保存起来。我们可以用其他方式获取。见如下：
保存到一个全局的javascript变量：
复制代码 代码如下:
var g;
$(function ()
{
g = $("#txt1").ligerTextBox();
);
使用$.fn.ligerGetTextBoxManager
复制代码 代码如下:
var g = $("#txt1").ligerGetTextBoxManager ();
使用$.ligerui.get方法
复制代码 代码如下:
var g = $.ligerui.get('txt1');
第三个方式的是使用ligerui对象的id直接获取的，在传入参数没有指定id的情况下，对象的id将会使用html元素的id，如果html元素没有id，将会自动生成一个。所以在这里我们可以用html文本框的id来获取。
如果没有指定html元素的id，可以用第一种方式或者第二种方式。
其实第二种方式可以用第一种方式来替代，实则上ligerText是可以重复调用的，不同的是第二次以后调用都是直接放回ligerui对象。当我们不确定html元素是否已经应用了插件的情况下可以使用第二种方式。
其他插件的命名跟TextBox类同
事件处理
事件处理有两种方式。一种是以参数的形式传入，一种是调用ligerui对象的bind方法。
复制代码 代码如下:
//方式一
var g = $("#txt1").ligerTextBox(
{
onChangeValue : function(value){alert(value);}
});
//方式二
g.bind('changeValue', function (value)
{
alert(value);
});
使用bind方法是没有带”on”的。
事件监听是可以多次绑定的。
对于某些事件，如果函数的返回值是false，那么后面还没有触发的函数将不会再执行
第二种方式(bind)，是V1.1.3使用core机制以后引入的。
方法调用
使用ligerui的接口很方便。只需要调用ligerui对象的方法即可。
复制代码 代码如下:
//这里设置文本框不能编辑
g.setDisabled();
//这里设置文本框可以编辑
g.setEnabled();
也可以使用这种方式
复制代码 代码如下: