jQuery LigerUI 使用教程入門篇
更新時間:2012年01月18日 00:23:36 作者:
jQuery LigerUI 是基于jQuery的一系列UI控件組合,簡單而又強(qiáng)大,致力于快速打造Web前端界面解決方案。 因?yàn)槭乔岸丝丶?wù)器無關(guān),可以適合.net,jsp,php等等web服務(wù)器環(huán)境
獲取最新代碼
可以到http://ligerui.googlecode.com下載最新代碼。
簡介
jQuery LigerUI 是基于jQuery的一系列UI控件組合,簡單而又強(qiáng)大,致力于快速打造Web前端界面解決方案。 因?yàn)槭乔岸丝丶?,跟服?wù)器無關(guān),可以適合.net,jsp,php等等web服務(wù)器環(huán)境。目前全部插件的打包壓縮JS只有100K左右,很輕巧。使用插件式的開發(fā)模式,以“簡單”為原則的設(shè)計,每個插件盡量獨(dú)立,并可依賴拓展。
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è)計的一系列插件集合?;旧厦總€插件都是相對獨(dú)立的。但是彼此之間又緊密地關(guān)聯(lián)著,合理地對插件進(jìn)行組裝,實(shí)現(xiàn)出現(xiàn)各種復(fù)雜的功能。 使用UI可以幫助你快速地創(chuàng)建友好的用戶界面。
第一個例子
<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文本框?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ù)的操作中可能會用到。如果因?yàn)樽兞孔饔糜虻南拗频龋瑳]有及時保存起來。我們可以用其他方式獲取。見如下:
保存到一個全局的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,可以用第一種方式或者第二種方式。
其實(shí)第二種方式可以用第一種方式來替代,實(shí)則上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機(jī)制以后引入的。
方法調(diào)用
使用ligerui的接口很方便。只需要調(diào)用ligerui對象的方法即可。
//這里設(shè)置文本框不能編輯
g.setDisabled();
//這里設(shè)置文本框可以編輯
g.setEnabled();
也可以使用這種方式
$(“#grid”).ligerGrid(‘setEnabled');
至于這個對象有哪些方法,可以查看API
對象的方法是可以擴(kuò)展的,后面會有一篇ligerui擴(kuò)展的章節(jié)來介紹
第二種方式是在V1.1.4加入的
獲取參數(shù)值
每一個ligerui對象都會有g(shù)et方法??梢垣@取參數(shù)值
var url = g.get(‘url');
或者是:
var url = $(“#grid”).ligerGrid(‘option','url');
動態(tài)設(shè)置參數(shù)
每一個ligerui對象都會有set方法。用于動態(tài)得設(shè)置參數(shù)。比如改變Grid的url,那么可以這樣寫:
g.set(‘url',url);
或者是:
g.set({url:url});
也可以用插件的方式:
$(“#grid”).ligerGrid(‘option','url',url);
第二種方式是允許同時傳入多個參數(shù)的。
Set方法是所有插件的統(tǒng)一設(shè)置屬性的接口
Set方法是V1.1.3使用core機(jī)制以后引入的。
插件傳參的方式是V1.1.4引入的
回到頂部
如何擴(kuò)展
Ligerui的默認(rèn)參數(shù)、方法都是可以擴(kuò)展的,這里我們定義了兩個入口: $.ligerDefaults和$.ligerMethods。
比如要改變或者擴(kuò)展Grid的默認(rèn)參數(shù),可以改變$.ligerDefaults.Grid
默認(rèn)參數(shù)擴(kuò)展
只需要擴(kuò)展對象:$.ligerDefaults.{Plugin}
比如要改變表格默認(rèn)的頭部標(biāo)題:
if($.ligerDefaults.Grid)
{
$.ligerDefaults.Grid.title = "我的表格";
}
本地化支持?jǐn)U展
只需要擴(kuò)展對象:$.ligerDefaults.{Plugin}String
比如把表格“加載時”翻譯成英文:
if($.ligerDefaults.GridString)
{
$.ligerDefaults.GridString.loadingMessage = "loading...";
}
方法擴(kuò)展
只需要擴(kuò)展對象:$. ligerMethos.{Plugin}
這里給Grid ligerui對象增加一個alert方法:
$.extend($.ligerMethods.Grid,
{
alert : function ()
{
//要注意到一點(diǎn),這里的this就是ligerui對象
var rowdata = this.getSelectedRow();
if (!rowdata)
alert('空');
else
alert(rowdata.CustomerID);
}
}
);
function show()
{
//后面就可以這樣使用
Var g = $(“#maingrid”).ligerGrid();
g.alert();
}
可以到http://ligerui.googlecode.com下載最新代碼。
簡介
jQuery LigerUI 是基于jQuery的一系列UI控件組合,簡單而又強(qiáng)大,致力于快速打造Web前端界面解決方案。 因?yàn)槭乔岸丝丶?,跟服?wù)器無關(guān),可以適合.net,jsp,php等等web服務(wù)器環(huán)境。目前全部插件的打包壓縮JS只有100K左右,很輕巧。使用插件式的開發(fā)模式,以“簡單”為原則的設(shè)計,每個插件盡量獨(dú)立,并可依賴拓展。
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è)計的一系列插件集合?;旧厦總€插件都是相對獨(dú)立的。但是彼此之間又緊密地關(guān)聯(lián)著,合理地對插件進(jìn)行組裝,實(shí)現(xiàn)出現(xiàn)各種復(fù)雜的功能。 使用UI可以幫助你快速地創(chuàng)建友好的用戶界面。
第一個例子
復(fù)制代碼 代碼如下:
<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文本框?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ù)的操作中可能會用到。如果因?yàn)樽兞孔饔糜虻南拗频龋瑳]有及時保存起來。我們可以用其他方式獲取。見如下:
保存到一個全局的javascript變量:
復(fù)制代碼 代碼如下:
var g;
$(function ()
{
g = $("#txt1").ligerTextBox();
);
使用$.fn.ligerGetTextBoxManager
復(fù)制代碼 代碼如下:
var g = $("#txt1").ligerGetTextBoxManager ();
使用$.ligerui.get方法
復(fù)制代碼 代碼如下:
var g = $.ligerui.get('txt1');
第三個方式的是使用ligerui對象的id直接獲取的,在傳入?yún)?shù)沒有指定id的情況下,對象的id將會使用html元素的id,如果html元素沒有id,將會自動生成一個。所以在這里我們可以用html文本框的id來獲取。
如果沒有指定html元素的id,可以用第一種方式或者第二種方式。
其實(shí)第二種方式可以用第一種方式來替代,實(shí)則上ligerText是可以重復(fù)調(diào)用的,不同的是第二次以后調(diào)用都是直接放回ligerui對象。當(dāng)我們不確定html元素是否已經(jīng)應(yīng)用了插件的情況下可以使用第二種方式。
其他插件的命名跟TextBox類同
事件處理
事件處理有兩種方式。一種是以參數(shù)的形式傳入,一種是調(diào)用ligerui對象的bind方法。
復(fù)制代碼 代碼如下:
//方式一
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機(jī)制以后引入的。
方法調(diào)用
使用ligerui的接口很方便。只需要調(diào)用ligerui對象的方法即可。
復(fù)制代碼 代碼如下:
//這里設(shè)置文本框不能編輯
g.setDisabled();
//這里設(shè)置文本框可以編輯
g.setEnabled();
也可以使用這種方式
復(fù)制代碼 代碼如下:
$(“#grid”).ligerGrid(‘setEnabled');
至于這個對象有哪些方法,可以查看API
對象的方法是可以擴(kuò)展的,后面會有一篇ligerui擴(kuò)展的章節(jié)來介紹
第二種方式是在V1.1.4加入的
獲取參數(shù)值
每一個ligerui對象都會有g(shù)et方法??梢垣@取參數(shù)值
復(fù)制代碼 代碼如下:
var url = g.get(‘url');
或者是:
復(fù)制代碼 代碼如下:
var url = $(“#grid”).ligerGrid(‘option','url');
動態(tài)設(shè)置參數(shù)
每一個ligerui對象都會有set方法。用于動態(tài)得設(shè)置參數(shù)。比如改變Grid的url,那么可以這樣寫:
復(fù)制代碼 代碼如下:
g.set(‘url',url);
或者是:
復(fù)制代碼 代碼如下:
g.set({url:url});
也可以用插件的方式:
復(fù)制代碼 代碼如下:
$(“#grid”).ligerGrid(‘option','url',url);
第二種方式是允許同時傳入多個參數(shù)的。
Set方法是所有插件的統(tǒng)一設(shè)置屬性的接口
Set方法是V1.1.3使用core機(jī)制以后引入的。
插件傳參的方式是V1.1.4引入的
回到頂部
如何擴(kuò)展
Ligerui的默認(rèn)參數(shù)、方法都是可以擴(kuò)展的,這里我們定義了兩個入口: $.ligerDefaults和$.ligerMethods。
比如要改變或者擴(kuò)展Grid的默認(rèn)參數(shù),可以改變$.ligerDefaults.Grid
默認(rèn)參數(shù)擴(kuò)展
只需要擴(kuò)展對象:$.ligerDefaults.{Plugin}
比如要改變表格默認(rèn)的頭部標(biāo)題:
復(fù)制代碼 代碼如下:
if($.ligerDefaults.Grid)
{
$.ligerDefaults.Grid.title = "我的表格";
}
本地化支持?jǐn)U展
只需要擴(kuò)展對象:$.ligerDefaults.{Plugin}String
比如把表格“加載時”翻譯成英文:
復(fù)制代碼 代碼如下:
if($.ligerDefaults.GridString)
{
$.ligerDefaults.GridString.loadingMessage = "loading...";
}
方法擴(kuò)展
只需要擴(kuò)展對象:$. ligerMethos.{Plugin}
這里給Grid ligerui對象增加一個alert方法:
復(fù)制代碼 代碼如下:
$.extend($.ligerMethods.Grid,
{
alert : function ()
{
//要注意到一點(diǎn),這里的this就是ligerui對象
var rowdata = this.getSelectedRow();
if (!rowdata)
alert('空');
else
alert(rowdata.CustomerID);
}
}
);
function show()
{
//后面就可以這樣使用
Var g = $(“#maingrid”).ligerGrid();
g.alert();
}
您可能感興趣的文章:
- EasyUi tabs的高度與寬度根據(jù)IE窗口的變化自適應(yīng)代碼
- Javascript 自適應(yīng)高度的Tab選項(xiàng)卡
- jQuery LigerUI 插件介紹及使用之ligerDrag和ligerResizable示例代碼打包
- jQuery LigerUI 使用教程表格篇(1)
- Jquery顯示和隱藏元素或設(shè)為只讀(含Ligerui的控件禁用,實(shí)例說明介紹)
- 淺析LigerUi開發(fā)中謹(jǐn)慎載入common.css文件
- Jquery中LigerUi的彈出編輯框(實(shí)現(xiàn)方法)
- 解析Jquery的LigerUI如何實(shí)現(xiàn)文件上傳
- js style動態(tài)設(shè)置table高度
- 如何解決ligerUI布局時Center中的Tab高度大小
相關(guān)文章
jquery+css3實(shí)現(xiàn)會動的小圓圈效果
這篇文章主要介紹了jquery+css3實(shí)現(xiàn)會動的小圓圈效果,涉及jquery基于時間函數(shù)動態(tài)操作頁面元素css3樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01jquery實(shí)現(xiàn)對聯(lián)廣告的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)對聯(lián)廣告的方法,以一個完整實(shí)例形式詳細(xì)分析了jQuery對聯(lián)廣告的樣式與功能實(shí)現(xiàn)方法,是非常實(shí)用的技巧,需要的朋友可以參考下2015-02-02jQuery模擬物體自由落體運(yùn)動(附演示與demo源碼下載)
這篇文章主要介紹了jQuery模擬物體自由落體運(yùn)動的方法,并附帶了效果演示與demo源碼下載,可真是模擬出球體自由落體運(yùn)動及動能損耗的運(yùn)動過程,需要的朋友可以參考下2016-01-01為Jquery EasyUI 組件加上清除功能的方法(詳解)
下面小編就為大家?guī)硪黄獮镴query EasyUI 組件加上清除功能的方法(詳解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04jQuery zTree樹插件動態(tài)加載實(shí)例代碼
這篇文章主要介紹了jQuery zTree樹插件動態(tài)加載效果的實(shí)例代碼,需要的朋友可以參考下2017-05-05