java ligerui_[Java教程]jQuery LigerUI 使用教程入门篇_星空网
jQuery LigerUI 使用教程入门篇
2012-01-17
0
阅读目录获取最新代码
ligerUI是什么
如何使用
如何扩展
获取最新代码
可以到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可以帮助你快速地创建友好的用户界面。
第一个例子
$(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); }); });
更多的参数和方法的设置可以查看API:http://www.ligerui.com/api/
上面是TextBox的使用范例,其他的插件使用方式类似。
如何使用ligerUI对象
我们应用完插件以后,是返回一个ligerui对象的,可以把这个对象保存在一个全局的变量里面。在后续的操作中可能会用到。如果因为变量作用域的限制等,没有及时保存起来。我们可以用其他方式获取。见如下:
保存到一个全局的javascript变量:var g;
$(function ()
{
g = $("#txt1").ligerTextBox();
);
使用$.fn.ligerGetTextBoxManagervar 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();
}
0
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:admin@shaoqun.com。
java ligerui_[Java教程]jQuery LigerUI 使用教程入门篇_星空网相关推荐
- Java对图片懒加载_[Java教程]JQuery实现图片懒加载_星空网
JQuery实现图片懒加载 2018-08-16 0 懒加载的原因: 对于图片过多的场景,为了提高页面的加载速度,降低服务器的负载,增强用户体验,我们对还没出现在视野的图片先不加载,当元素出现在我们视 ...
- 关于星空的java小程序_[Java教程]小程序使用Canvas画饼图_星空网
小程序使用Canvas画饼图 2018-10-24 0 先上效果图 -------------------------------------------------------------w --- ...
- java超时自动关闭_[Java教程]web页面超时自动退出方法_星空网
web页面超时自动退出方法 2017-05-18 0 思路: 使用 mousemover 事件来监测是否有用户操作页面,写一个定时器间隔特定时间检测是否长时间未操作页面,如果是,退出: 具体时间代码如 ...
- jQuery LigerUI 使用教程入门篇
jQuery LigerUI 使用教程入门篇 阅读目录 获取最新代码 ligerUI是什么 如何使用 如何扩展 获取最新代码 可以到http://ligerui.googlecode.com下载最新代 ...
- jQuery LigerUI使用教程入门篇
获取最新代码 可以到http://ligerui.googlecode.com下载最新代码. 简介 jQuery LigerUI 是基于jQuery的一系列UI控件组合,简单而又强大,致力于快速打造W ...
- AJAX框架简笔画图片教程,jquery 框架使用教程 AJAX篇
jquery 框架使用教程 AJAX篇 更新时间:2009年10月11日 14:47:26 作者: 正好项目中准备使用thickbox,于是干脆抛弃prototype.js,看起jquery.js ...
- java 表头固定_[Java教程]web开发:表头固定(利用jquery实现)_星空网
web开发:表头固定(利用jquery实现) 2012-11-08 0 表头固定应该是一个用得比较多的功能,参考了网上几个例子,在几个常用浏览器下显示不是很完美.而且很多都是基于固定的表格,在编码时多 ...
- jQuery LigerUI 使用教程表格篇(1)
阅读目录 第一个例子 数据结构 两种绑定数据的方式 配置column 自定义表头 自定义单元格 排序与分页 事件与方法 第一个例子 简介 ligerGrid是ligerui系列插件的核心控件,用户可以 ...
- java privatekey输出字符串_[Java教程]根据字符串(String)生成公钥(PublicKey)和私钥(PrivateKey)对象_星空网...
根据字符串(String)生成公钥(PublicKey)和私钥(PrivateKey)对象 2012-05-29 0 1.字符串生成公钥对象 PublicKey /** * 实例化公钥 * * @re ...
最新文章
- 条形码?二维码?生成、解析都在这里!
- 2万人同时访问 nodejs_Nodejs 与 Python 的使用对比
- java 自定义tostring_自定义java toString方法
- python【力扣LeetCode算法题库】1162- 地图分析(BFS)
- MVC %%与%=%与区别
- 2021天津高考成绩查询时间26号几点,2021年天津高考成绩查询时间安排 什么时候出分...
- python自动补全库_这个库厉害了,自动补全Python代码,节省50%敲码时间
- 解决Hbase输入list,创建表报错,输入status可以,org.apache.hadoop.hbase.ipc.ServerNotRunningYetException: S
- ERROR:进行解析时遇到错误,找不到资源“$(string.VerMgmtAuditModeEnable)”
- Win11 BitLocker驱动器加密怎么使用
- 10截图时屏幕变大_刚刚才知道!华为手机还有7种截图方式,其中1种居然能隔空截图...
- 泛型方法,java map按照value值来比较大小并且返回最终结果
- IntelliJ IDEA搭建Hadoop开发环境(上)
- UE的HoudiniEngine插件版本的匹配问题
- 数据集的划分--训练集、验证集和测试集
- Ubuntu修改IP地址不生效解决办法
- 微信支付商户平台,企业付款,企业向个人付款接口总结
- Splunk CIM
- 计算机总是莫名其妙重启,电脑老是自动重启怎么办,电脑为什么经常自动重启_系统圣地...
- PG-Strom源码分析