Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of the "tutorial on the use of jQuery LigerUI". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Brief introduction

JQuery LigerUI is a series of jQuery-based UI control combinations, simple and powerful, committed to the rapid creation of 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 .net, jsp,php and other web server environments. At present, the packaged and compressed JS of all plug-ins is only about 100K, which is very lightweight. Using the plug-in development mode and the design based on the principle of "simplicity", each plug-in is as independent as possible and can rely on extension.

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

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

Form: Grid

Tree: Tree

Windows: 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, they are closely related to each other, reasonably assemble the plug-ins and achieve a variety of complex functions. Using UI can help you quickly create a friendly user interface.

* examples

$(function () {/ / We convert a html text box object to a ligerui text box object and return the ligerui object var g = $("# txt1") .ligerTextBox ({/ / if you don't enter, you will be prompted that it cannot be empty nullText: 'cannot be empty'}) / * how to obtain attributes * / / method 1 alert ('method 1:' + g.get ('disabled')); / / method 2 alert (' method 2:'+ $("# txt1"). LigerTextBox ('option',' disabled')) / * how to set properties * / / method one g.set ('disabled', true); / / method two $("# txt1") .ligerTextBox (' option', 'disabled', false) / * how to call method * / / method one g.setDisabled (); / / method two $("# txt1") .ligerTextBox ('setEnabled') / * how to set the event * / / bind the text box to an event that changes the value / / you can also set the onChangeValue parameter g.bind ('changeValue', function (value) {alert (value);});})

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

The above is an example of the use of TextBox, and other plug-ins are used in a similar way.

How to use ligerUI objects

After we apply the plug-in, we return a ligerui object, which can be saved in a global variable. It may be used in subsequent operations. If it is not saved in time because of the limitation of the scope of the variable. We can get it in other ways. See as follows:

Save to a global javascript variable:

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

Use $.fn.ligerGetTextBoxManager

Var g = $("# txt1") .ligerGetTextBoxManager ()

Use the $.ligerui.get method

Var g = $.ligerui.get ('txt1')

The third way of ◆ is to get it directly using the id of the ligerui object. If the passed parameter does not specify id, the id of the object will use the id of the html element. If the html element does not have an id, it will automatically generate one. So here we can use the id of the html text box to get it.

If ◆ does not specify the id of the html element, you can use either the * * method or the second way.

In fact, the second method of ◆ can be replaced by * *. In fact, ligerText can be called repeatedly. The difference is that after the second call, it is directly returned to the ligerui object. The second approach can be used when we are not sure whether the html element has a plug-in applied.

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

Event handling

There are two ways to handle events. One is passed in as a parameter, and the other is to call the bind method of the ligerui object.

/ / Mode 1 var g = $("# txt1"). LigerTextBox ({onChangeValue: function (value) {alert (value);}}); / / Mode II g.bind ('changeValue', function (value) {alert (value);})

◆ uses the bind method without "on".

◆ event listeners 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 will not be executed again

The second method of ◆ (bind) was introduced after V1.1.3 used the core mechanism.

Method call

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

/ / the text box set here cannot edit g.setDisabled (); / / the text box here can edit g.setEnabled ()

You can also use this way.

$("# grid"). LigerGrid ('setEnabled')

◆ as to what methods are available for this object, you can check API

The methods of the ◆ object are extensible, and there will be a chapter on ligerui extensions to introduce

The second way of ◆ is added in V1.1.4.

Get parameter values

Every ligerui object has a get method. Parameter values can be obtained

Var url = g.get ('url')

Or:

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

Set parameters dynamically

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

G.set ('url',url)

Or:

G.set ({url:url})

You can also use plug-ins:

$("# grid"). LigerGrid ('option','url',url)

The second way of ◆ allows multiple parameters to be passed in at the same time.

The ◆ Set method is the interface for setting properties uniformly 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.

How to expand

The default parameters and methods of Ligerui are extensible, and here we define two entries: $.ligerDefaults and $.ligerMethods.

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

Default parameter extension

Only need to extend the object: $.ligerDefaults. {Plugin}

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

If ($.ligerDefaults.Grid) {$. LigerDefaults.Grid.title = "my form";}

Localization supports extension

You only need to extend the object: $.ligerDefaults. {Plugin} String

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

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

Method extension

You only need to extend the object: $. LigerMethos. {Plugin}

Here, add an alert method to the Grid ligerui object:

Extend ($.ligerMethods.Grid, {alert: function () {/ / notice that the this here is the ligerui object var rowdata = this.getSelectedRow (); if (! rowdata) alert ('empty') Else alert (rowdata.CustomerID);}}); function show () {/ / you can use Var g = $("# maingrid") .ligerGrid (); g.alert () } this is the end of the introduction to the tutorial on the use of jQuery LigerUI. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.