Similar to the QUI framework, jQuery Mobile

Similar to the QUI framework, jQuery Mobile

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:

 

1. Traditional labels are rendered in enhanced mode by default 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"

 

 

2. Add special tags to other html tags to create extended components. Well-developed 5-year UI front-end framework!

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:

 

 

 

 

 

3. Add custom attributes for tags to expand component functions. Well-developed 5-year UI front-end framework!

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. You have an icon library that can be used with other components. Well-developed 5-year UI front-end framework!

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. Dynamic Creation of components

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 ();

 

 

6. components support dynamic modification

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 details about the QUI framework, click here to learn about the UI front-end Framework carefully developed for 5 years!

Several Methods for jquery mobile to switch pages

There are several ways to switch pages
1. $. mobile. changePage ('../path/to/page.html ');
2. $. mobile. changePage ('other/page.html ', 'fade', false, false );
You can set the page Switching Effect and define parameters to control whether the page Records history.
3. var pageData = {url: formresults. php, type: 'get', data:
$ ('Form # myform'). serialize ()};
$. Mobile. changePage (pageData );
The url, type, and data of the page are defined as variables for transmission. 4.
Var previousPage = $. mobile. activePage. data ('ui. prevpage ');
$. Mobile. changePage ([previousPage, anotherPreviousPage], 'pop ');
Use changepage to load the third page
5. $. mobile. pageLoading ();/display the loading information
$. Mobile. pageLoading (true); // hide
PageLoading (boolean done)
Function display or hide the page loading prompt information. You can set it in the $. mobile. loadingMessage variable.
6. $. mobile. silentScroll (100 );
SilentScroll (number yPos): scroll the page on the Y axis (0 by default) without triggering the scroll event

Jquery mobile Problems

If you use the data-rel = "back" attribute for a tag, any click on a will simulate the back button, which is the same as the historical button of the browser, the href of the a mark is ignored. This attribute is useful when you link to an existing page, such as the "Homepage", or when a button is generated or used to close a dialog box. When using this feature in your source file, make sure that you provide a meaningful href to point to the URL of the reference page (so that users can use this feature in a C-level browser ). Similarly, remember to use the data-direction = "reverse" attribute instead of returning to the previous page.