jquery Mobile Web (5) _jquery

Ordered list

 <div data-role= "Content" >
<ol data-role= "ListView" Data-theme= "G" >
<li><a "#" & Gt List 1</a></li>
<li><a href= "#" > List 2</a></li>
<li><a h ref= "#" > List 3</a></li>
</ol>
 </div>

Read-only List

 <div data-role= "Content" >
<ul data-role= "ListView" data-inset= "true" >
<li><a href = "#" > List 1</a></li>
<li><a href= "#" > List 2</a></li>
<li ><a href= "#" > List 3</a></li>
</ul>
 </div>

List of divisible buttons

 <div data-role= "Content" >
<ul data-role= "ListView" Data-theme= "G" data-split-icon= "gear" Data-split-theme= "D" >
<li><a href= "#" > List 1</a><a href= "#" ></a></li>< c3/> <li><a href= "#" > List 2</a><a href= "#" ></a></li>
<li><a H ref= "#" > List 3</a><a href= "#" ></a></li>
</ul>
 </div>

Contains a list of bubble counts

 <div data-role= "Content" >
<ul data-role= "ListView" Data-theme= "G" >
<li><a "#" & Gt List 1</a><span class= "Ui-li-count" >33</span></li>
<li><a href= "#" > List 2& Lt;/a><span class= "Ui-li-count" >222</span></li>
<li><a href= "#" > List 3</a ><span class= "Ui-li-count" >111</span></li>
</ul>
 </div>

Configuration options.

When jquery Mobile starts running, it triggers a mobileinit event on the Document object. We can override the default corresponding function through this event. Configure various property parameters.

Use the following methods:

$ (document). Bind ("Mobileinit", function () { 
//Add user custom code here.　　　　
 })
 <script src= "Jquery.js" ></script>
 <script src= "JS file for custom event handlers" ></script>
 < Script src= "Jquerymobile.js" ></script>

Provide a developer with an object: $.mobile. The purpose of this object is to configure various options and the default configuration.

$ (document). Bind ("Mobileinit", function () { 
$.mobile.foo = "foo"; l
})

Configurable options:

1.ns

Type: string, default Non-empty string.
Usage: $.mobile.ns= "MyNamespace"
Description: Customize the namespace to avoid namespaces.

2.autolnitializePage

Type: Boolean type, default to True.
Usage: $.mobile.autoinitializepage = False
Description: By default, when a page DOM element is ready, the program automatically loads the $.mobile.initializepage function if set to

False

The page is not set up and remains hidden.

3.subPageUrlKey

Type: string, default value is Ui-page.

Usage: $.mobile.subpageurlkey = "page"

Description: Change the key parameter name in the URL address of the jquery Mobile view, and change the selected parameter to Subpageurlkey = "page" When the URL address

will be changed into

Example.html?page=subpage.

4.activePageClass

Type: string, default value is Ui-page-active

Usage: $.mobile.activepageclass = "Ui-ns-page-active".

Description: The main feature is the view CSS style when customizing the active status page and over state.

5.activeBtnClass

Type: string, default value is Ui-btn-active

Usage: $.mobile.activebtnclass = "Ui-ns-page-active"

Description: The main function of this option is to customize the style of the girl that is active.

6.ajaxEnabled

Type: Boolean, default value is True

Usage: $.mobile.ajaxenabled = False

Description: Sets whether to load a page or submit data using AJAX when clicking a connection or submitting a form or button.

7.hashListeningEnabled

Type: Boolean, default value is true;

Usage: $.mobile.hashlisteningenabled = False

Description: Sets whether to automatically listen for and handle location.hash changes, and if set to False, you can handle the hash changes manually, or simply use the connection

Address to jump.

8.defaultPageTransition

Type: string, default value is slide

Usage: $.mobile.defaultpagetransition = "Fade"

Description: This option parameter mainly sets the page to switch the default effect, if set to none, the page switch will not have effect, optional parameter slideup (slide in left and right)

Slideup (slide up from bottom) slidedown (slide in from top) pop (by center)

9.touchOverflowEnabled

Type: Boolean, default value is False

Usage: $.mobile.touchoverflowenabled = True

Description: Whether to use the original eco-rolling characteristics of the equipment.

10.defaultDialogTransition

Type: string, default value is Pop

Usage: $.mobile.defaultdialogtransition = "None"

Description: Sets the pop-up effect of the Ajax dialog box without an excessive effect if set to none.

11.minScrollBack

Type: string, default value is 150

Usage: $.mobile.minscrollback = "200"

Description: Scrolling position memory is triggered when scrolling exceeds the height set.

12.loadingMessage

Type: String default value is loading

Usage: $.mobile.loadingmessage = "in Load"

Description: Sets the text content of the page load state. If set to False, no content is displayed.

13.pageLoadErrorMessage

Type: string, default value is Error Loading Page

Usage: $.mobile.pageloaderrormessage = "Page load Failed"

Description: Sets the text content of the hint that appears when an AJAX page request fails

14.gradeA

Type: Boolean value, default value is $.support.mediaquery value

Usage: $.mobile.gradea

Description: Returns True when the browser meets all of the supported conditions.

3 Disadvantages of JQuery Mobile and HTML5

1. Slower than the native program: The biggest drawback to me is that, even on the latest Android and iOS hardware (dual-core Tegra 2 Android phones, dual-core iPad2 tablet), JQuery mobile apps are significantly slower

In the native program. Especially on Android, browsers are slower and more bug-prone than iOS (though Google is a web-focused company). I didn't test my program on an earlier Android device, and maybe it didn't work (like Android G1). I believe that in the next 12-24 months, the speed of hardware will be increased quickly (for example, four-core equipment will be listed in 2011 soon), performance may soon not become a problem. But today, it is really a drawback. If you only focus on iOS, you can look forward to the performance of the browser, at least it is reliable in this respect (unlike Android, BlackBerry, etc.)

2. Quirky (Cross-browser, cross-platform Development): JQuery Mobile is still a beta version, so I've encountered a lot of bugs. That is, the jquery team is also actively responding to questions raised on GitHub. I think one of the biggest problems is the quirky performance of browsers on different mobile platforms. This problem has been criticized by people. The app may look odd-although I think the jquery mobile team did a great job on widgets and themes, it does look a lot different from the native program. It's not clear how much this problem affects users, but it needs to be noticed.

3. Limited capability vs Native Program: It is clear that JavaScript running on browsers does not fully access many of the features of the device. A typical example is the camera. However, tools like phonegap can help solve many common problems. In fact, I've started to deploy several versions of my application via PhoneGap to iOS and Android, using native Facebook bindings, and the effect is impressive. I will write some experiences of using PhoneGap in the future blog.