Home > Developer > JavaScript
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
Back to Top
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
Copy codeThe Code is as follows:
<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 ()
{
// Convert an html text box object to a ligerui text box object and return the ligerui object
Var g = $ ("# txt1"). ligerTextBox (
{
// If no value is entered, the system prompts that the value cannot be blank.
NullText: 'cannot be blank'
});
/*
How to obtain attributes
*/
// Method 1
Alert ('method 1: '+ g. get ('Disabled '));
// Method 2
Alert ('method 2: '+ $ ("# txt1"). ligerTextBox ('option', 'Disabled '));
/*
How to Set attributes
*/
// Method 1
G. set ('Disabled ', true );
// Method 2
$ ("# Txt1"). ligerTextBox ('option', 'Disabled ', false );
/*
How to call
*/
// Method 1
G. setDisabled ();
// Method 2
$ ("# Txt1"). ligerTextBox ('setenabled ');
/*
How to Set events
*/
// Bind an event for changing the value to the text box.
// You can also set the onChangeValue Parameter
G. bind ('changevalue ', function (value)
{
Alert (value );
});
});
</Script>
</Head>
<Body style = "padding: 10px">
<Input type = "text" id = "txt1" value = "" style = "width: 200px"/>
</Body>
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:
Copy codeThe Code is as follows:
Var g;
$ (Function ()
{
G = $ ("# txt1"). ligerTextBox ();
);
Use $. fn. ligerGetTextBoxManager
Copy codeThe Code is as follows:
Var g = $ ("# txt1"). ligerGetTextBoxManager ();
Use the $. ligerui. get Method
Copy codeThe Code is as follows:
Var g = $. ligerui. get ('txt1 ');
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.
Copy codeThe Code is as follows:
// Method 1
Var g = $ ("# txt1"). ligerTextBox (
{
OnChangeValue: function (value) {alert (value );}
});
// Method 2
G. bind ('changevalue ', function (value)
{
Alert (value );
});
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.
Copy codeThe Code is as follows:
// The text box cannot be edited.
G. setDisabled ();
// You can edit the text box.
G. setEnabled ();
You can also use this method.
Copy codeThe Code is as follows:
$ ("# Grid"). ligerGrid ('setenabled ');
For the methods of this object, you can view the API
Object methods can be extended. The following section describes ligerui extensions.
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.
Copy codeThe Code is as follows:
Var url = g. get ('url ');
Or:
Copy codeThe Code is as follows:
Var url = $ ("# grid"). ligerGrid ('option', 'url ');
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:
Copy codeThe Code is as follows:
G. set ('url', url );
Or:
Copy codeThe Code is as follows:
G. set ({url: url });
You can also use the plug-in method:
Copy codeThe Code is as follows:
$ ("# Grid"). ligerGrid ('option', 'url', url );
The second method is to allow multiple parameters to be passed in 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.
Back to Top
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:
Copy codeThe Code is as follows:
If ($. ligerDefaults. Grid)
{
$. LigerDefaults. Grid. title = "my tables ";
}
Localization supports expansion
Extension object: $. ligerDefaults. {Plugin} String
For example, when a table is loaded, it is translated into English:
Copy codeThe Code is as follows:
If ($. ligerDefaults. GridString)
{
$. LigerDefaults. GridString. loadingMessage = "loading ...";
}
Method extension
Extension object: $. ligerMethos. {Plugin}
Here we add an alert Method to the Grid ligerui object:
Copy codeThe Code is as follows:
$. Extend ($. ligerMethods. Grid,
{
Alert: function ()
{
// Note that this is the ligerui object.
Var rowdata = this. getSelectedRow ();
If (! Rowdata)
Alert ('null ');
Else
Alert (rowdata. CustomerID );
}
}
);
Function show ()
{
// This can be used later
Var g = $ ("# maingrid"). ligerGrid ();
G. alert ();
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
