Home > Developer > JavaScript

JQuery LigerUI getting started

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Get the latest code

You can go to the http://ligerui.googlecode.com to download the latest code.

Introduction

JQuery LigerUI is a combination of jQuery-based UI controls. It is simple and powerful and is dedicated to quickly creating a Web Front-End Interface solution. It is a front-end control and has nothing to do with the server. It can be used in. net, jsp, php, and other web server environments. Currently, the packaging and compression of all plug-ins is only about K, which is very lightweight. The plug-in-type development mode is designed based on the "simple" principle. Each plug-in should be as independent as possible and can be expanded based on dependencies.

What is ligerUI?

Rich jQuery LigerUI controls, including basic, navigation, layout, form, table, tree, window, etc.

Basics: Resizable, Drag, and Tip

Navigation: Menu, MenuBar, ToolBar

Layout: Layout and Tab

Form: Form, TextBox, Button, CheckBox, ComboBox, DateEditor, Radio, and Spinner

Table: Grid

Tree: Tree

Window: Dialog, MessageBox, Window

How to Use

JQuery LigerUI is a collection of plug-ins designed based on jQuery. Basically, each plug-in is relatively independent. However, the plug-ins are closely related to each other, and the plug-ins are reasonably assembled to implement various complex functions. Using the UI can help you quickly create a friendly user interface.

Example 1

 
 
    
  
  
  1. <Head>
    2. 
  
  
  2. <Title> </title>
    3. 
  
  
  3. <Link href = "http://www.cnblogs.com/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel = "stylesheet" type = "text/css"/>
    4. 
  
  
  4. <Script src = "http://www.cnblogs.com/lib/jquery/jquery-1.3.2.min.js" type = "text/javascript"> </script>
    5. 
  
  
  5. <Script src = "http://www.cnblogs.com/lib/ligerUI/js/core/base.js" type = "text/javascript"> </script>
    6. 
  
  
  6. <Script src = "http://www.cnblogs.com/lib/ligerUI/js/plugins/ligerTextBox.js" type = "text/javascript"> </script>
    7. 
  
  
  7. <Script type = "text/javascript">
    8. 
  
  
  8. $ (Function ()
    9. 
  
  
  9. {
    10. 
  
  
  10. // Convert an html text box object to a ligerui text box object and return the ligerui object
    11. 
  
  
  11. Var g = $ ("# txt1"). ligerTextBox (
    12. 
  
  
  12. {
    13. 
  
  
  13. // If no value is entered, the system prompts that the value cannot be blank.
    14. 
  
  
  14. NullText: 'cannot be blank'
    15. 
  
  
  15. });
    16. 
  
  
  16.  
    17. 
  
  
  17.  
    18. 
  
  
  18. /*
    19. 
  
  
  19. How to obtain attributes
    20. 
  
  
  20. */
    21. 
  
  
  21. // Method 1
    22. 
  
  
  22. Alert ('method 1: '+ g. get ('Disabled '));
    23. 
  
  
  23. // Method 2
    24. 
  
  
  24. Alert ('method 2: '+ $ ("# txt1"). ligerTextBox ('option', 'Disabled '));
    25. 
  
  
  25.  
    26. 
  
  
  26.  
    27. 
  
  
  27. /*
    28. 
  
  
  28. How to Set attributes
    29. 
  
  
  29. */
    30. 
  
  
  30. // Method 1
    31. 
  
  
  31. G. set ('Disabled ', true );
    32. 
  
  
  32. // Method 2
    33. 
  
  
  33. $ ("# Txt1"). ligerTextBox ('option', 'Disabled ', false );
    34. 
  
  
  34. 
  
  
  35.  
    36. 
  
  
  36. /*
    37. 
  
  
  37. How to call
    38. 
  
  
  38. */
    39. 
  
  
  39. // Method 1
    40. 
  
  
  40. G. setDisabled ();
    41. 
  
  
  41. // Method 2
    42. 
  
  
  42. $ ("# Txt1"). ligerTextBox ('setenabled ');
    43. 
  
  
  43.  
    44. 
  
  
  44. /*
    45. 
  
  
  45. How to Set events
    46. 
  
  
  46. */
    47. 
  
  
  47. // Bind an event for changing the value to the text box.
    48. 
  
  
  48. // You can also set the onChangeValue Parameter
    49. 
  
  
  49. G. bind ('changevalue ', function (value)
    50. 
  
  
  50. {
    51. 
  
  
  51. Alert (value );
    52. 
  
  
  52.  
    53. 
  
  
  53. });
    54. 
  
  
  54.  
    55. 
  
  
  55. });
    56. 
  
  
  56. </Script>
    57. 
  
  
  57. </Head>
    58. 
  
  
  58. <Body style = "padding: 10px">
    59. 
  
  
  59. <Input type = "text" id = "txt1" value = "" style = "width: 200px"/>
    60. 
  
  
  60. </Body>
    61.

For more parameter and method settings, see API: http://www.ligerui.com/api/

