jQueryLigerUI的使用教程

本篇內(nèi)容介紹了“jQuery LigerUI的使用教程”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

建網(wǎng)站原本是網(wǎng)站策劃師、網(wǎng)絡(luò)程序員、網(wǎng)頁設(shè)計師等，應(yīng)用各種網(wǎng)絡(luò)程序開發(fā)技術(shù)和網(wǎng)頁設(shè)計技術(shù)配合操作的協(xié)同工作。創(chuàng)新互聯(lián)公司專業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站制作(企業(yè)站、響應(yīng)式網(wǎng)站、電商門戶網(wǎng)站)等服務(wù),從網(wǎng)站深度策劃、搜索引擎友好度優(yōu)化到用戶體驗的提升,我們力求做到極致!

簡介

jQuery LigerUI 是基于jQuery的一系列UI控件組合，簡單而又強大，致力于快速打造Web前端界面解決方案。 因為是前端控件，跟服務(wù)器無關(guān)，可以適合.net,jsp,php等等web服務(wù)器環(huán)境。目前全部插件的打包壓縮JS只有100K左右,很輕巧。使用插件式的開發(fā)模式，以“簡單”為原則的設(shè)計，每個插件盡量獨立，并可依賴拓展。

ligerUI是什么

jQuery LigerUI控件豐富，包括基礎(chǔ)、導(dǎo)航、布局、表單、表格、樹形、窗口等

基礎(chǔ)：Resizable、Drag、Tip

導(dǎo)航：Menu、MenuBar、ToolBar

布局：Layout、Tab

表單：Form、TextBox、Button、CheckBox、ComboBox、DateEditor、Radio、Spinner

表格：Grid

樹形：Tree

窗口：Dialog、MessageBox、Window

如何使用

jQuery LigerUI是基于jQuery而設(shè)計的一系列插件集合。基本上每個插件都是相對獨立的。但是彼此之間又緊密地關(guān)聯(lián)著，合理地對插件進行組裝，實現(xiàn)出現(xiàn)各種復(fù)雜的功能。 使用UI可以幫助你快速地創(chuàng)建友好的用戶界面。

***個例子

<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文本框?qū)ο筠D(zhuǎn)換成ligerui文本框?qū)ο?并返回ligerui對象  var g = $("#txt1").ligerTextBox(              {                  //如果沒有輸入時,會提示不能為空                  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è)置事件              */              //這里給文本框綁定一個改變值的事件  //也可以設(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對象

我們應(yīng)用完插件以后，是返回一個ligerui對象的，可以把這個對象保存在一個全局的變量里面。在后續(xù)的操作中可能會用到。如果因為變量作用域的限制等，沒有及時保存起來。我們可以用其他方式獲取。見如下：

保存到一個全局的javascript變量：

var g;  $(function ()  {   g = $("#txt1").ligerTextBox();  );

使用$.fn.ligerGetTextBoxManager

var g = $("#txt1").ligerGetTextBoxManager ();

使用$.ligerui.get方法

var g =  $.ligerui.get('txt1');

◆ 第三個方式的是使用ligerui對象的id直接獲取的，在傳入?yún)?shù)沒有指定id的情況下，對象的id將會使用html元素的id，如果html元素沒有id，將會自動生成一個。所以在這里我們可以用html文本框的id來獲取。

◆ 如果沒有指定html元素的id，可以用***種方式或者第二種方式。

◆ 其實第二種方式可以用***種方式來替代，實則上ligerText是可以重復(fù)調(diào)用的，不同的是第二次以后調(diào)用都是直接放回ligerui對象。當(dāng)我們不確定html元素是否已經(jīng)應(yīng)用了插件的情況下可以使用第二種方式。

◆ 其他插件的命名跟TextBox類同

事件處理

事件處理有兩種方式。一種是以參數(shù)的形式傳入，一種是調(diào)用ligerui對象的bind方法。

//方式一            var g = $("#txt1").ligerTextBox(            {                onChangeValue : function(value){alert(value);}            });            //方式二                  g.bind('changeValue', function (value)            {                alert(value);            });

◆ 使用bind方法是沒有帶”on”的。

◆ 事件監(jiān)聽是可以多次綁定的。

◆ 對于某些事件，如果函數(shù)的返回值是false，那么后面還沒有觸發(fā)的函數(shù)將不會再執(zhí)行

◆ 第二種方式(bind)，是V1.1.3使用core機制以后引入的。

方法調(diào)用

使用ligerui的接口很方便。只需要調(diào)用ligerui對象的方法即可。

//這里設(shè)置文本框不能編輯  g.setDisabled();  //這里設(shè)置文本框可以編輯  g.setEnabled();

也可以使用這種方式

$(“#grid”).ligerGrid(&lsquo;setEnabled&rsquo;);

◆ 至于這個對象有哪些方法，可以查看API

◆ 對象的方法是可以擴展的，后面會有一篇ligerui擴展的章節(jié)來介紹

◆ 第二種方式是在V1.1.4加入的

獲取參數(shù)值

每一個ligerui對象都會有g(shù)et方法?？梢垣@取參數(shù)值

var url = g.get(&lsquo;url&rsquo;);

或者是：

var url = $(“#grid”).ligerGrid(&lsquo;option&rsquo;,&rsquo;url&rsquo;);

動態(tài)設(shè)置參數(shù)

每一個ligerui對象都會有set方法。用于動態(tài)得設(shè)置參數(shù)。比如改變Grid的url，那么可以這樣寫：

g.set(&lsquo;url&rsquo;,url);

或者是：

g.set({url:url});

也可以用插件的方式：

$(“#grid”).ligerGrid(&lsquo;option&rsquo;,&rsquo;url&rsquo;,url);

◆ 第二種方式是允許同時傳入多個參數(shù)的。

◆ Set方法是所有插件的統(tǒng)一設(shè)置屬性的接口

◆ Set方法是V1.1.3使用core機制以后引入的。

◆ 插件傳參的方式是V1.1.4引入的

如何擴展

Ligerui的默認(rèn)參數(shù)、方法都是可以擴展的，這里我們定義了兩個入口: $.ligerDefaults和$.ligerMethods。

比如要改變或者擴展Grid的默認(rèn)參數(shù)，可以改變$.ligerDefaults.Grid

默認(rèn)參數(shù)擴展

只需要擴展對象：$.ligerDefaults.{Plugin}

比如要改變表格默認(rèn)的頭部標(biāo)題：

if($.ligerDefaults.Grid)  {      $.ligerDefaults.Grid.title = "我的表格";  }

本地化支持?jǐn)U展

只需要擴展對象：$.ligerDefaults.{Plugin}String

比如把表格“加載時”翻譯成英文：

if($.ligerDefaults.GridString)  {      $.ligerDefaults.GridString.loadingMessage = "loading...";  }

方法擴展

只需要擴展對象：$. 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();  }

“jQuery LigerUI的使用教程”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

分享文章：jQueryLigerUI的使用教程
標(biāo)題鏈接：http://muchs.cn/article4/gecsie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、網(wǎng)站策劃、建站公司、ChatGPT、靜態(tài)網(wǎng)站、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)