Summary of common functions of jQuery Mobile for HTML5 operations, jqueryhtml5

Summary of common functions of jQuery Mobile for HTML5 operations, jqueryhtml5

1. $. mobile. changePage () & $. mobile. loadPage ()
1. $. mobile. changePage ()

$. Mobile. the changePage () method is automatically called when the page is loaded. If the page is different from the "page" in the current document, the new page is displayed to hide the old page; if this page is an external page, that is, the page is not in the same document as the current page (essentially the new page is not in the current DOM), $. mobile. changePage () first calls $. mobile. loadPage () inserts the elements of the external page into the DOM and then displays the new page. This is a simple review of the page loading process.

$. Mobile. changePage () has two parameters: to (string or object, required) and options (object, optional), as follows:

(1) -- to (string or object, required)

To is a required parameter. Its value can be string (such as "about/us.html") or object (such as $ ("# about ")), this is mainly for two different pages. The string form is the external page Link, and the object is different "pages" in the same document, such as "# page2", $. mobile. changePage () will process it as a jQuery object containing the DOM, that is, $ ('# page2'), while $. mobile. changePage () internally determines the form of the to parameter. If it is a string, $ is called. mobile. loadPage () inserts the elements of the external page into the DOM and then displays the page.

(2) -- options (object, optional)

Options is an optional parameter and its value is object. This object contains multiple attributes that store various parameters of a page, based on these parameters, jQuery Mobile controls how to load and initialize pages. The specific attribute values are as follows:

AllowSamePageTransition (boolean, default value: false) by default, $. mobile. changePage () does not handle the request to jump to the current page. If this attribute is set to "true", such requests can be allowed.

ChangeHash (boolean, default value: true) determines whether the hash value in the address bar should be updated.

Data (object or string, default value: undefined) data sent during Ajax requests. It is only available when the value of the to parameter is a URL.

DataUrl (string, default value: undefined) Update the URL in the address bar of the browser when the browser completes page conversion. If this parameter is not specified, the data-url attribute value is used.

PageContainer (jQuery collection, default value: $. mobile. pageContainer) specifies the jQuery object that contains the DOM object of the page.

ReloadPage (boolean, default value: false) force refresh page, even if the page container DOM is ready, refresh will be executed. It is only available when the value of the to parameter is a URL.

Reverse (boolean, default value: false) sets the orientation of Page Transition animation. When this attribute is set to "true", the page turns back.

Role (string, default value: undefined) when displaying the page, use the data-role value. The default value is undefined, which is determined by the @ data-role attribute value of the element (the value of data-role on the label ).

ShowLoadMsg (boolean, default value: true) sets whether to display the loading prompt when loading an external page.

Transition (string, default value: $. mobile. defaultPageTransition) sets the transition animation used for page loading.

Type (string, default: "get") is used to set the request page ("get" or "post "). It is only available when the value of the to parameter is a URL.

Here, an example is provided to illustrate $. mobile. changePage () method of use. Manually calling this method can trigger jump to a new page. For example, when an error occurs in Web Apps, you can jump to a page with an error prompt.

// Transfer to the "about us" Page and use the "slideup" transfer animation $. mobile. changePage ("about/us.html", {transition: "slideup"}); // transfer to the "search results" Page, using form data from search with the id, change the page request method to "post" $. mobile. changePage ('searchresults. php', {type: "post", data: $ ("form # search "). serialize ()}); // transfer to the "confirm" Page and use the "pop" transfer animation. Do not update the history (the address bar hash value is not updated) $. mobile. changePage ('.. /alerts/confirm.html ', {transition: "pop", reverse: false, changeHash: false });

When an error occurs, you can jump to a page with an error prompt.

