课题-jquery-ligerui-使用教程入门篇.pdfVIP

jQuery LigerUI 使用教程入门篇 jQuery LigerUI 是基于 jQuery 的一系列 UI 控件组合，简单而又强大，致力于快速打造 Web 前端界面解决方案。 为是前端控件，跟服务器无关，可以适合.net,jsp,php 等等 web 服 务器环境 简介 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=/lib/ligerUI/skins/Aqua/css/ligerui-all.css rel=stylesheet t ype=text/css / script src=/lib/jquery/jquery-1.3.2.min.js type=text/javascript/scr ipt script src=/lib/ligerUI/js/core/base.js type=text/javascript/script script src=/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 ：/api/ 上面是 TextBox 的使用范例，其他的插件使用方式类似。 如何使用 ligerUI 对象 我们应用完插件以后，是返回一个 ligerui 对象的，可以