jQuery LigerUI 使用教程入门篇
阅读目录
- 获取最新代码
- 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('空');elsealert(rowdata.CustomerID);}});function show() {//后面就可以这样使用 Var g = $(“#maingrid”).ligerGrid();g.alert(); }
jQuery LigerUI 使用教程入门篇相关推荐
- java ligerui_[Java教程]jQuery LigerUI 使用教程入门篇_星空网
jQuery LigerUI 使用教程入门篇 2012-01-17 0 阅读目录获取最新代码 ligerUI是什么 如何使用 如何扩展 获取最新代码 可以到http://ligerui.googlec ...
- jQuery LigerUI使用教程入门篇
获取最新代码 可以到http://ligerui.googlecode.com下载最新代码. 简介 jQuery LigerUI 是基于jQuery的一系列UI控件组合,简单而又强大,致力于快速打造W ...
- jQuery LigerUI 使用教程表格篇(1)
阅读目录 第一个例子 数据结构 两种绑定数据的方式 配置column 自定义表头 自定义单元格 排序与分页 事件与方法 第一个例子 简介 ligerGrid是ligerui系列插件的核心控件,用户可以 ...
- 【helloworld】-微信小程序开发教程-入门篇【1】
1. 开篇导言 本节目标:旨在演示如何用开发者工具构建并运行简单的 helloworld 应用. 目标用户:无编程经验,但对微信小程序感兴趣的同学. 学习目标:开发者工具的基本使用流程,即创建.导入. ...
- AJAX框架简笔画图片教程,jquery 框架使用教程 AJAX篇
jquery 框架使用教程 AJAX篇 更新时间:2009年10月11日 14:47:26 作者: 正好项目中准备使用thickbox,于是干脆抛弃prototype.js,看起jquery.js ...
- 微信小程序教程入门篇
微信小程序教程入门篇: 微信小程序怎么做?做一个微信小程序要多少钱呢? 作为Z时代,Y时代的我们,做一个微信小程序难道还要去看书学代码吗? 不存在的各位. 现在制作一个微信小程序,只需要动动鼠标键盘, ...
- python语言自学教程-3D图示Python标准自学教程入门篇
内容简介: Python入门篇教程从最基础的计算机发展史.Python的来源与发展历史开始讲起: 依次讲解python变量与表达式.数据类型.运算符.流程控制语句等,末尾通过课堂练习.课后作业以及微型 ...
- python自学教程-3D图示Python标准自学教程入门篇
内容简介: Python入门篇教程从最基础的计算机发展史.Python的来源与发展历史开始讲起: 依次讲解python变量与表达式.数据类型.运算符.流程控制语句等,末尾通过课堂练习.课后作业以及微型 ...
- python自学课堂_3D图示Python标准自学教程入门篇
内容简介: Python入门篇教程从最基础的计算机发展史.Python的来源与发展历史开始讲起: 依次讲解python变量与表达式.数据类型.运算符.流程控制语句等,末尾通过课堂练习.课后作业以及微型 ...
最新文章
- Hello World
- php base64解码,PHP Base64 中英文编码 JavaScript 解码
- 【数据竞赛】从0梳理1场CV缺陷检测赛事!
- ValueError: too many values to unpack
- dubbo 服务压测_Dubbo高性能网关--Flurry介绍
- oppoJava面试题,java开发个人博客教程
- android ndk串口触屏,Aandroid NDK开发之串口控制
- (android开发http拦截)fiddler2抓包工具
- socket 支持 ipv6
- 一个关于常用类的简单小练习
- 展辰涂料如何利用K2BPM加强流程管控?
- 华为人均工资70万人人想要,可华为员工16项标准你能做到几条?
- 启动cartographer_ros进行仿真错误process has died exit code -11
- .Net部分 面试问题
- 免费通信时代何时真正到来?
- cv2,PIL,plt,tensorflow方法图片显示及plt的的plt.colorbar()的使用需要注意
- 解决Error: ENOENT: no such file or directory, scandir 安装node-sass报错
- 【知识积累】Edge vs Fog Computing 边缘计算和雾计算的基本介绍
- GBase 8a MPP使用时 数据库基础问题之管理工具三
- 安川机器人仿真软件motosim-添加工具模型
热门文章
- 小米手环nfc门卡摸拟成功后不能开门_一键开门,7种解锁方式,绿米推出全自动智能锁...
- python实现多表格合并_python 如何把两个表格数据,合并为一个呢?
- HashMap由浅入深(jdk8)
- 如何把Linux的虚拟内存调成0,手把手教您扩展虚拟内存
- 贵州:值得做好“水”文章
- 深度学习在医疗方面的应用 精准医学受追捧
- Hbase 架构(未完待续)
- OSChina 周三乱弹——真相往往令人内牛满面
- 【转载】stackoverflow 上关于 rebar 的讨论
- 如何过滤 adb logcat 命令的输出