$ (Function () {// an error occurred // a "slideup" dialog box is displayed, prompting you that an error occurred. $. mobile. changePage ('.. /alerts/confirm.html ', {transition: "slideup", role: "dialog "});});

2. $. mobile. loadPage ()

As described above, $. mobile. loadPage () is used to load an external page. However, loading here refers to inserting the elements of an external page into the current DOM and enhancing the content of the page with jQuery Mobile before insertion. This method will be called by $. mobile. changePage (), provided that the first parameter of $. mobile. loadPage () is string (that is, the loaded page is an external page ). This method only inserts the DOM and does not affect the activated page. Therefore, it can be used to load the page in the background (only insert the DOM without displaying the page ), this method returns a deferred object, including information about whether the page request is successful or not, and decomposes the object after page enhancement and DOM insertion.

$. Mobile. loadPage () has two parameters: url (string or object, required) and options (object, optional). The details are as follows:

(1) -- url (string or object, required)

The value of this parameter can be string or object. In any form, it must be an absolute or relative URL. If this method is called by $. mobile. changePage (), the value of this parameter is the to parameter value of $. mobile. changePage.

(2) -- options (object, optional)

Options is an optional parameter and its value is object, as shown in figure $. mobile. when changePage () calls this method, the value of this parameter is $. mobile. the options parameter value of changePage. Therefore, this object has the same options value as $. mobile. changePage (). For specific attribute values, see options attribute values in $. mobile. changePage.

The example here describes how to use $. mobile. loadPage (). Manually calling this method can load the elements of an external page in the background without affecting the current activation page.

// Load the "about us" page to DOM $. mobile. loadPage ('about/us.html '); // transfer to the "search results" Page, use the form data from search, and change the page request method to "post" $. mobile. loadPage ('searchresults. php ', {type: "post", data: $ ('form # search '). serialize ()});

Ii. $. fn. jqmData () & $. fn. jqmRemoveData ()
When jQuery Mobile is used on the page, jQuery Mobile uses jqmData and jqmRemoveData to replace the data and removeData methods of jQuery core. (Note that this includes $ in jQuery. fn. data, $. fn. removeData, $. data, $. removeData and $. hasData), these two methods will automatically obtain and set the data attribute namespace (even if the namespace is not used currently ).

The parameters of these two methods correspond to the parameters of jQuery's data and removeData methods, as follows:

(1) -- jqmData (jQuery. data ())

DOM object associated with the data property of element
Name string of key data
Value data Attribute value
(2) -- jqmRemoveData (jQuery. removeData ())

Element and the DOM object associated with the data attribute to be removed
Name: The name string of the data to be removed.
Note: When you use the jQuery Mobile data attribute to find an element, use the custom selector jqmData (), which automatically merges the namespace of the data Attribute when querying the element. For example, you should use $ ('div: jqmData (role = "page") ') instead of $ ('div [data-role = "page"]'), because the former will be automatically mapped to $ ("div [data-" + $. mobile. ns + 'Role = "page"] '), instead of forcibly connecting the selector to the namespace. For example, if the namespace is rn and the latter is $ ('div [data-rn-role = "page"] '), if the namespace is changed, the selector will expire, and the former will be automatically mapped to the current selector, even if the namespace is changed, this selector will not become invalid.

However, there are exceptions: select the data Attribute Based on the URL value in the namespace. For example, jQuery Mobile can use jqmData (url) to track where a page comes from, select the data attribute in the Space Based on the namespace in the URL. This requires a valid URL in the brackets of the selector.

Iii. $. fn. jqmEnhanceable ()
This is a method to determine whether jQuery Mobile reinforcement is required for an element. By default, all jQuery Mobile components will use this method to add the jQuery Mobile enhancement set to another function for jQuery Mobile enhancement, including adding HTML, CSS class, and interaction. This is the default method called by jQuery Mobile, and there are no optional parameters, but this method still has a very noteworthy place. Inside the implementation function of the method, the default configuration $ is determined. mobile. the value of ignoreContentEnabled. If it is true, the DOM parent node of the jQuery object that calls this method is traversed. If data-enhance = "false" is set on the parent node label ", this DOM object is not allowed to be added to the enhancement set. In fact, the official document of jQuery Mobile does not elaborate on the specific usage of $. fn. jqmEnhanceable (). Instead, it uses a lot of space to introduce the precautions.

In addition, the traversal operation will design all the parent nodes of the element. Therefore, even traversing the parent node of a small jQuery object set will consume a lot of resources, development requires careful use. If you do not need to enhance an element during development, we recommend that you do not directly use data-role to trigger corresponding components.

For details about how to set the value of $. mobile. ignoreContentEnabled, refer to develop a Web App using jQuery Mobile and HTML5-jQuery Mobile default configuration and event basics.

Iv. $. fn. jqmHijackable ()
This is to determine whether the element is added to the jQuery Mobile Ajax navigation, that is, the method for processing with Ajax, with $. fn. jqmEnhanceable () is similar. By default, it submits and executes all links and forms so that they can be added to the jQuery Mobile Ajax processing set and handed over to another function for processing. In jQuery Mobile, this method and $. fn. jqmEnhanceable () finally call the haveParents method to determine whether elements should be added to the corresponding set. Therefore, this method determines the default configuration $. mobile. ignoreContentEnabled. If it is true, the DOM parent node of the jQuery object that calls this method is traversed. If data-ajax = "false" is set on the label of the parent node ", this DOM object is not allowed to be added to the Ajax Navigation set. Of course, when using this feature, you also need to pay attention to the large amount of resource consumption caused by traversal.

5. $. mobile. loading ()
This method was officially introduced from jQuery Mobile 1.2 to control display or hide page loading information. It contains two parameters. The first one is to control whether the page information is loaded or not, there are only two values: "show" and "hide". The second parameter is a multi-attribute object. The specific attributes are as follows:

Theme (string, default value: "a") loads the theme style of the Information bar.
Text (string, default value: "loading") loads the text content of the Information bar
Textonly (boolean, default value: false) if it is set to true, the "spinner" image will be loaded when the page is loaded (that is, the rotation loading prompt graph. The 1.0 and earlier versions will be the bar loading graph) will be hidden.
TextVisible (boolean, default value: false) if it is set to true, the text content of the prompt will be placed under the spinner
Html (string, default value: "") if a property value is not blank, this value replaces the HTML
The following example illustrates how to use $. mobile. loading.

// The prompt page is loading $. mobile. loading ('show'); // load the Information bar. Use the topic style "B" to customize the text content of the prompt and hide the "spinner" image $. mobile. loading ('show', {theme: 'B', text: 'awesome loading ', textonly: true });

The following two methods are not supported in jQuery Mobile 1.2:

6. $. mobile. hidePageLoadingMsg ()
Display page loading information, which is configured based on $. mobile. loadingMessage. Three parameters are specified.

Theme (string, default: "a") The theme swatch for the message.
MsgText (string, default: "loading") The text of the message.
Textonly (boolean, default: false) If true, the "spinner" image will be hidden when the message is shown.
Example:

// Use the theme style "B" to customize the text content of the prompt and hide the "spinner" image $. mobile. showPageLoadingMsg ('B', 'this is only a test', true );

In jQuery Mobile 1.2, we recommend that you use $. mobile. loading ('show') instead.

7. $. mobile. hidePageLoadingMsg ()
Hide page loading information, which is configured based on $. mobile. loadingMessage and has no parameters.

Example:

// Hide the page loading prompt information $. mobile. hidePageLoadingMsg ();

In jQuery Mobile 1.2, we recommend that you use $. mobile. loading ('hide ') instead.

8. $. mobile. fixedToolbars. show ()
Fixed toolbar (including fixed header and tail columns) can be switched between display and hide by clicking the screen. This method is to manually display the toolbar.

It has an immediately (boolean, optional) parameter ). Set it to true. All fixed toolbar on the current active page will be displayed immediately. If this parameter is set to false or not specified, the gradient is displayed in 100 ms. Note that events such as document resize and scroll will cause extra delay display.

Example:
 

// Display the fixed toolbar and the default gradient animation $. mobile. fixedToolbars. show (); // immediately display the fixed toolbar $. mobile. fixedToolbars. show (true );

In jQuery Mobile 1.1, this method is not recommended. jQuery Mobile does not have a clear reason, but according to jQuery Mobile's habits, this is probably because this method has a lot of instability, as mentioned above, some methods may experience extra latency display, which is a bad factor for creating Web Apps. It will bring unpredictable problems to Web Apps from the underlying layer.

IX. $. mobile. fixedToolbars. hide ()
Fixed toolbar (including fixed header and tail columns) can be switched between display and hide by clicking the screen. This method is to manually hide the toolbar.

Similar to $. mobile. fixedToolbars. show (), it has an immediately (boolean, optional) parameter ). Set it to true. All fixed toolbar on the current active page will be hidden immediately. If it is set to false or not specified, it will be hidden by a 100 ms gradient. Note that events such as document resize and scroll also increase the animation hiding time.

Example:

// Hide the fixed toolbar and display the default gradient animation $. mobile. fixedToolbars. hide (); // immediately hide the fixed toolbar $. mobile. fixedToolbars. hide (true );

This method is not recommended in jQuery Mobile 1.1.

10. $. mobile. path. parseUrl ()
This method is used to parse a URL and its relative form, and its related components are put into an object to facilitate access to these URL-related components. When a relative URL is parsed, the returned object automatically adds an empty string to the components (such as protocol, host, etc) that are not in the absolute URL. In addition, when the parsed URL does not have authority (see the list below), the pathname attribute in the returned object will contain data after the colon of the communication protocol.

$. Mobile. path. parseUrl () has only one parameter URL (string, optional). Its value is the relative or absolute form of a URL.

In addition, $. mobile. path. parseUrl () returns an object that contains URL-related components. The property of this object is to mimic the location object in the browser. The specific attributes are as follows:

A part of the hash URL, starting from the first "#" in the URL.
Host URL host name and port.
The Host Name of the hostname URL.
The original URL parsed by href.
Path of the file or directory referenced by the pathname URL.
The port specified in the port URL. Most URLs depend on the default port used by the data transmission protocol. Therefore, this value may be a Null String in most cases.
Protocol: the data transmission protocol, the part before ':' in the URL.
From "? "The starting part of the character, representing the URL query. It also includes additional components provided to the portal, such as some common forms of developer access.
Authority URL user name, password, Host Name
Directory in directory pathname, excluding any file names.
The data transmission protocol, user name, password, host name, and other information in the domain URL, that is, the domain.
The file section in filename pathname, excluding any directory name.
HrefNoHash removes the hash part from the original URL.
HrefNoSearch removes the hash and search parts from the original URL.
Password authority.
Username in username authority.
Example:

// Parse a URLvar obj =$. mobile. path. parseUrl ("http: // jblas: password@mycompany.com: 8080/mail/inbox? Msg = 1234 "); // parse this URL will return an object containing the following attributes // obj. href: http: // jblas: password@mycompany.com: 8080/mail/inbox? Msg = 1234 & type = unread # msg-content // obj. hrefNoHash: http: // jblas: password@mycompany.com: 8080/mail/inbox? Msg = 1234 & type = unread // obj. hrefNoSearch: http: // jblas: password@mycompany.com: 8080/mail/inbox // obj. domain: http: // jblas: password@mycompany.com: 8080 // obj. protocol: http: // obj. authority: jblas: password@mycompany.com: 8080 // obj. username: jblas // obj. password: password // obj. host: mycompany.com: 8080 // obj. hostname: mycompany.com // obj. port: 8080 // obj. pathname:/mail/inbox // obj. directory:/mail // o Bj. filename: inbox // obj. search :? Msg = 1234 & type = unread // obj. hash: # msg-content

11. $. mobile. path. makePathAbsolute ()
Converts a relative file or directory path to an absolute path.

There are two parameters: relPath (string, required) and absPath (string, required), as follows:

(1) -- relPath (string, required)

The value is a relative file or directory path.

(2) -- absPath (string, required)

An absolute file or relative path used for parsing.

$. Mobile. path. makePathAbsolute () returns a string containing the absolute path version of the relative path.

Example:

// Return:/a/B/c/file.html var absPath = $. mobile. path. makePathAbsolute ("file.html", "/a/B/c/bar.html"); // return:/a/foo/file.html var absPath = $. mobile. path. makePathAbsolute (".. /.. /foo/file.html ","/a/B/c/bar.html ");

12. $. mobile. path. makeUrlAbsolute ()
Converts a relative URL to an absolute URL.

There are two parameters: relUrl (string, required) and absUrl (string, required), as follows:

-- RelUrl (string, required)

A relative URL.

-- AbsUrl (string, required)

An absolute file or relative path used for parsing.

$. Mobile. path. makeUrlAbsolute () returns a string containing the absolute URL version of the relative URL.

Example:

// Return: http://foo.com/a/ B /c/file.htmlvar absUrl = $. mobile. path. makeUrlAbsolute ("file.html", "http://foo.com/a/ B /c/test.html"); // return: http://foo.com/a/foo/file.htmlvar absUrl = $. mobile. path. makeUrlAbsolute (".. /.. /foo/file.html "," http://foo.com/a/ B /c/test.html "); // return: http://foo.com/bar/file.htmlvar absUrl = $. mobile. path. makeUrlAbsolute ("// foo.com/bar/file.html", "http://foo.com/a/ B /c/test.htm L "); // return: http://foo.com/a/ B /c/test.html? A = 1 & B = 2var absUrl = $. mobile. path. makeUrlAbsolute ("? A = 1 & B = 2 "," http://foo.com/a/ B /c/test.html "); // return: http://foo.com/a/ B /c/test.html#barvar absUrl = $. mobile. path. makeUrlAbsolute (" # bar "," http://foo.com/a/ B /c/test.html ");

13. $. mobile. path. isSameDomain ()
Compare the fields of two URLs.

Url1 (string, optional) and url2 (string, optional) parameters are as follows:

-- Url1 (string, optional)

A relative URL.

-- Url2 (string, optional)

Url2 (string, required) is an absolute URL to be parsed.

The return value is a boolean variable. If the two fields match, "true" is returned; otherwise, "false" is returned ".

Example:

// Return: truevar same = $. mobile. path. isSameDomain ("http://foo.com/a/file.html", "http://foo.com/a/ B /c/test.html"); // return: falsevar same = $. mobile. path. isSameDomain ("file: // foo.com/a/file.html", "http://foo.com/a/ B /c/test.html"); // return: falsevar same = $. mobile. path. isSameDomain ("https://foo.com/a/file.html", "http://foo.com/a/ B /c/test.html"); // return: falsevar same = $. mobile. path. isSameDomain ("http://foo.com/a/file.html", "http://bar.com/a/ B /c/test.html ");

Fourteen. $. mobile. path. isRelativeUrl ()
Determine whether a URL is a relative URL.

It has a parameter URL (string, required) and its value is a relative or absolute URL.

The return value is a boolean variable. If the URL is a relative URL, "true" is returned; otherwise, "false" is returned ".

Example:

// Return: falsevar isRel = $. mobile. path. isRelativeUrl ("http://foo.com/a/file.html"); // return: truevar isRel = $. mobile. path. isRelativeUrl ("// foo.com/a/file.html"); // return value: truevar isRel = $. mobile. path. isRelativeUrl ("/a/file.html"); // return: truevar isRel = $. mobile. path. isRelativeUrl ("file.html"); // return value: truevar isRel = $. mobile. path. isRelativeUrl ("? A = 1 & B = 2 "); // return: truevar isRel = $. mobile. path. isRelativeUrl (" # foo ");

Fifteen. $. mobile. path. isAbsoluteUrl ()
Determine whether a URL is an absolute URL.

It has a parameter URL (string, required) and its value is a relative or absolute URL.

The return value is a boolean variable. If the URL is an absolute URL, "true" is returned; otherwise, "false" is returned ".

Example:

// Return value: truevar isAbs =$. mobile. path. isAbsoluteUrl ("http://foo.com/a/file.html"); // return: falsevar isAbs = $. mobile. path. isAbsoluteUrl ("// foo.com/a/file.html"); // return value: falsevar isAbs = $. mobile. path. isAbsoluteUrl ("/a/file.html"); // return: falsevar isAbs =$. mobile. path. isAbsoluteUrl ("file.html"); // return: falsevar isAbs = $. mobile. path. isAbsoluteUrl ("? A = 1 & B = 2 "); // return: falsevar isAbs = $. mobile. path. isAbsoluteUrl (" # foo ");

16. $. mobile. path. get ()
This method can be used to determine the directory of a URL. If there is no backslash at the end of the URL, the last part of the URL is considered as a file name. This situation should be no stranger to the webmaster, such as http://kayosite.com/aaa/, the last part of the URL "aaa/" should be a directory, the last part of the http://kayosite.com/aaa/xxx.zip, "xxx.zip", should be a file name. This is also the reason why Kayo suggested to add a backslash at the end of the URL.

This method has a parameter url (string, required), whose value is a relative or absolute URL.

The returned value is the directory part of the URL.

Example:

// Return: http://foo.com/a/var dirName = $. mobile. path. get ("http://foo.com/a/file.html"); // return: http://foo.com/a/var dirName = $. mobile. path. get ("http://foo.com/a/"); // return: http://foo.com/avar dirName = $. mobile. path. get ("http://foo.com/a"); // return: // foo.com/a/var dirName = $. mobile. path. get ("// foo.com/a/file.html"); // return:/a/var dirName = $. mobile. path. get ("/a/file.html"); // return: "" var dirName = $ . Mobile. path. get ("file.html"); // return:/var dirName = $. mobile. path. get ("/file.html"); // return :? A = 1 & B = 2var dirName = $. mobile. path. get ("? A = 1 & B = 2 "); // return: foovar dirName = $. mobile. path. isAbsoluteUrl (" # foo ");

17. $. mobile. base
Obtain the root element.

18. $. mobile. silentScroll ()
Silently scroll to a value of Y without triggering any events.

It has a parameter, yPos (number, default value: 0), and its value is the Y position to be rolled.

19. $. mobile. activePage
Reference the currently activated page.

20. Call Methods
1. method call corresponding JavaScript Introduction

When introducing the default configuration of custom jQuery Mobile, it was explained that the corresponding JavaScript statements need to be placed between the jQuery Library and the jQuery Mobile library, while the jQuery Mobile method calls jQuery Mobile, therefore, it must be called after the jQuery Mobile Library is introduced, as follows:

<Script src = "jquery. min. js"> </script> <! -- Introduce custom jQuery Mobile default configuration of the corresponding JavaScript --> <script src = "custom-mobile.js"> </script> <script src = "jquery-mobile.min.js"> </script> <! -- Introduce jQuery Mobile call, including jQuery Mobile method, event detection and other all application JavaScript --> <script src = "my-site.js"> </script>

2. Call Methods

For jQuery developers, JavaScript should be executed after the ready event is triggered. For example:

$ (Document). ready (function () {// execute JavaScript });

Or abbreviated,

$ (Function () {// execute JavaScript });

The ready event is triggered when the DOM has been loaded and the page (including the image) is completely displayed.

In the previous article of the series, Kayo introduced the pageinit event, which will be triggered after DOM loading (including jQuery Mobile's DOM enhancement to elements, that is, it is triggered earlier than ready.

However, because jQuery Mobile-driven websites are guided by Ajax, even if a document contains multiple 'pages ', when the first 'page' DOM and content are loaded, the ready event is triggered, and pageint only needs to be triggered after the first 'page' DOM is loaded.

In the end, using that event as the proper time to start calling a method involves many convenient considerations. Developers should make choices based on the actual situation.

The following example illustrates how to call the jQuery Mobile method. Because there are many jQuery Mobile methods, only the $. mobile. changePage () method is used to demonstrate how to call the method. The JavaScript code in the example is as follows:

$(function(){   $("#home").bind('swipeleft', function(){     $.mobile.changePage('./page-2.html', {      transition: "slide",      role: "dialog"    });   });});

In the preceding example, a new page is displayed in the form of a dialog box, which is triggered by a left stroke event.