jQuery LigerUI使用教程入门篇

2024-02-29 20:38

本文主要是介绍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可以帮助你快速地创建友好的用户界面。

第一个例子

 
  1. <head> 
  2.     <title></title> 
  3.     <link href="http://www.cnblogs.com/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> 
  4.     <script src="http://www.cnblogs.com/lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>   
  5.     <script src="http://www.cnblogs.com/lib/ligerUI/js/core/base.js" type="text/javascript"></script> 
  6.     <script src="http://www.cnblogs.com/lib/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script> 
  7.     <script type="text/javascript"> 
  8.         $(function ()  
  9.         {  
  10.             //我们将一个html文本框对象转换成ligerui文本框对象,并返回ligerui对象  
  11. var g = $("#txt1").ligerTextBox(  
  12.             {  
  13.                 //如果没有输入时,会提示不能为空  
  14.                 nullText: '不能为空'  
  15.             });  
  16.  
  17.  
  18.             /*  
  19.             如何获取属性  
  20.             */  
  21.             //方式一  
  22.             alert('方式一:' + g.get('disabled'));  
  23.             //方式二  
  24.             alert('方式二:' + $("#txt1").ligerTextBox('option', 'disabled'));  
  25.  
  26.  
  27.             /*  
  28.             如何设置属性  
  29.             */  
  30.             //方式一  
  31.             g.set('disabled', true);  
  32.             //方式二   
  33.             $("#txt1").ligerTextBox('option', 'disabled', false);  
  34.    
  35.  
  36.             /*  
  37.             如何调用方法  
  38.             */  
  39.             //方式一  
  40.             g.setDisabled();  
  41.             //方式二   
  42.             $("#txt1").ligerTextBox('setEnabled');  
  43.  
  44.             /*  
  45.             如何设置事件  
  46.             */  
  47.             //这里给文本框绑定一个改变值的事件  
  48. //也可以设置onChangeValue参数  
  49.             g.bind('changeValue', function (value)  
  50.             {  
  51.                 alert(value);  
  52.  
  53.             });  
  54.  
  55.         });   
  56.     </script> 
  57. </head> 
  58. <body style="padding:10px"> 
  59.         <input type="text" id="txt1" value="" style="width:200px"/> 
  60. </body> 

更多的参数和方法的设置可以查看API:http://www.ligerui.com/api/

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

如何使用ligerUI对象

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

保存到一个全局的javascript变量:

 
  1. var g;  
  2. $(function ()  
  3. {   
  4. g = $("#txt1").ligerTextBox();  
  5. ); 

使用$.fn.ligerGetTextBoxManager

 
  1. var g = $("#txt1").ligerGetTextBoxManager (); 

使用$.ligerui.get方法

 
  1. var g =  $.ligerui.get('txt1'); 

◆ 第三个方式的是使用ligerui对象的id直接获取的,在传入参数没有指定id的情况下,对象的id将会使用html元素的id,如果html元素没有id,将会自动生成一个。所以在这里我们可以用html文本框的id来获取。

◆ 如果没有指定html元素的id,可以用第一种方式或者第二种方式。

◆ 其实第二种方式可以用第一种方式来替代,实则上ligerText是可以重复调用的,不同的是第二次以后调用都是直接放回ligerui对象。当我们不确定html元素是否已经应用了插件的情况下可以使用第二种方式。

◆ 其他插件的命名跟TextBox类同

事件处理

事件处理有两种方式。一种是以参数的形式传入,一种是调用ligerui对象的bind方法。

 
  1. //方式一  
  2.           var g = $("#txt1").ligerTextBox(  
  3.           {  
  4.               onChangeValue : function(value){alert(value);}  
  5.           });  
  6.  
  7.          //方式二        
  8.           g.bind('changeValue'function (value)  
  9.           {  
  10.               alert(value);  
  11.           }); 

◆ 使用bind方法是没有带”on”的。

◆ 事件监听是可以多次绑定的。

◆ 对于某些事件,如果函数的返回值是false,那么后面还没有触发的函数将不会再执行

◆ 第二种方式(bind),是V1.1.3使用core机制以后引入的。

方法调用

使用ligerui的接口很方便。只需要调用ligerui对象的方法即可。

 
  1. //这里设置文本框不能编辑  
  2. g.setDisabled();  
  3. //这里设置文本框可以编辑  
  4. g.setEnabled(); 

也可以使用这种方式

 
  1. $(“#grid”).ligerGrid(‘setEnabled’); 

◆ 至于这个对象有哪些方法,可以查看API

◆ 对象的方法是可以扩展的,后面会有一篇ligerui扩展的章节来介绍

◆ 第二种方式是在V1.1.4加入的

获取参数值

每一个ligerui对象都会有get方法。可以获取参数值

 
  1. var url = g.get(‘url’); 

或者是:

 
  1. var url = $(“#grid”).ligerGrid(‘option’,’url’); 

动态设置参数

每一个ligerui对象都会有set方法。用于动态得设置参数。比如改变Grid的url,那么可以这样写:

 
  1. g.set(‘url’,url); 

或者是:

 
  1. g.set({url:url}); 

也可以用插件的方式:

 
  1. $(“#grid”).ligerGrid(‘option’,’url’,url); 

◆ 第二种方式是允许同时传入多个参数的。

◆ Set方法是所有插件的统一设置属性的接口

◆ Set方法是V1.1.3使用core机制以后引入的。

◆ 插件传参的方式是V1.1.4引入的

如何扩展

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

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

默认参数扩展

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

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

 
  1. if($.ligerDefaults.Grid)  
  2. {  
  3.     $.ligerDefaults.Grid.title = "我的表格";  

本地化支持扩展

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

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

 
  1. if($.ligerDefaults.GridString)  
  2. {  
  3.     $.ligerDefaults.GridString.loadingMessage = "loading...";  

方法扩展

只需要扩展对象:$. ligerMethos.{Plugin}

这里给Grid ligerui对象增加一个alert方法:

 
  1. $.extend($.ligerMethods.Grid,  
  2.             {  
  3.                 alert : function ()  
  4.                 {  
  5.                      //要注意到一点,这里的this就是ligerui对象  
  6.                     var rowdata = this.getSelectedRow();  
  7.                     if (!rowdata)  
  8.                         alert('空');  
  9.                     else  
  10.                         alert(rowdata.CustomerID);  
  11.                 }  
  12.             }  
  13.         );  
  14.  
  15. function show()  
  16. {  
  17.      //后面就可以这样使用  
  18.      Var g = $(“#maingrid”).ligerGrid();  
  19.      g.alert();  

原文:http://www.cnblogs.com/leoxie2011/archive/2012/01/16/2324106.html

【编辑推荐】

  1. JavaScript面向对象编程
  2. jQuery LigerUI V1.1.5发布(包括API和全部源码)
  3. 利用jQuery marquee实现响应设计
  4. jQuery基本原理
  5. JavaScript中的陷阱大集合

这篇关于jQuery LigerUI使用教程入门篇的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/759989

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传