The preceding is an example of TextBox. Other plug-ins are used in a similar way.

How to Use ligerUI objects

After the plug-in is applied, a ligerui object is returned, which can be saved in a global variable. It may be used in subsequent operations. If it is not saved in time due to the limitation of the variable scope. We can use other methods. See below:

Save to a global javascript variable:

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

Use $. fn. ligerGetTextBoxManager

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

Use the $. ligerui. get Method

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

◆ The third method is to directly obtain the ligerui Object id. If no id is specified for the input parameter, the Object id will use the id of the html element, if the html element does not have an id, one is automatically generated. So here we can use the id of the html text box to get it.

◆ If the id of the html element is not specified, the first or second method can be used.

◆ In fact, the second method can be replaced by the first method. In reality, ligerText can be called repeatedly. The difference is that after the second call, the ligerui object is directly put back. The second method can be used when we are not sure whether the html element has applied the plug-in.

◆ The names of other plug-ins are the same as those of TextBox.

Event Processing

Event processing can be performed in two ways. One is passed in as a parameter, and the other is the bind method that calls the ligerui object.

 
 
    
  
  
  1. // Method 1
    2. 
  
  
  2. Var g = $ ("# txt1"). ligerTextBox (
    3. 
  
  
  3. {
    4. 
  
  
  4. OnChangeValue: function (value) {alert (value );}
    5. 
  
  
  5. });
    6. 
  
  
  6.  
    7. 
  
  
  7. // Method 2
    8. 
  
  
  8. G. bind ('changevalue ', function (value)
    9. 
  
  
  9. {
    10. 
  
  
  10. Alert (value );
    11. 
  
  
  11. });
    12.

◆ The bind method does not contain "on.

◆ Event listening can be bound multiple times.

◆ For some events, if the return value of the function is false, the functions not triggered later will not be executed.

◆ The second method (bind) is introduced after V1.1.3 uses the core mechanism.

Method call

It is convenient to use the ligerui interface. You only need to call the ligerui object method.

 
 
    
  
  
  1. // The text box cannot be edited.
    2. 
  
  
  2. G. setDisabled ();
    3. 
  
  
  3. // You can edit the text box.
    4. 
  
  
  4. G. setEnabled ();
    5.

You can also use this method.

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

◆ For the methods of this object, you can view the API

◆ Object methods can be extended. The following section describes ligerui extension.

◆ The second method is added in V1.1.4.

Get parameter value

Each ligerui object has a get method. You can obtain the parameter value.

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

Or:

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

Dynamically set parameters

Each ligerui object has a set method. Used to dynamically set parameters. For example, if you want to change the url of the Grid, you can write it as follows:

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

Or:

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

You can also use the plug-in method:

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

◆ The second method allows multiple parameters to be input at the same time.

◆ The Set method is the interface for unified attribute setting of all plug-ins.

◆ The Set method is introduced after V1.1.3 uses the core mechanism.

◆ The parameter passing method of the plug-in is introduced in V1.1.4.

How to expand

The default parameters and methods of Ligerui can be expanded. Here we define two portals: $. ligerDefaults and $. ligerMethods.

For example, you can change $. ligerDefaults. Grid to change or extend the default parameters of the Grid.

Default parameter Extension

Extension object: $. ligerDefaults. {Plugin}

For example, to change the default header title of a table:

 
 
    
  
  
  1. If ($. ligerDefaults. Grid)
    2. 
  
  
  2. {
    3. 
  
  
  3. $. LigerDefaults. Grid. title = "my tables ";
    4. 
  
  
  4. }
    5.

Localization supports expansion

Extension object: $. ligerDefaults. {Plugin} String

For example, when a table is loaded, it is translated into English:

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

Method extension

Extension object: $. ligerMethos. {Plugin}

Here we add an alert Method to the Grid ligerui object:

 
 
    
  
  
  1. $. Extend ($. ligerMethods. Grid,
    2. 
  
  
  2. {
    3. 
  
  
  3. Alert: function ()
    4. 
  
  
  4. {
    5. 
  
  
  5. // Note that this is the ligerui object.
    6. 
  
  
  6. Var rowdata = this. getSelectedRow ();
    7. 
  
  
  7. If (! Rowdata)
    8. 
  
  
  8. Alert ('null ');
    9. 
  
  
  9. Else
    10. 
  
  
  10. Alert (rowdata. CustomerID );
    11. 
  
  
  11. }
    12. 
  
  
  12. }
    13. 
  
  
  13. );
    14. 
  
  
  14.  
    15. 
  
  
  15. Function show ()
    16. 
  
  
  16. {
    17. 
  
  
  17. // This can be used later
    18. 
  
  
  18. Var g = $ ("# maingrid"). ligerGrid ();
    19. 
  
  
  19. G. alert ();
    20. 
  
  
  20. }
    21.

Original article: http://www.cnblogs.com/leoxie2011/archive/2012/01/16/2324106.html

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More