Getting Started with jQuery LigerUI Tutorial

Getting Started with jQuery LigerUI Tutorial_jquery

WBOY

Release： 2016-05-16 17:56:58

Original

1287 people have browsed it

Get the latest code
You can download the latest code from http://ligerui.googlecode.com.

Introduction
jQuery LigerUI is a series of UI control combinations based on jQuery. It is simple yet powerful and is dedicated to quickly creating Web front-end interface solutions. Because it is a front-end control, it has nothing to do with the server and can be suitable for web server environments such as .net, jsp, php, etc. At present, the packaged and compressed JS of all plug-ins is only about 100K, which is very lightweight. Using a plug-in development model, the design is based on the principle of "simplicity". Each plug-in is as independent as possible and can be relied upon for expansion.

What is LigerUI
jQuery LigerUI is rich in controls, including basics, navigation, layout, forms, tables, trees, windows, etc.

Basics: Resizable, Drag, Tip

Navigation: Menu, MenuBar, ToolBar

Layout: Layout, Tab

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

Form : Grid

Tree: Tree

Window: Dialog, MessageBox, Window

Back to top
How to use
jQuery LigerUI is designed based on jQuery A collection of plugins. Basically each plug-in is relatively independent. But they are closely related to each other, and plug-ins can be assembled reasonably to achieve various complex functions. Using UI can help you quickly create a user-friendly interface.

First example

Copy code The code is as follows:

< head>

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

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

How to use the ligerUI object
After we apply the plug-in, 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 variable scope restrictions, etc. We can get it in other ways. See below:

Save to a global javascript variable:

Copy code The code is as follows:

 
var g; 
$(function () 
{ 
g = $("#txt1").ligerTextBox(); 
); 

Use $.fn.ligerGetTextBoxManager

Copy code The code is as follows:

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

Use $.ligerui.get method

Copy code The code is as follows:

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

The third method is to obtain it directly using the id of the ligerui object. When the incoming parameter does not specify an id, the object's id will use the id of the html element. If the html element does not have an id, it will be automatically generated. one. 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, you can use the first or second method.
In fact, the second method can be replaced by the first method. In fact, ligerText can be called repeatedly. The difference is that the ligerui object is directly returned after the second call. The second method can be used when we are not sure whether the plug-in has been applied to the html element.
The naming of other plug-ins is similar to TextBox.
Event processing
There are two ways to handle events. One is to pass it in as a parameter, and the other is to call the bind method of the ligerui object.

Copy code The code is as follows:

 
//Method 1
var g = $( "#txt1").ligerTextBox( 
{ 
onChangeValue : function(value){alert(value);} 
}); 

//Method 2
g.bind ('changeValue', function (value) 
{ 
alert(value); 
}); 

Using the bind method does not include "on".
Event listeners can be bound multiple times.
For some events, if the return value of the function is false, then functions that have not yet been triggered will not be executed again.
The second method (bind) was introduced after V1.1.3 used the core mechanism.
Method call
It is very convenient to use the Ligerui interface. Just call the method of the ligerui object.

Copy code The code is as follows:

 
//The text box set here cannot be edited
g .setDisabled(); 
//The text box set here can be edited
g.setEnabled(); 

You can also use this method

Copy code The code is as follows:

$("#grid").ligerGrid('setEnabled');

As for the methods of this object, you can check the API
The methods of the object can be extended, and there will be a chapter on ligerui extension to introduce it later
The second method was added in V1.1.4
Get parameter value
Every ligerui object will have a get method. You can get the parameter value

Copy code The code is as follows:

var url = g.get(' url');

or:

Copy code The code is as follows:

var url = $("#grid").ligerGrid('option','url');

Dynamic setting parameters
Each ligerui object will have a set method. Used to dynamically set parameters. For example, to change the url of the Grid, you can write like this:

Copy the code The code is as follows:

g .set('url',url);

or:

Copy code The code is as follows :

g.set({url:url});

You can also use plug-ins:

Copy code The code is as follows:

$("#grid").ligerGrid('option','url',url);

The second method allows multiple parameters to be passed in at the same time.
The Set method is a unified interface for setting properties for all plug-ins.
The Set method was introduced after V1.1.3 used the core mechanism.
The way the plug-in passes parameters is introduced in V1.1.4
Back to top
How to extend
Ligerui’s default parameters and methods can be extended. Here we define two entrances: $. ligerDefaults and $.ligerMethods.

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

Default parameter expansion
You only need to extend the object: $.ligerDefaults.{Plugin}

For example, if you want to change the default header title of the table:

Copy the code The code is as follows:

 
if($.ligerDefaults.Grid) 
{ 
$.ligerDefaults.Grid.title = "My Form"; 
} 

Localization To support extension
, you only need to extend the object: $.ligerDefaults.{Plugin}String

For example, to translate the table "when loading" into English:

Copy the code The code is as follows:

 
if($.ligerDefaults.GridString) 
{ 
$.ligerDefaults.GridString.loadingMessage = "loading.. ."; 
} 

Method expansion
only needs to extend the object: $. ligerMethos.{Plugin}

Add an alert method to the Grid ligerui object here:

Copy code The code is as follows:

 
$.extend($.ligerMethods.Grid, 
 { 
alert : function () 
{ 
//One thing to note is that this here is the ligerui object 
var rowdata = this.getSelectedRow(); 
if (!rowdata) 
alert('empty'); 
else 
alert(rowdata.CustomerID); 
} 
} 
); 

function show() 
{ 
//You can use it like this later
Var g = $(“#maingrid”).ligerGrid(); 
g.alert(); 
} 