jQuery LigerUI 使用教程入门篇
2024-05-06 14:22:35
供稿：网友
获取最新代码
可以到http://ligerui.googlecode.com下载最新代码。
简介
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="http://www.cnblogs.com/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<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/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 style="padding:10px">
<input type="text" id="txt1" value="" style="width:200px"/>
</body>
更多的参数和方法的设置可以查看API：http://www.ligerui.com/api/
