欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery LigerUI 使用教程入门篇

程序员文章站 2023-11-14 11:28:04
jquery ligerui 是基于jquery的一系列ui控件组合,简单而又强大,致力于快速打造web前端界面解决方案。 因为是前端控件,跟服务器无关,可以适合.net,,php等等web服务器环...

jquery ligerui 是基于jquery的一系列ui控件组合,简单而又强大,致力于快速打造web前端界面解决方案。 因为是前端控件,跟服务器无关,可以适合.net,,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="https://www.cnblogs.com/lib/ligerui/skins/aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<script src="https://www.cnblogs.com/lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="https://www.cnblogs.com/lib/ligerui/js/core/base.js" type="text/javascript"></script>
<script src="https://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:https://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();
}