The similarities between JQuery mobile and the qui framework

The jquery mobile framework has recently been researched, which is the official jquery UI Framework for the development of mobile and tablet applications. The result is more and more similar to the development of my qui framework, many places have the same idea. The jquery mobile framework advocates wire less, the Do More,qui framework I spent a lot of effort to make development more convenient, found that the jquery mobile framework with a very similar means, it seems really great minds think alike.

Let me give you a few examples:

1, the default to enhance the traditional label rendering, to achieve the beautification of the components

In jquery mobile, the engine automatically renders traditional labels as a touch-friendly look when the page is initialized. For example, button labels:

<input type= "button" value= "button"/>

The effect after rendering is as follows:

Text box Label:

<input type= "text" name= "name" id= "name" value= ""/>

The effect after rendering is as follows:

In qui, when the page is initialized, the engine automatically renders the traditional label with a flattering appearance style, with the following effect:

If you do not want the engine to render traditional labels, add data-role= "None" to the label in jquery Mobile, and add keepdefaultstyle= "true" to the label in qui

2. Add special tags to other HTML tags to create extended components. 5 years of well-developed UI front-end framework!

In jquery Mobile, add data-role=xxx to the label so that the labels are rendered as appropriate components when the page is initialized. For example, add data-role= "button" to the link, as follows:

<a href= "index.html" data-role= "button" >link button</a>

is rendered as a button:

Add the data-role= "header" to the Div as follows:

<div data-role= "Header" >

</div>

is rendered as a title bar:

In qui, add the class=xxx for the label to implement the rendering of the extension component. For example, add class= "Selecttree" to the Div, as follows:

<div class= "selecttree" url= "xxx" ></div>

Where the URL is used to return the JSON data, creating a property drop-down box:

Add class= "keypad" to the input tag as follows:

<input class= "keypad" type= "text"/>

This creates a digital selector:

3. Add custom attributes for labels to extend component functionality. 5 years of well-developed UI front-end framework!

Both the JQuery mobile and qui frameworks can add custom properties to the label. For example, in jquery Mobile, add the placeholder attribute to the input tag to implement the watermark:

<input type= "text" name= "username" id= "username" value= "" placeholder= "username"/>

The effect is as follows:

Add data-inline= "True" for the a tag to implement the custom text of the button size, add data-mini= "true" to make the button's style a small button:

<a href= "index.html" data-role= "button" data-inline= "true" data-mini= "true" >Cancel</a>

The effect is as follows:

In the qui framework, add the watermark attribute to the input tag to implement the watermark:

<input type= "text" watermark= "Enter letters or numbers"/>

The effect is as follows:

Adding the colnum= "3" to the Select label allows the option to be divided into 3 columns, with the following effects:

4, have the icon library, can be used in conjunction with other components. 5 years of well-developed UI front-end framework!

In jquery mobile, you can add icons for many components by setting Data-icon, such as adding icons to buttons:

<a href= "index.html" data-role= "button" data-icon= "delete" data-inline= "true" >Cancel</a>

The effect is as follows:

In Qui, you also have an icon library, which allows you to add icons to many components. For example, add an icon code to the button:

<button type= "button" ><span class= "Icon_save" > Save </span></button>

<button type= "button" ><span class= "icon_delete" > Delete </span></button>

<button type= "button" ><span class= "icon_find" > Query </span></button>

The effect is as follows:

5. Components support dynamic Creation

Components in jQuery Mobile and qui can be created in addition to the label creation, and also support the creation of a DOM node in a dynamic manner.

The way you dynamically create components in JQuery Mobile is as follows:

Dynamically creates DOM nodes, adds them to the page, and finally calls the Create method for rendering.

The code form is as follows:

$ (Component Dom label). AppendTo (". Ui-page"). Trigger ("create");

The ways to dynamically create components in qui are as follows:

Dynamically creates DOM nodes, adds them to the page, and finally calls the Render method for rendering.

The code form is as follows:

$ (Component Dom label). AppendTo ("Body"). Render ();

6. Components support Dynamic Modification

When components in JQuery Mobile and qui are dynamically modified, the component's properties are dynamically adjusted and the Refresh method is called to refresh. For example

The code of the multi-select button is dynamically selected in JQuery mobile as follows:

$ ("input[type= ' checkbox ']"). Prop ("checked", true). Checkboxradio ("refresh");

The code for an item in the Dynamically selected dropdown box in JQuery Mobile is as follows:

var myselect = $ ("#selectfoo");

Myselect[0].selectedindex = 3;

Myselect.selectmenu ("Refresh");

The code for an item in the dynamically selected drop-down box in Qui is as follows:

$ ("#sel-1") [0].selectedindex = 1;

$ ("#sel-1"). Render ();

If you want to disable the drop-down box, the code is as follows:

$ ("#sel-1"). attr ("Disabled", true);

$ ("#sel-1"). Render ();

Render and refresh in qui is the same method render (), which is automatically judged for processing.

About the qui framework, you can click here to learn: 5 years of carefully developed UI front-end framework!

The similarities between JQuery mobile and the qui framework