• jQuery LigerUI使用教程入门篇

     

    源码下载：

    http://www.ligerui.com/

    API文档：http://www.ligerui.com/api/

    简介

    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="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 = "我的表格";  
    4. } 

    本地化支持扩展

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

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

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

    方法扩展

    只需要扩展对象：$. 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();  
    20. } 

    原文：http://www.cnblogs.com/leoxie2011/archive/2012/01/16/2324106.html
  • 相关阅读:
    Hz赫兹的定义
    NetCore 迅速接入微信支付+支付宝支付 payLink C# 交差并集
    C# 生产随机数 --几乎可以做到不重复
    Spark MLib完整基础入门教程
    (转)Scrapy 教程
    （转）python自顶向下设计步骤_python实现自顶向下，自底向上
    （转）scrapy架构图与执行流程
    （转）Python：字典(zip, dict)
    （转）APUE第13章 守护进程Deameon
    (转)Python开发指南
  • 原文地址：https://www.cnblogs.com/liubingna/p/2942161.html
Copyright © 2020-2023  润新知