阅读目录
- 获取最新代码
- 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可以帮助你快速地创建友好的用户界面。
第一个例子
<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();
}
相关推荐
jQuery ligerUI是一款基于jQuery的前端开发框架，它提供了一系列丰富的UI组件，使得开发者能够快速构建具有专业界面的Web应用程序。在"jQuery ligerUI Demos 导航页、菜单栏"这个主题中，我们将深入探讨ligerUI如何...
**jQuery LigerUI 中文 API 知识点详解** jQuery LigerUI 是一款基于 jQuery 的前端组件库，它提供了一套完整的用户界面解决方案，适用于快速构建功能丰富的 Web 应用程序。LigerUI 包含了大量的组件，如表格、表单...
**jQuery LigerUI建筑工程管理系统详解** jQuery LigerUI是一个基于jQuery的前端开发框架，它提供了丰富的用户界面组件，包括表格、表单、对话框、菜单等，极大地简化了Web应用程序的开发过程。在这个"建筑工程管理...
《jQuery ligerUI 帮助文档》是一个专注于jQuery库扩展的详细指南，它为开发者提供了丰富的组件和功能，使得JavaScript编程更为便捷。ligerUI是基于jQuery的一个强大的用户界面库，它集成了多种控件，如表格、下拉框...
jQuery LigerUI是一款基于jQuery的前端UI库，其版本V1.3.2包含了丰富的组件和功能，旨在帮助开发者快速构建具有专业外观和交互效果的Web应用。LigerUI提供了大量的预定义样式和可定制选项，使得用户界面的开发变得...
《jQuery ligerUI API：构建高效前端界面的利器》 jQuery ligerUI API，作为一款源自中国的优秀前端UI框架，为开发者提供了丰富的组件和便捷的API接口，旨在帮助开发人员快速构建美观、高效的Web应用程序。这个框架...
**jQuery LigerUI：一个轻量级的前端框架** jQuery LigerUI是一个基于jQuery的轻量级前端开发框架，主要用于构建具有美观界面和交互效果的Web应用。它提供了丰富的组件和插件，使得开发者能够快速地创建出具有专业...
**jQuery LigerUI** 是一个基于 jQuery 库的前端用户界面框架，专为构建美观、交互性强的Web应用而设计。LigerUI 提供了一系列组件，涵盖了数据输入、表格展示、对话框、下拉菜单、按钮、弹出窗口等常见功能，大大...
jQuery LigerUI是一款基于jQuery的前端UI库，它为开发者提供了丰富的组件和界面元素，用于构建功能强大且用户友好的Web应用。LigerUI V1.3.3是该库的一个版本，它在前一版本的基础上进行了一系列的优化和改进，以...
jQuery LigerUI是一款基于jQuery的前端UI库，版本V1.2.3是其一个重要的迭代，主要目标是提供一套完整的解决方案，帮助开发者快速构建功能丰富的WEB后台界面。这个库包含了一系列精心设计的组件，使得网页界面的开发...
jQuery LigerUI V1.3.2是一款基于jQuery的前端用户界面库，旨在提供一系列丰富的UI组件，以帮助开发者快速构建具有专业外观和交互效果的Web应用。LigerUI是轻量级且易于使用的，它将jQuery的强大功能与美观的界面...
**jQuery Liger UI框架概述** jQuery Liger UI是一款基于jQuery的前端UI框架，它提供了丰富的组件和工具，帮助开发者快速构建美观、交互性强的Web应用。Liger UI的设计理念是简洁、易用，使得开发者无需深入理解...
《jQuery LigerUI详解》 jQuery LigerUI是一款基于jQuery的前端UI库，它为开发者提供了丰富的组件和功能，使得构建交互式Web应用变得更加便捷。LigerUI的设计理念是轻量级、高效能，旨在提高开发效率，同时保持良好...
jQuery LigerUI V1.3.3是一款基于jQuery的前端用户界面库，它为开发者提供了丰富的组件和功能，便于快速构建交互式、响应式的Web应用。这个版本是V1.3.3，意味着它可能包含了之前的版本修复的错误、新增的功能和性能...
《jQuery LigerUI V1.01：一个强大的前端UI框架》 jQuery LigerUI，作为一款基于jQuery的前端用户界面库，旨在为开发者提供一套高效、易用且功能丰富的UI组件，帮助他们快速构建出美观且交互性强的Web应用程序。在...
jQuery LigerUI 是基于jQuery的一系列UI控件组合，简单而又强大，致力于快速打造Web前端界面解决方案。 因为是前端控件，跟服务器无关，可以适合.net,jsp,php等等web服务器环境。目前全部插件的打包压缩JS只有100K...
《jQuery ligerUI API》是前端开发者们常用的一款基于jQuery的UI库，它提供了一系列丰富的组件和API，帮助开发者快速构建美观、交互性强的Web应用。ligerUI的设计理念是简洁、高效，使得开发者能够轻松地实现各种...
**jQuery Liger UI** 是一个基于 jQuery 的前端用户界面库，它提供了丰富的组件和功能，帮助开发者快速构建具有专业外观的Web应用。Liger UI 的官方实例完整版包含了大量的示例代码，帮助开发者深入理解和使用这个...
**jQuery ligerUI** 是一个基于 jQuery 的前端用户界面库，它提供了丰富的组件和功能，帮助开发者快速构建具有专业外观的Web应用。这个名为“jQuery ligerUI demo”的项目是展示如何利用 ligerUI 与 **Java 后台** ...