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 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/
