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 相关文章推荐
javascript实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
javascript 密码强弱度检测万能插件
Feb 25 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
浅谈js中的bind
Mar 18 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 Javascript
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+mysql分页代码详解
2008/03/27 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
xtree.js 代码
2007/03/13 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
python 图片验证码代码
2008/12/07 Python
Python实现计算最小编辑距离
2016/03/17 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
即兴演讲稿
2014/01/04 职场文书
大学生表扬信范文
2014/01/09 职场文书
网上签名寄语活动留言
2014/01/18 职场文书
大专生自我评价
2014/01/28 职场文书
安全检查管理制度
2014/02/02 职场文书
安全责任书范本
2014/04/15 职场文书
团干部培训方案
2014/06/03 职场文书
小学重阳节活动总结
2015/03/24 职场文书
2015年维修工作总结
2015/04/25 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
python图片灰度化处理的几种方法
2021/06/23 Python
Python多个MP4合成视频的实现方法
2021/07/16 Python
AngularJS实现多级下拉框
2022/03/25 Javascript
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis