jquery ligerui php,杨鹏的个人博客

获取ligerUI最新代码

简介

LigerUI 是基于jQuery 的UI框架，其核心设计目标是快速开发、使用简单、功能强大、轻量级、易扩展。简单而又强大，致力于快速打造Web前端界面解决方案，可以应用于.net,jsp,php等等web服务器环境。

ligerUI是什么

jQuery LigerUI控件丰富，包括基础、导航、布局、表单、表格、树形、窗口等基础：Resizable、Drag、Tip

导航：Menu、MenuBar、ToolBar

布局：Layout、Tab

表单：Form、TextBox、Button、CheckBox、ComboBox、DateEditor、Radio、Spinner

表格：Grid

树形：Tree

窗口：Dialog、MessageBox、Window

ligerUI特点

LigerUI有如下主要特点：使用简单，轻量级

控件实用性强，功能覆盖面大，可以解决大部分企业信息应用的设计场景

快速开发，使用LigerUI可以比传统开发减少极大的代码量

易扩展，包括默认参数、表单/表格编辑器、多语言支持等等

支持Java、.NET、PHP等web服务端

支持 IE6+、Chrome、FireFox等浏览器

开源，源码框架层次简单易懂。

如何使用ligerUI

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);

});

});

上面是TextBox的使用范例，其他的插件使用方式类似。

如何使用ligerUI对象

我们应用完插件以后，是返回一个ligerui对象的，可以把这个对象保存在一个全局的变量里面。在后续的操作中可能会用到。如果因为变量作用域的限制等，没有及时保存起来。我们可以用其他方式获取。见如下：

保存到一个全局的javascript变量：var g;

$(function (){

g = $("#txt1").

ligerTextBox();

);

使用$.fn.ligerGetTextBoxManagerg = $("#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

Ligerui的默认参数、方法都是可以扩展的，这里我们定义了两个入口: $.ligerDefaults和$.ligerMethods。

比如要改变或者扩展Grid的默认参数，可以改变$.ligerDefaults.Grid

默认参数扩展

只需要扩展对象：$.ligerDefaults.{Plugin}

比如要改变表格默认的头部标题：

($.ligerDefaults.Grid){

$.ligerDefaults.Grid.title = "我的表格";

}

本地化支持扩展

只需要扩展对象：$.ligerDefaults.{Plugin}String

比如把表格“加载时”翻译成英文：

($.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();

}