Get the latest code
You can download the latest code to http://ligerui.googlecode.com.
Brief introduction
The jquery Ligerui is a combination of a series of UI controls based on jquery, simple and powerful, dedicated to quickly building a Web front-end interface solution. Because it is a front-end control, it is not related to the server, it can be suitable for. net,jsp,php, etc. Web server environment. At present, all the plug-ins packed compressed JS only about 100K, very lightweight. Using the plug-in development model, the "simple" principle of the design, each plug-in as independent as possible, and can rely on expansion.
What's Ligerui?
JQuery Ligerui controls are rich, including basics, navigation, layout, forms, tables, trees, windows, etc.
Foundation: Resizable, Drag, Tip
Navigation: Menu, MenuBar, ToolBar
Layout: Layout, Tab
Forms: Form, TextBox, Button, CheckBox, ComboBox, Dateeditor, Radio, Spinner
Table: Grid
Tree shape: Trees
Windows: Dialog, MessageBox, window
Back to the top of
How to use
jquery Ligerui is a collection of plug-ins designed based on jquery. Basically, each plug-in is relatively independent. But they are closely related to each other, reasonably assemble the plug-ins to achieve various complex functions. Using the UI can help you quickly create a friendly user interface.
First example
Copy Code code as follows:
<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 ()
{
We convert an HTML text box object into a Ligerui text box object and return the Ligerui object
var g = $ ("#txt1"). Ligertextbox (
{
If you do not enter, you are prompted not to be empty
Nulltext: ' Can't be empty '
});
/*
How to Get Properties
*/
Way One
Alert (' Mode one: ' + g.get (' disabled '));
Mode two
Alert (' Mode two: ' + $ (' #txt1 '). Ligertextbox (' option ', ' disabled '));
/*
How to set properties
*/
Way One
G.set (' disabled ', true);
Mode two
$ ("#txt1"). Ligertextbox (' option ', ' disabled ', false);
/*
How to call a method
*/
Way One
G.setdisabled ();
Mode two
$ ("#txt1"). Ligertextbox (' setenabled ');
/*
How to set up events
*/
This binds a text box to a value-changing event
You can also set the Onchangevalue parameter
G.bind (' ChangeValue ', function (value)
{
alert (value);
});
});
</script>
<body style= "padding:10px" >
<input type= "text" id= "txt1" value= "style=" width:200px "/>"
</body>
More parameters and method settings can be viewed api:http://www.ligerui.com/api/
This is an example of the use of a TextBox, and other plug-ins are used in similar ways.
How to use the Ligerui object
After we have applied the plugin, we return a Ligerui object, and we can save the object in a global variable. May be used in subsequent operations. If because of the scope of the variable limit, etc., not in time to save. We can get it in other ways. See below:
Save to a global JavaScript variable:
Copy Code code as follows:
var G;
$ (function ()
{
g = $ ("#txt1"). Ligertextbox ();
);
Using $.fn.ligergettextboxmanager
Copy Code code as follows:
var g = $ ("#txt1"). Ligergettextboxmanager ();
Using the $.ligerui.get method
Copy Code code as follows:
var g = $.ligerui.get (' txt1 ');
The third method is obtained directly using the ID of the Ligerui object, and the ID of the object will use the ID of the HTML element if the Passed-in parameter does not specify an ID, and one will be generated automatically if the HTML element does not have an ID. So here we can use the ID of the HTML text box to get it.
If you do not specify an ID for an HTML element, you can use either the first or the second method.
In fact, the second way can be replaced by the first way, in reality, Ligertext can be repeated calls, the difference is that the second time after the call is directly put back to the Ligerui object. The second way can be used when we are not sure whether the HTML element has already been applied to the plugin.
The names of other plug-ins are similar to the textbox
Event handling
There are two ways to handle event. One is passed in as a parameter, one is the bind method that invokes the Ligerui object.
Copy Code code as follows:
Way One
var g = $ ("#txt1"). Ligertextbox (
{
Onchangevalue:function (value) {alert (value);}
});
Mode two
G.bind (' ChangeValue ', function (value)
{
alert (value);
});
There is no "on" with the Bind method.
Event sniffing can be bound multiple times.
For some events, if the return value of the function is false, then the function that has not been triggered later will not execute
The second approach (BIND) was introduced by V1.1.3 using the core mechanism.
Method calls
It is convenient to use the Ligerui interface. You only need to invoke the method of the Ligerui object.
Copy Code code as follows:
This setting text box cannot be edited
G.setdisabled ();
This sets the text box to edit
G.setenabled ();
You can also use this method
Copy Code code as follows:
$ ("#grid"). Ligergrid (' setenabled ');
As for what the object has to do, you can view the API
The object's methods can be extended, followed by a Ligerui extended section to introduce
The second way is to join the V1.1.4.
Get parameter values
Every Ligerui object will have a GET method. can get parameter values
Copy Code code as follows:
var url = g.get (' url ');
Or is:
Copy Code code as follows:
var url = $ ("#grid"). Ligergrid (' option ', ' url ');
Setting parameters Dynamically
Each Ligerui object will have a set method. Used to set parameters dynamically. For example, to change the URL of the grid, you can write this:
Copy Code code as follows:
Or is:
Copy Code code as follows:
You can also use plug-ins in the form of:
Copy Code code as follows:
$ ("#grid"). Ligergrid (' option ', ' url ', url);
The second way is to allow multiple parameters to be passed in at the same time.
The Set method is the interface for the unified settings property of all Plug-ins
The Set method is introduced later by V1.1.3 using the core mechanism.
The way Plug-ins are passed in is V1.1.4 introduced
Back to the top of
How to Extend
The default parameters and methods of Ligerui can be extended, and here we define two portals: $.ligerdefaults and $.ligermethods.
For example, to change or extend the default parameters of the Grid, you can change the $.ligerdefaults.grid
Default parameter extension
Only need to extend the object: $.ligerdefaults. {Plugin}
For example, to change the table default header title:
Copy Code code as follows:
if ($.ligerdefaults.grid)
{
$.ligerdefaults.grid.title = "my form";
}
Localized support extensions
Only need to extend the object: $.ligerdefaults. {Plugin} String
For example, the form "loading" translated into English:
Copy Code code as follows:
if ($.ligerdefaults.gridstring)
{
$.ligerdefaults.gridstring.loadingmessage = "Loading ...";
}
Method extension
Only need to extend the object: $. Ligermethos. {Plugin}
Here, add an alert method to the grid Ligerui object:
Copy Code code as follows:
$.extend ($.ligermethods.grid,
{
Alert:function ()
{
To note that here's this is the Ligerui object
var rowdata = This.getselectedrow ();
if (!rowdata)
Alert (' empty ');
Else
Alert (RowData. CustomerID);
}
}
);
Function Show ()
{
You can use this later
Var g = $ ("#maingrid"). Ligergrid ();
G.alert ();
}
