转载

《jQuery 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();
}

转载请注明：作者：稻米，LigerUI官网：http://www.ligerui.com/，ajava论坛LigerUI区：http://ajava.org/forum-65-1.html

正文到此结束

所属分类：软件架构编程技术

本文标签：
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

《jQuery LigerUI 使用教程》入门篇

获取最新代码

简介

ligerUI是什么

如何使用

第一个例子

如何使用ligerUI对象

事件处理

方法调用

获取参数值

动态设置参数

如何扩展

默认参数扩展

本地化支持扩展

方法扩展

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流