C语言学习网

jQuery LigerUI的使用教程

发表于:2022-08-20 作者:安全数据网编辑
编辑最后更新 2022年08月20日,本篇内容介绍了"jQuery LigerUI的使用教程"的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

本篇内容介绍了"jQuery LigerUI的使用教程"的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

简介

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可以帮助你快速地创建友好的用户界面。

***个例子

                                            

更多的参数和方法的设置可以查看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的使用教程"的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站,小编将为大家输出更多高质量的实用文章!

0