jQuery LigerUI 使用教程入门篇


Posted in Javascript onJanuary 18, 2012

获取最新代码
可以到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

回到顶部
如何使用
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(); 
}
Javascript 相关文章推荐
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
jquery实现上下左右滑动的方法
Feb 09 Javascript
js运动应用实例解析
Dec 28 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
js断点调试经验分享
Dec 08 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
c#和Javascript操作同一json对象的实现代码
Jan 17 #Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 #Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 #Javascript
javascript椭圆旋转相册实现代码
Jan 16 #Javascript
Prototype源码浅析 Number部分
Jan 16 #Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 #Javascript
Prototype源码浅析 String部分(二)
Jan 16 #Javascript
You might like
检查php文件中是否含有bom的函数
2012/05/31 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
DOM事件探秘篇
2017/02/15 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
phpquery中文手册
2021/03/18 PHP
环保标语大全
2014/06/12 职场文书
超市理货员岗位职责
2014/07/04 职场文书
七夕活动策划方案
2014/08/16 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
python用字节处理文件实例讲解
2021/04/13 Python
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js