The similarities between jQuery Mobile and QUI frameworks

Recently, I have been studying the jQuery Mobile framework, the Official Mobile UI framework of jQuery, which is used to develop applications for Mobile phones and tablets. As a result, I think it is very similar to the development idea of my QUI framework, and it is similar in many places. The jQuery Mobile framework advocates wire less, do more, and QUI frameworks. I have spent a lot of time making development easier. I found that they are very similar to the methods used by the jQuery Mobile framework. It seems that they are really just a hero.

Here are some examples:

 

1By default, Traditional labels are rendered in enhanced mode to beautify components.

In jQuery Mobile, the engine automatically renders the Traditional labels into a suitable appearance when the page is initialized. For example, button label:

<Input type = "button" value = "Button"/>

The rendering effect is as follows:

 

 

 

Text Box label:

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

The rendering effect is as follows:

 

 

 

 

In QUI, when the page is initialized, the engine automatically renders the traditional label with a beautifying appearance style. The effect is as follows:

 

 

 

 

If you do not want the engine to render a traditional tag, add data-role = "none" to the tag in jQuery Mobile; In QUI, add keepDefaultStyle = "true" to the tag"

 

 

2For other htmlAdd special tags for tags to create extended Components

In jQuery Mobile, add data-role = xxx to the tag so that the tags will be rendered as corresponding components during page initialization. For example, add data-role = "button" for the link, as follows:

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

It is rendered as a button:

 

 

 

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

<Div data-role = "header">

<H1> Page Title

</Div>

It is rendered as a title bar:

 

 

 

 

In QUI, add class = xxx to the label to render the extended component. For example, add class = "selectTree" for the div, as follows:

<Div class = "selectTree" url = "xxx"> </div>

Here, the url is used to return JSON data, so a property drop-down box is created:

 

 

 

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

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

In this way, a digital selector is created:

 

 

 

 

 

 

3Add custom attributes for tags to expand component functions

The jQuery Mobile and QUI frameworks can add custom attributes for tags. 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" to label a to customize the button size. add data-mini = "true" to make the button style small:

<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 for the input tag to implement the watermark:

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

The effect is as follows:

 

 

 

To add colNum = "3" to the select tag, you can divide the options into three columns for display. The effect is as follows:

 

 

 

 

 

4, Has the icon library, can be used with other components

In jQuery Mobile, you can add icons for many components by setting data-icon. For example, you can add icons for buttons:

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

The effect is as follows:

 

 

 

 

In QUI, you can also use the icon library to add icons to many components. For example, add the icon code for 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

In addition to tag creation, components in jQuery Mobile and QUI also support dynamic creation of dom nodes.

 

The following describes how to dynamically create components in jQuery Mobile:

Create a dom node dynamically, add it to the page, and call the create Method for rendering.

The code format is as follows:

$ (Component dom tag). appendTo (". ui-page"). trigger ("create ");

 

You can dynamically create components in QUI as follows:

Create a dom node dynamically, add it to the page, and call the render method for rendering.

The code format is as follows:

$ (Component dom tag). appendTo ("body"). render ();

 

 

6And supports dynamic modification of components.

When the components in jQuery Mobile and QUI need to be dynamically modified, the attributes of the component are dynamically adjusted, and the refresh method is called to refresh the component. For example

 

The code for dynamically selecting multiple buttons in jQuery Mobile is as follows:

$ ("Input [type = 'checkbox']"). prop ("checked", true). checkboxradio ("refresh ");

 

The code for dynamically selecting an item in the drop-down box of jQuery Mobile is as follows:

Var myselect = $ ("# selectfoo ");

Myselect [0]. selectedIndex = 3;

Myselect. selectmenu ("refresh ");

 

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

$ ("# Sel-1") [0]. selectedIndex = 1;

$ ("# Sel-1"). render ();

 

To disable the drop-down box, the Code is as follows:

$ ("# Sel-1"). attr ("disabled", true );

$ ("# Sel-1"). render ();

In QUI, rendering and refresh are the same method render (), which is automatically judged and processed.

 

 

For more information about the QUI framework, see my previous post:

Http://www.iteye.com/news/26579-ui-web-qui-jquery