jQuery LigerUI 使用教程入門篇
閱讀目錄
- 獲取最新代碼
- ligerUI是什么
- 如何使用
- 如何擴展 </ul>
- 第三個方式的是使用ligerui對象的id直接獲取的，在傳入參數沒有指定id的情況下，對象的id將會使用html元素的id，如果html元素沒有id，將會自動生成一個。所以在這里我們可以用html文本框的id來獲取。
- 如果沒有指定html元素的id，可以用第一種方式或者第二種方式。
- 其實第二種方式可以用第一種方式來替代，實則上ligerText是可以重復調用的，不同的是第二次以后調用都是直接放回ligerui對象。當我們不確定html元素是否已經應用了插件的情況下可以使用第二種方式。
- 其他插件的命名跟TextBox類同 </ul> </div> </blockquote>
- 使用bind方法是沒有帶”on”的。
- 事件監聽是可以多次綁定的。
- 對于某些事件，如果函數的返回值是false，那么后面還沒有觸發的函數將不會再執行
- 第二種方式(bind)，是V1.1.3使用core機制以后引入的。 </ul> </div> </blockquote>
- 至于這個對象有哪些方法，可以查看API
- 對象的方法是可以擴展的，后面會有一篇ligerui擴展的章節來介紹
- 第二種方式是在V1.1.4加入的 </ul> </div> </blockquote>
- 第二種方式是允許同時傳入多個參數的。
- Set方法是所有插件的統一設置屬性的接口
- Set方法是V1.1.3使用core機制以后引入的。
- 插件傳參的方式是V1.1.4引入的 </ul> </div> </blockquote>
獲取最新代碼
可以到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
</blockquote>如何使用
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: '不能為空' });</span><span style="background-color:#f5f5f5;color:#008000;">/*</span><span style="background-color:#f5f5f5;color:#008000;"> 如何獲取屬性 </span><span style="background-color:#f5f5f5;color:#008000;">*/</span><span style="background-color:#f5f5f5;color:#000000;"> </span><span style="background-color:#f5f5f5;color:#008000;">//</span><span style="background-color:#f5f5f5;color:#008000;">方式一</span><span style="background-color:#f5f5f5;color:#008000;"> </span><span style="background-color:#f5f5f5;color:#000000;"> alert(</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">方式一:</span><span style="background-color:#f5f5f5;color:#000000;">'</span> <span style="background-color:#f5f5f5;color:#000000;">+</span><span style="background-color:#f5f5f5;color:#000000;"> g.get(</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">disabled</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">)); </span><span style="background-color:#f5f5f5;color:#008000;">//</span><span style="background-color:#f5f5f5;color:#008000;">方式二</span><span style="background-color:#f5f5f5;color:#008000;"> </span><span style="background-color:#f5f5f5;color:#000000;"> alert(</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">方式二:</span><span style="background-color:#f5f5f5;color:#000000;">'</span> <span style="background-color:#f5f5f5;color:#000000;">+</span><span style="background-color:#f5f5f5;color:#000000;"> $(</span><span style="background-color:#f5f5f5;color:#000000;">"</span><span style="background-color:#f5f5f5;color:#000000;">#txt1</span><span style="background-color:#f5f5f5;color:#000000;">"</span><span style="background-color:#f5f5f5;color:#000000;">).ligerTextBox(</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">option</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">, </span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">disabled</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">)); </span><span style="background-color:#f5f5f5;color:#008000;">/*</span><span style="background-color:#f5f5f5;color:#008000;"> 如何設置屬性 </span><span style="background-color:#f5f5f5;color:#008000;">*/</span><span style="background-color:#f5f5f5;color:#000000;"> </span><span style="background-color:#f5f5f5;color:#008000;">//</span><span style="background-color:#f5f5f5;color:#008000;">方式一</span><span style="background-color:#f5f5f5;color:#008000;"> </span><span style="background-color:#f5f5f5;color:#000000;"> g.set(</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">disabled</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">, </span><span style="background-color:#f5f5f5;color:#0000ff;">true</span><span style="background-color:#f5f5f5;color:#000000;">); </span><span style="background-color:#f5f5f5;color:#008000;">//</span><span style="background-color:#f5f5f5;color:#008000;">方式二 </span><span style="background-color:#f5f5f5;color:#008000;"> </span><span style="background-color:#f5f5f5;color:#000000;"> $(</span><span style="background-color:#f5f5f5;color:#000000;">"</span><span style="background-color:#f5f5f5;color:#000000;">#txt1</span><span style="background-color:#f5f5f5;color:#000000;">"</span><span style="background-color:#f5f5f5;color:#000000;">).ligerTextBox(</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">option</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">, </span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">disabled</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">, </span><span style="background-color:#f5f5f5;color:#0000ff;">false</span><span style="background-color:#f5f5f5;color:#000000;">); </span><span style="background-color:#f5f5f5;color:#008000;">/*</span><span style="background-color:#f5f5f5;color:#008000;"> 如何調用方法 </span><span style="background-color:#f5f5f5;color:#008000;">*/</span><span style="background-color:#f5f5f5;color:#000000;"> </span><span style="background-color:#f5f5f5;color:#008000;">//</span><span style="background-color:#f5f5f5;color:#008000;">方式一</span><span style="background-color:#f5f5f5;color:#008000;"> </span><span style="background-color:#f5f5f5;color:#000000;"> g.setDisabled(); </span><span style="background-color:#f5f5f5;color:#008000;">//</span><span style="background-color:#f5f5f5;color:#008000;">方式二 </span><span style="background-color:#f5f5f5;color:#008000;"> </span><span style="background-color:#f5f5f5;color:#000000;"> $(</span><span style="background-color:#f5f5f5;color:#000000;">"</span><span style="background-color:#f5f5f5;color:#000000;">#txt1</span><span style="background-color:#f5f5f5;color:#000000;">"</span><span style="background-color:#f5f5f5;color:#000000;">).ligerTextBox(</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">setEnabled</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">); </span><span style="background-color:#f5f5f5;color:#008000;">/*</span><span style="background-color:#f5f5f5;color:#008000;"> 如何設置事件 </span><span style="background-color:#f5f5f5;color:#008000;">*/</span><span style="background-color:#f5f5f5;color:#000000;"> </span><span style="background-color:#f5f5f5;color:#008000;">//</span><span style="background-color:#f5f5f5;color:#008000;">這里給文本框綁定一個改變值的事件</span><span style="background-color:#f5f5f5;color:#008000;"> </span><span style="background-color:#f5f5f5;color:#008000;">//</span><span style="background-color:#f5f5f5;color:#008000;">也可以設置onChangeValue參數</span><span style="background-color:#f5f5f5;color:#008000;"> </span><span style="background-color:#f5f5f5;color:#000000;"> g.bind(</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">changeValue</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">, </span><span style="background-color:#f5f5f5;color:#0000ff;">function</span><span style="background-color:#f5f5f5;color:#000000;"> (value) { alert(value); }); }); </span><span style="color:#0000ff;"></</span><span style="color:#800000;">script</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">body </span><span style="color:#ff0000;">style</span><span style="color:#0000ff;">="padding:10px"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="text"</span><span style="color:#ff0000;"> id</span><span style="color:#0000ff;">="txt1"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">=""</span><span style="color:#ff0000;"> style</span><span style="color:#0000ff;">="width:200px"</span><span style="color:#0000ff;">/></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span></pre> </div>更多的參數和方法的設置可以查看API：http://www.ligerui.com/api/
上面是TextBox的使用范例，其他的插件使用方式類似。
如何使用ligerUI對象
我們應用完插件以后，是返回一個ligerui對象的，可以把這個對象保存在一個全局的變量里面。在后續的操作中可能會用到。如果因為變量作用域的限制等，沒有及時保存起來。我們可以用其他方式獲取。見如下：
保存到一個全局的javascript變量：
var g; $(function () { g = $("#txt1").ligerTextBox(); );</div>使用$.fn.ligerGetTextBoxManager
var g = $("#txt1").ligerGetTextBoxManager ();</div>使用$.ligerui.get方法
var g = $.ligerui.get('txt1');</div>
事件處理
事件處理有兩種方式。一種是以參數的形式傳入，一種是調用ligerui對象的bind方法。
//方式一 var g = $("#txt1").ligerTextBox( { onChangeValue : function(value){alert(value);} });<span style="color:#008000;">//</span><span style="color:#008000;">方式二 </span><span style="color:#008000;"> </span> g.bind('changeValue', <span style="color:#0000ff;">function</span> (value) { alert(value); });</pre> </div>
方法調用
使用ligerui的接口很方便。只需要調用ligerui對象的方法即可。
//這里設置文本框不能編輯 g.setDisabled();//這里設置文本框可以編輯 g.setEnabled();</div>也可以使用這種方式
$(“#grid”).ligerGrid(‘setEnabled’);</div>
獲取參數值
每一個ligerui對象都會有get方法。可以獲取參數值
var url = g.get(‘url’);</div>或者是：
var url = $(“#grid”).ligerGrid(‘option’,’url’);</div>動態設置參數
每一個ligerui對象都會有set方法。用于動態得設置參數。比如改變Grid的url，那么可以這樣寫：
g.set(‘url’,url);</div>或者是：
g.set({url:url});</div>也可以用插件的方式：
$(“#grid”).ligerGrid(‘option’,’url’,url);</div>
如何擴展
Ligerui的默認參數、方法都是可以擴展的，這里我們定義了兩個入口: $.ligerDefaults和$.ligerMethods。
比如要改變或者擴展Grid的默認參數，可以改變$.ligerDefaults.Grid
默認參數擴展
只需要擴展對象：$.ligerDefaults.{Plugin}
比如要改變表格默認的頭部標題：
if($.ligerDefaults.Grid) { $.ligerDefaults.Grid.title = "我的表格"; }</div>本地化支持擴展
只需要擴展對象：$.ligerDefaults.{Plugin}String
比如把表格“加載時”翻譯成英文：
if($.ligerDefaults.GridString) { $.ligerDefaults.GridString.loadingMessage = "loading..."; }</div>方法擴展
只需要擴展對象：$. ligerMethos.{Plugin}
這里給Grid ligerui對象增加一個alert方法：
$.extend($.ligerMethods.Grid, { alert : function () { //要注意到一點，這里的this就是ligerui對象 var rowdata = this.getSelectedRow(); if (!rowdata) alert('空'); else alert(rowdata.CustomerID); } } );function show() { //后面就可以這樣使用 Var g = $(“#maingrid”).ligerGrid(); g.alert(); }</div> 轉自：http://www.cnblogs.com/leoxie2011/archive/2012/01/16/2324106.html本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！推薦閱讀
jQuery LigerUI 使用教程入門篇
閱讀目錄 獲取最新代碼 ligerUI是什么 如何使用 如何擴展 獲取最新代碼 可以到http://ligerui.googlecode.com下載最新代碼。 簡介 jQuery LigerUI...jQuery LigerUI V1.1.5 (包括API和全部源碼) 發布
前言 2個月前以博文的形式發布了V1.1.0,到現在已經更新了5個版本,V1.1.3引入了core機制,提供了ligerui內置事件處理機制、屬性動態設置機制等等,搭建了ligerui系列插件的...
jQuery Mobile的教程
jQuery Mobile Tutorials jQuery Mobile Tutorial: Basics To help us, smart people have developed a ...jQuery 教程指南
Intriguing animate-on-scroll effect – jQuery tutorial In this tutorial we try to recreate the int...sesese色
jopen 
ajax