Jquery smart UI plugins introduction (1)-General Idea & plug-in chooser Introduction

Jquery smart UI plugins contains the basic controls used for most daily development. Although some plug-ins have insufficient functions and details compared with many jquery plug-ins, they will be enhanced in later versions.

The development framework of the main content in smart UI 1.0 and some bugs in plugins will be improved in the future. in terms of functions, there is not much problem with basic development at present, mainly because the style is not detailed enough. [currently, styles are all self-built, and artists I know have never had time, A set of styles will be encapsulated later ]. If you find any bugs, notify me and I will fix them as soon as possible.

 

The main idea of smart UI plugins is as follows:

1. Mainly meet the needs of basic applications, unified encapsulation structure, simple writing, easy to expand.

2. Follow the single responsibility principle. Every plug-in has the simplest functions as possible to avoid complicated and huge controls. Complicated applications are encapsulated in the form of extended libraries.

3. All input controls use the input [text] control to record values for unified management (except for a few special controls ).

4. Supports multiple browsers (ie supports version 7.0 and later ).

 

The structure and category of jquery smart UI plugins are as follows:

　　

 

The jquery smart UI plugins series describes several major controls. For other controls, see the demo (downloadable) and API on the Smart UI website.

• Chooser

Select controls to achieve the following:

1. Single choice, multiple choice, drop-down list, drop-down multiple choice list function.
2. Implement the delayed Loading Function of the drop-down select list [load the Ajax data source only when you click it]
3. Custom template function
4. You can bind a JSON data source or an Ajax data source.

 

HTML code:

 

 <input id="txtRadios" />
<input id="txtCheckBox" />
<input id="txtSelect" />
<input id="txtMulitSelect" /> 
<input id="txtAjaxSelect" />
<input id="txtBindAjaxSelect" />

 

JS Code:

Code

 // Fixed Data Source
VaR datas = [{key: 0, value: 'baidu '},
{Key: 1, value: 'Google '},
{Key: 2, value: 'sohu '},
{Key: 3, value: 'sina '},
{Key: 4, value: '20140901 '}
];

$ ('# Txtradios'). chooser ({type: 'LIST'}, datas );
$ ('# Txtcheckbox'). chooser ({type: 'LIST', ismulti: true}, datas );
// Select from the drop-down list
$ ('# Txtselect'). chooser ({emptytype: 'all'}, datas );
// Select multiple from the drop-down list
$ ('# Txtmulitselect'). chooser ({ismulti: true}, datas );
// Ajax Data Source
$ ('# Txtajaxselect'). chooser ({emptytype: 'select', Ajax: {URL: 'fn _ utg05 '}
, Fnselected: function (value, oldvalue, chooser) {getuser (value, oldvalue );}
});
// Ajax Interaction
$ ('# Txtbindajaxselect '). chooser ({emptytype: 'all', isbinddata: false, item: '<li Lv = "$ {u_id}" >$ {u_name} </LI> '});
Function getuser (type, oldtype ){
If (type! = Oldtype)
$ ('# Txtbindajaxselect'). Val (1). chooserreload ({URL: 'fn _ ug07 ', data: Type });
}

 

Detailed demo address

 

The chooser control must be initialized based on the input [text] control.

You can specify the fixed data source and Ajax data source [fncode in smart UI ].

Item: '<li Lv = "$ {u_id}" >$ {u_name} </LI>': Custom item template, follow the tmpl format requirements [simple syntax and embedding methods can be used]. If you are not familiar with it, you can directly use "$ {u_id}" as a bound field.

The fnselected event is selected in the instance to achieve the effect of association.

For more information about chooser parameters, see: Detailed API address.

 

The preceding demos and APIs can be viewed and downloaded on the Smart UI website.