jQuery LigerUI使用教程入門篇

作者：謝略 2012-01-17 10:47:07

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

獲取***代碼

可以到http://ligerui.googlecode.com下載***代碼。

簡介

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/

上面是TextBox的使用范例，其他的插件使用方式類似。

如何使用ligerUI對象

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

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

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

使用$.fn.ligerGetTextBoxManager

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

使用$.ligerui.get方法

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

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

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

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

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

事件處理

事件處理有兩種方式。一種是以參數的形式傳入，一種是調用ligerui對象的bind方法。

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

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

◆ 事件監聽是可以多次綁定的。

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

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

方法調用

使用ligerui的接口很方便。只需要調用ligerui對象的方法即可。

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

也可以使用這種方式

$(“#grid”).ligerGrid(‘setEnabled’);

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

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

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

獲取參數值

每一個ligerui對象都會有get方法。可以獲取參數值

var url = g.get(‘url’);

或者是：

var url = $(“#grid”).ligerGrid(‘option’,’url’);

動態設置參數

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

g.set(‘url’,url);

或者是：

g.set({url:url});

也可以用插件的方式：

$(“#grid”).ligerGrid(‘option’,’url’,url);

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

◆ Set方法是所有插件的統一設置屬性的接口

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

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

如何擴展

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

比如要改變或者擴展Grid的默認參數，可以改變$.ligerDefaults.Grid

默認參數擴展

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

比如要改變表格默認的頭部標題：

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

本地化支持擴展

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

原文：http://www.cnblogs.com/leoxie2011/archive/2012/01/16/2324106.html

【編輯推薦】

JavaScript面向對象編程
jQuery LigerUI V1.1.5發布(包括API和全部源碼)
利用jQuery marquee實現響應設計
jQuery基本原理
JavaScript中的陷阱大集合

責任編輯：陳貽新來源：謝略的博客

jQuery