jQuery LigerUI使用教程入門篇
獲取***代碼
可以到http://ligerui.googlecode.com下載***代碼。
簡(jiǎn)介
jQuery LigerUI 是基于jQuery的一系列UI控件組合，簡(jiǎn)單而又強(qiáng)大，致力于快速打造Web前端界面解決方案。 因?yàn)槭乔岸丝丶?wù)器無(wú)關(guān)，可以適合.net,jsp,php等等web服務(wù)器環(huán)境。目前全部插件的打包壓縮JS只有100K左右,很輕巧。使用插件式的開(kāi)發(fā)模式，以“簡(jiǎn)單”為原則的設(shè)計(jì)，每個(gè)插件盡量獨(dú)立，并可依賴拓展。
ligerUI是什么
jQuery LigerUI控件豐富，包括基礎(chǔ)、導(dǎo)航、布局、表單、表格、樹(shù)形、窗口等
基礎(chǔ)：Resizable、Drag、Tip
導(dǎo)航：Menu、MenuBar、ToolBar
布局：Layout、Tab
表單：Form、TextBox、Button、CheckBox、ComboBox、DateEditor、Radio、Spinner
表格：Grid
樹(shù)形：Tree
窗口：Dialog、MessageBox、Window
如何使用
jQuery LigerUI是基于jQuery而設(shè)計(jì)的一系列插件集合。基本上每個(gè)插件都是相對(duì)獨(dú)立的。但是彼此之間又緊密地關(guān)聯(lián)著，合理地對(duì)插件進(jìn)行組裝，實(shí)現(xiàn)出現(xiàn)各種復(fù)雜的功能。 使用UI可以幫助你快速地創(chuàng)建友好的用戶界面。
***個(gè)例子
- <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 ()
- {
- //我們將一個(gè)html文本框?qū)ο筠D(zhuǎn)換成ligerui文本框?qū)ο?并返回ligerui對(duì)象
- var g = $("#txt1").ligerTextBox(
- {
- //如果沒(méi)有輸入時(shí),會(huì)提示不能為空
- nullText: '不能為空'
- });
- /*
- 如何獲取屬性
- */
- //方式一
- alert('方式一:' + g.get('disabled'));
- //方式二
- alert('方式二:' + $("#txt1").ligerTextBox('option', 'disabled'));
- /*
- 如何設(shè)置屬性
- */
- //方式一
- g.set('disabled', true);
- //方式二
- $("#txt1").ligerTextBox('option', 'disabled', false);
- /*
- 如何調(diào)用方法
- */
- //方式一
- g.setDisabled();
- //方式二
- $("#txt1").ligerTextBox('setEnabled');
- /*
- 如何設(shè)置事件
- */
- //這里給文本框綁定一個(gè)改變值的事件
- //也可以設(shè)置onChangeValue參數(shù)
- g.bind('changeValue', function (value)
- {
- alert(value);
- });
- });
- </script>
- </head>
- <body style="padding:10px">
- <input type="text" id="txt1" value="" style="width:200px"/>
- </body>
更多的參數(shù)和方法的設(shè)置可以查看API：http://www.ligerui.com/api/
上面是TextBox的使用范例，其他的插件使用方式類似。
如何使用ligerUI對(duì)象
我們應(yīng)用完插件以后，是返回一個(gè)ligerui對(duì)象的，可以把這個(gè)對(duì)象保存在一個(gè)全局的變量里面。在后續(xù)的操作中可能會(huì)用到。如果因?yàn)樽兞孔饔糜虻南拗频龋瑳](méi)有及時(shí)保存起來(lái)。我們可以用其他方式獲取。見(jiàn)如下：
保存到一個(gè)全局的javascript變量：
- var g;
- $(function ()
- {
- g = $("#txt1").ligerTextBox();
- );
使用$.fn.ligerGetTextBoxManager
- var g = $("#txt1").ligerGetTextBoxManager ();
使用$.ligerui.get方法
- var g = $.ligerui.get('txt1');
◆ 第三個(gè)方式的是使用ligerui對(duì)象的id直接獲取的，在傳入?yún)?shù)沒(méi)有指定id的情況下，對(duì)象的id將會(huì)使用html元素的id，如果html元素沒(méi)有id，將會(huì)自動(dòng)生成一個(gè)。所以在這里我們可以用html文本框的id來(lái)獲取。
◆ 如果沒(méi)有指定html元素的id，可以用***種方式或者第二種方式。
◆ 其實(shí)第二種方式可以用***種方式來(lái)替代，實(shí)則上ligerText是可以重復(fù)調(diào)用的，不同的是第二次以后調(diào)用都是直接放回ligerui對(duì)象。當(dāng)我們不確定html元素是否已經(jīng)應(yīng)用了插件的情況下可以使用第二種方式。
◆ 其他插件的命名跟TextBox類同
事件處理
事件處理有兩種方式。一種是以參數(shù)的形式傳入，一種是調(diào)用ligerui對(duì)象的bind方法。
- //方式一
- var g = $("#txt1").ligerTextBox(
- {
- onChangeValue : function(value){alert(value);}
- });
- //方式二
- g.bind('changeValue', function (value)
- {
- alert(value);
- });
◆ 使用bind方法是沒(méi)有帶”on”的。
◆ 事件監(jiān)聽(tīng)是可以多次綁定的。
◆ 對(duì)于某些事件，如果函數(shù)的返回值是false，那么后面還沒(méi)有觸發(fā)的函數(shù)將不會(huì)再執(zhí)行
◆ 第二種方式(bind)，是V1.1.3使用core機(jī)制以后引入的。
方法調(diào)用
使用ligerui的接口很方便。只需要調(diào)用ligerui對(duì)象的方法即可。
- //這里設(shè)置文本框不能編輯
- g.setDisabled();
- //這里設(shè)置文本框可以編輯
- g.setEnabled();
也可以使用這種方式
- $(“#grid”).ligerGrid(‘setEnabled’);
◆ 至于這個(gè)對(duì)象有哪些方法，可以查看API
◆ 對(duì)象的方法是可以擴(kuò)展的，后面會(huì)有一篇ligerui擴(kuò)展的章節(jié)來(lái)介紹
◆ 第二種方式是在V1.1.4加入的
獲取參數(shù)值
每一個(gè)ligerui對(duì)象都會(huì)有g(shù)et方法。可以獲取參數(shù)值
- var url = g.get(‘url’);
或者是：
- var url = $(“#grid”).ligerGrid(‘option’,’url’);
動(dòng)態(tài)設(shè)置參數(shù)
每一個(gè)ligerui對(duì)象都會(huì)有set方法。用于動(dòng)態(tài)得設(shè)置參數(shù)。比如改變Grid的url，那么可以這樣寫：
- g.set(‘url’,url);
或者是：
- g.set({url:url});
也可以用插件的方式：
- $(“#grid”).ligerGrid(‘option’,’url’,url);
◆ 第二種方式是允許同時(shí)傳入多個(gè)參數(shù)的。
◆ Set方法是所有插件的統(tǒng)一設(shè)置屬性的接口
◆ Set方法是V1.1.3使用core機(jī)制以后引入的。
◆ 插件傳參的方式是V1.1.4引入的
如何擴(kuò)展
Ligerui的默認(rèn)參數(shù)、方法都是可以擴(kuò)展的，這里我們定義了兩個(gè)入口: $.ligerDefaults和$.ligerMethods。
比如要改變或者擴(kuò)展Grid的默認(rèn)參數(shù)，可以改變$.ligerDefaults.Grid
默認(rèn)參數(shù)擴(kuò)展
只需要擴(kuò)展對(duì)象：$.ligerDefaults.{Plugin}
比如要改變表格默認(rèn)的頭部標(biāo)題：
- if($.ligerDefaults.Grid)
- {
- $.ligerDefaults.Grid.title = "我的表格";
- }
本地化支持?jǐn)U展
只需要擴(kuò)展對(duì)象：$.ligerDefaults.{Plugin}String
比如把表格“加載時(shí)”翻譯成英文：
- if($.ligerDefaults.GridString)
- {
- $.ligerDefaults.GridString.loadingMessage = "loading...";
- }
方法擴(kuò)展
只需要擴(kuò)展對(duì)象：$. ligerMethos.{Plugin}
這里給Grid ligerui對(duì)象增加一個(gè)alert方法：
- $.extend($.ligerMethods.Grid,
- {
- alert : function ()
- {
- //要注意到一點(diǎn)，這里的this就是ligerui對(duì)象
- var rowdata = this.getSelectedRow();
- if (!rowdata)
- alert('空');
- else
- alert(rowdata.CustomerID);
- }
- }
- );
- function show()
- {
- //后面就可以這樣使用
- Var g = $(“#maingrid”).ligerGrid();
- g.alert();
- }
原文：http://www.cnblogs.com/leoxie2011/archive/2012/01/16/2324106.html
【編輯推薦】
