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

赞 (0)

相关推荐

  • 解析Jquery的LigerUI如何实现文件上传

    一.在Head中加入    <script src="../lib/js/ajaxfileupload.js" type="text/javascript"></script>    <script src="../lib/js/ligerui.expand.js" type="text/javascript"></script> 二.Html中的Div代码 复制代码 代码如下:

  • 如何解决ligerUI布局时Center中的Tab高度大小

    如何解决ligerUI布局时Center中的Tab高度大小

    1.0 引用的js,css <link href="/Content/scripts/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" /> <link href="/Content/scripts/ligerUI/skins/ligerui-icons.css" rel="stylesheet" /> <script src=&qu

  • jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包

    jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包

    ligerDrag() 使目标对象可以拖动. 参数 handler 拖动的作用区域,在这个区域才可以触发拖动.可以是字符串(jQuery selector),也可以是一个Dom jQuery对象 onStartDrag 开始拖动事件 onDrag 拖动事件 onStopDrag 结束拖动事件 示例一:默认模式 复制代码 代码如下: <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript&quo

  • 浅析LigerUi开发中谨慎载入common.css文件

    <%--<link href="../lib/css/common.css" rel="stylesheet" type="text/css" />  --%>这一句是载页面载入时,显示正在载入动画效果,但是极大影响了程序开发里的调试,太菜鸟了,光在这上面花了太多的时间,要命,希望新手们注意!

  • EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码

    tabs代码如下: 复制代码 代码如下: <div id="tabs" class="easyui-tabs"> <div title="tabs1"> tabs1 </div> <div title="tabs2"> tabs2 </div> </div> 如果id="tabs"的div未设置宽度和高度,easyUI默认的宽度和高度是

  • js style动态设置table高度

    直接在table标签中设置下不就行了吗?这是静态的,如果要动态设置你会吗? function com_onresize(){ var contentsHeight = document.body.clientHeight; var buttonsHeight = document.getElementById( "buttons" ).offsetHeight; var head1Height = document.getElementById( "head1" )

  • Jquery中LigerUi的弹出编辑框(实现方法)

    一.载入 复制代码 代码如下: <link href="../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />    <script src="../lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></scr

  • jQuery LigerUI 使用教程表格篇(1)

    jQuery LigerUI 使用教程表格篇(1)

    第一个例子 简介 ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序.分页.多表头.固定列等等. 支持本地数据和服务器数据(配置data或者url) 支持排序和分页(包括Javascript排序和分页) 支持列的"显示/隐藏" 支持多表头 支持固定列 支持明细行 支持汇总行 支持单元格模板 支持编辑表格(三种编辑模式,单元格编辑.行编辑.明细编辑) 支持树表格 支持分组 代码 首先引入基本的css和js文件 复制代码 代码如下

  • Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)

    一.隐藏和显示元素 复制代码 代码如下: $('#button_save_12').css('display', 'none');  // 隐藏按钮$('#button_save_12').css('display', 'display');  // 显示按钮 // 或者采取 复制代码 代码如下: $('#button_save_12').hide();$('#button_save_12').show(); 二.设为禁用,只读 复制代码 代码如下: $('#button_save_12').a

  • Javascript 自适应高度的Tab选项卡

    JS部分具体的代码如下: 复制代码 代码如下: var getSiblingNode=function(className,elAr,el,not){ className=" "+className+" "; var Arr=[]; for(var i=0,l=elAr.length;i<l;i++){ if(elAr[i]!=el&&(elAr[i].nodeType===1)&&(" "+elAr[i].

随机推荐