A summary of common functions of JQuery mobile Operation HTML5 _jquery

I. $.mobile.changepage () & $.mobile.loadpage ()
1.$.mobile.changepage ()

The $.mobile.changepage () method is automatically invoked when the page is loaded, and if the page is a different "page" in the current document, it will go to the new page to hide the old page; If the page is an external page, that is, the page is not in the same document as the current page (essentially a new DOM), $.mobile.changepage () first invokes $.mobile.loadpage () to insert the elements of the external page into the DOM and then display the new page. This is also a simple repetition of the page loading process.

$.mobile.changepage () has two parameters to (string or object, must) and options (object, optional), as follows:

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

To is the necessary parameter with a value of string (string, such as "about/us.html") or object (such as $ ("#about"), which is mainly for two different pages, string form for external page links, and object For different "page" in the same document, such as "#page2", $.mobile.changepage () is treated as a JQuery object containing this DOM, that is $ (' #page2 '), and $.mobile.changepage () The inside will judge the form of the to parameter, and if string, call $.mobile.loadpage () to insert the elements of the external page into the DOM, and then display the page.

(2)--options (object, optional)

The options are optional, with the Value object (object), which contains multiple properties that store the various parameters of a page, based on which JQuery Mobile controls how to load the page and initializes the page. The specific property values are as follows:

Allowsamepagetransition (Boolean, Default: false) by default, $.mobile.changepage () does not ignore requests to jump to the current page. If you set this property to "true", you can allow this request

Changehash (Boolean, default: TRUE) determines whether the hash value on the address bar should be updated.

Data (object or string, default: undefined) when an Ajax request is sent. Available only if the value of the to parameter is a URL.

Dataurl (string, Default: undefined) to update the URL on the address bar of the browser when the browser finishes page conversion. If not specifically specified, the Data-url property value is used.

Pagecontainer (jquery collection, default value: $.mobile.pagecontainer) Specifies the jquery object that contains the DOM object for the page.

Reloadpage (Boolean, default: false) forces the page to be refreshed, even if the DOM of the page container is ready to perform a refresh. Available only if the value of the to parameter is a URL.

Reverse (Boolean, default: false) sets the orientation of the page transitions animation. Page transitions are reversed when this property is set to true.

Role (string, default: undefined) uses the Data-role value when displaying the page. By default, undefined depends on the @data-role property value of the element (Data-role value on the label).

Showloadmsg (Boolean, Default: TRUE) sets whether the load prompt is displayed when an external page is loaded.

Transition (String, Default: $.mobile.defaultpagetransition) sets the scene animation used when the page is loaded.

Type (string, default: "Get") sets the method ("get" or "post") to use when requesting a page. Available only if the value of the to parameter is a URL.

Here's an example of how $.mobile.changepage () is used, and manually calling the method can trigger a jump to a new page, for example, when a Web Apps error occurs, you can jump to a page that prompts for errors.

Go to the "About Us" page and use the "slideup" transition animation
$.mobile.changepage ("about/us.html", {transition: "Slideup"});
 
Go to the Search results page, use form data from ID search, and change the page request mode to "POST"
$.mobile.changepage (' searchresults.php ', {
  t ype: "Post",
  Data: $ ("Form#search"). Serialize ()
});
 
Go to the Confirm page and use the pop transitions animation to not update the history (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 that prompts for errors.

$ (function () {
  ///Error
  //"Slideup" pop-up dialog box prompts for error
  $.mobile.changepage (' ... /alerts/confirm.html ', {
    transition: "Slideup", Role
    : "Dialog"
  }
);

2.$.mobile.loadpage ()

As described above, $.mobile.loadpage () is used to load an external page, but loading here refers to inserting elements of an external page into the current DOM and making JQuery mobile enhancements to the content of the page before inserting it. The method is invoked by $.mobile.changepage (), provided that the first argument to $.mobile.loadpage () is string (that is, the page loaded is an external page). This method simply inserts a DOM operation and does not affect the currently active page, so it can be used to load the page in the background (just insert the DOM without displaying the page), and the method returns a deferred object that contains information about the success of the page request, and increases and inserts the DOM in the page And then decompose the object.

$.mobile.loadpage () has two parameter URLs (string or object, must) and options (object, optional), as follows:

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

The value of this parameter can be either string or object, regardless of its form, and must be an absolute or relative URL. If this method is called by $.mobile.changepage (), the parameter value is the to parameter value of $.mobile.changepage ().

(2)--options (object, optional)

The option is an optional parameter whose value is object, which is actually the option parameter value of $.mobile.changepage () when the method is called by $.mobile.changepage (). So this object is the same as the option value of $.mobile.changepage (), and its specific property values refer to the property values of the options in $.mobile.changepage ().

Here is a reference to the use of $.mobile.loadpage (), which can be manually invoked to load the elements of an external page in the background without affecting the currently active page.

Load the "About Us" page into DOM
$.mobile.loadpage (' about/us.html ');
 
Go to the Search results page, use form data from ID search, and change the page request mode to "POST"
$.mobile.loadpage (' searchresults.php ', {
  typ E: "Post",
  Data: $ (' Form#search '). Serialize ()
});

Two. $.fn.jqmdata () & $.fn.jqmremovedata ()
when jquery Mobile is used on the page, jquery Mobile uses jqmdata and jqmremovedata instead of the data and Removedata methods of the jquery core (note that this includes the $.fn.data, $.fn.removedata, $.data, $.removedata, and $.hasdata), these two methods automatically get and set the namespace of the Data property (even if the namespace is not currently used).

The parameters of the two methods correspond to the parameters of the data and Removedata methods of JQuery, as follows:

(1)--jqmdata (Jquery.data ())

element with the DOM object associated with the Data property
Named string for key data
Values of the Value data property
(2)--jqmremovedata (Jquery.removedata ())

Element is the DOM object associated with the data property that needs to be removed
Name string of data to remove
Note: When looking for an element through the JQuery Mobile data attribute, use a custom selector: Jqmdata (), which automatically merges the namespace of the Data property when querying the element. For example, you should use $ (' Div:jqmdata (role= "page) ') instead of $ (' div[data-role=" page] '), as the former is automatically mapped to $ ("div[data-" + $.mobile.ns + ' role= ') Page "], without forcing the selector to be connected to the namespace. For example: The namespace is RN, if the latter is $ (' div[data-rn-role= ' page] '), then if the namespace is changed, the selector is invalidated, and the former is automatically mapped to the current selector, even if the namespace does not invalidate the selector.

There are exceptions, however, to select the data attribute in the namespace based on the URL value, for example, JQuery Mobile can use: Jqmdata (URL) to track where a page is coming from, and to select the data attribute in the space based on the namespace in the URL. This requires that you fill in a valid URL in the brackets of the selector.

Three. $.fn.jqmenhanceable ()
This is the way to determine if an element is to be enhanced with jquery mobile by default, where all jquery mobile components are put into the jquery mobile enhancement set to give another function for jquery mobile enhancements, including adding a phase Should be HTML, CSS class and interactive. This is the default method for JQuery Mobile, and there is no optional argument, but there is still a notable point in the method's implementation function, which determines the value of the default configuration $.mobile.ignorecontentenabled, if true, The DOM parent node of the JQuery object that invoked the method is traversed, and if data-enhance = "false" is set on the parent node label, the DOM object is not added to the enhanced set. In fact, the official JQuery Mobile document does not elaborate on the specific use of $.fn.jqmenhanceable (), but instead uses a lot of space to introduce this note.

It is also important to note that traversal operations design all the parent nodes of an element, so that even traversing a parent node of a very small set of JQuery objects consumes a lot of resources and development requires careful use. It is recommended that you do not use Data-role to trigger the appropriate component if you have explicitly developed an element that does not need to be enhanced.

And how to set the value of $.mobile.ignorecontentenabled, you can refer to the "Using JQuery Mobile and HTML5 development Web App--jquery Mobile default configuration and Event Basics"

Four. $.fn.jqmhijackable ()
This is the way to determine if an element joins jquery Mobile Ajax navigation, which is handled using AJAX, similar to $.fn.jqmenhanceable (), which, by default, will be executed for all links and forms so that they can join jquery Mobile Ajax handles the collection and gives the other function a handle. Inside JQuery Mobile, this method and $.fn.jqmenhanceable () ultimately call the Haveparents method to determine whether the element should be added to the appropriate collection. Therefore, the default configuration $.mobile.ignorecontentenabled is judged by the execution of this method, and if true, the DOM parent node of the JQuery object that invokes the method is traversed, and if Data-ajax = "false" is set on the label on the parent node, The DOM object is not added to the Ajax navigation set. Of course, when you use this feature, you also need to pay attention to the large amount of resource consumption that traversal brings.

Five. $.mobile.loading ()
The method begins with the introduction of JQuery Mobile 1.2, controls the display or hidden page load information, contains two parameters, the first is to control the page information load or not, only "show" and "Hide" two values, the second parameter is a multiple attribute object, the specific properties are as follows:

Theme (string, default value: "A") load the theme style of the Information Bar
Text (string, default value: "Loading") loading the text of an information bar
TextOnly (Boolean, default: false) If set to true, the "spinner" picture (that is, the spin load hint, 1.0, and previous versions as a bar-load chart) is hidden when the page is loaded.
Textvisible (Boolean, default: false) If set to True, the text content of the prompt is placed under spinner
HTML (string, default value: "") if a property value is not NULL, this value replaces the entire load bar's HTML
The following examples illustrate how $.mobile.loading is used.

The prompt page is loading
$.mobile.loading (' Show ');
 
The Load Information Bar uses the theme style "B" to customize the hint text content, hiding the "spinner" Picture
$.mobile.loading (' show ', {theme: ' B ', text: ' Load in force ', textonly:true} );

The following two methods are not supported in JQuery Mobile 1.2

Six. $.mobile.hidepageloadingmsg ()
Display page load information, based on $.mobile.loadingmessage configuration, with three specific parameters

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 would be hidden the ' is shown.
Example:

Use the theme style "B" to customize the content of the hint text, hiding the "spinner" Picture
$.mobile.showpageloadingmsg (' B ', ' This is only a test ', true);

In JQuery Mobile 1.2, it is recommended to use $.mobile.loading (' show ') instead.

Seven. $.mobile.hidepageloadingmsg ()
hidden page load information, based on $.mobile.loadingmessage configuration, no parameters.

Example:

Hide page load hint information
$.mobile.hidepageloadingmsg ();

In JQuery Mobile 1.2, it is recommended to use $.mobile.loading (' hide ') instead.

Eight. $.mobile.fixedtoolbars.show ()
docked toolbars (including fixed header and tail columns) can be toggled between display and hide by clicking on the screen, and this method displays the toolbar manually.

It has a parameter immediately (Boolean, optional). Set it to true, and all docked toolbars for the currently active page will be displayed immediately. If set to false or unspecified, it is displayed through a 100ms gradient. Note events such as the resize and scroll of the document result in additional latency displays.

Example:

Displays a docked toolbar and displays the default gradient animation
$.mobile.fixedtoolbars.show ();
 
Show docked toolbar
$.mobile.fixedtoolbars.show (true) immediately;

In jquery Mobile 1.1, this method is not recommended, and jquery Mobile has no clear reason, but according to the jquery mobile habit, this is probably due to a lot of instability in this approach, as mentioned above, where some of the methods appear with additional latency display, This is a bad influence on Web Apps, which brings unpredictable problems to the web Apps from the bottom up.

Nine. $.mobile.fixedtoolbars.hide ()
docked toolbars (including fixed header and tail columns) can be toggled between display and hide by clicking on the screen, and this method hides the toolbar manually.

Similar to $.mobile.fixedtoolbars.show (), it has a parameter immediately (Boolean, optional). Set it to true, and all fixed toolbars for the currently active page will be hidden immediately. If set to false or unspecified, it is hidden through a 100ms gradient. Note events such as resize and scroll of the document also increase the time to hide animations.

Example:

Hides the docked toolbar and displays the default gradient animation
$.mobile.fixedtoolbars.hide ();
 
Hide docked toolbar
$.mobile.fixedtoolbars.hide (true) immediately;

This method is also 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 placed in an object to facilitate access to these URL-related components. When a relative form of URL is parsed, the returned object automatically adds an empty string as a value for the elements not in the absolute form URL (such as protocol, host, etc). In addition, when the parsed URL is not authority (see the list below), the Pathname property in the returned object contains the data after the communication protocol colon.

$.mobile.path.parseurl () has only one parameter URL (string, optional) whose value is the relative or absolute form of a URL.

In addition, $.mobile.path.parseurl () returns an object that contains a URL-related component that mimics the Location object in the browser. The specific properties are as follows:

A section of the

hash URL that begins with the first "#" in the URL. The host name and port of the
host URL. The host name of the
hostname URL. The
the original URL to which href is resolved. The path to 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 transfer Protocol, so this value can be an empty string most of the time.
Protocol Data Transfer Protocol, in the URL ': ' Before the part. The portion of the
search URL that starts with the "?" character, representing the URL query. It also includes additional elements that are provided to the portal, such as some common forms of developer access. The
Authority URL's user name, password, host name
Directory pathname, and does not include any file names.
Domain URL in the data Transfer Protocol and user name, password, host name and other information, that is, domains. The part of the file in the
FileName pathname, and does not include any directory names. The
Hrefnohash subtracts the hash portion from the original URL. The
Hrefnosearch subtracts the hash and search portions from the original URL. The password part of the
Password authority. The username part of the
Username authority.
Example:

Resolves a URL
var obj = $.mobile.path.parseurl ("http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234");
 
Parsing this URL returns 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 :p assword@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/
//obj.filename:   Inbox
// Obj.search:    msg=1234&type=unread
//Obj.hash:     #msg-content

Eleven. $.mobile.path.makepathabsolute ()
converts a relative file or directory path to an absolute path.

has two parameter RelPath (string, must) and Abspath (string, must), as follows:

(1)--relpath (string, must)

The value is a relative file or directory path.

(2)--abspath (string, must)

An absolute file or relative path for parsing.

$.mobile.path.makepathabsolute () returns a string containing the absolute path version of the relative path.

Example:

Back:/a/b/c/file.html
var abspath = $.mobile.path.makepathabsolute ("file.html", "/a/b/c/bar.html");
 
Back:/a/foo/file.html
var abspath = $.mobile.path.makepathabsolute (". /.. /foo/file.html ","/a/b/c/bar.html ");

Twelve. $.mobile.path.makeurlabsolute ()
converts a relative URL to an absolute URL.

has two parameter Relurl (string, required) and Absurl (string, required), as follows:

--relurl (string, required)

A URL of a relative form.

--absurl (string, required)

An absolute file or relative path for parsing.

$.mobile.path.makeurlabsolute () returns a string containing an absolute URL version of the relative URL.

Example:

Back: http://foo.com/a/b/c/file.html
var absurl = $.mobile.path.makeurlabsolute ("file.html", "http://foo.com/a/ B/c/test.html ");
 
Back: http://foo.com/a/foo/file.html
var absurl = $.mobile.path.makeurlabsolute (". /.. /foo/file.html "," http://foo.com/a/b/c/test.html ");
 
Back: http://foo.com/bar/file.html
var absurl = $.mobile.path.makeurlabsolute ("//foo.com/bar/file.html", "http ://foo.com/a/b/c/test.html ");
 
Back: http://foo.com/a/b/c/test.html?a=1&b=2
var absurl = $.mobile.path.makeurlabsolute ("? a=1&b=2", " Http://foo.com/a/b/c/test.html ");
 
Back: Http://foo.com/a/b/c/test.html#bar
var absurl = $.mobile.path.makeurlabsolute ("#bar", "http://foo.com/a/b /c/test.html ");

13. $.mobile.path.issamedomain ()
a domain that compares two URLs.

With two parameter url1 (string, optional) and Url2 (string, optional) The following are the details:

--URL1 (string, optional)

A relative URL.

--URL2 (string, optional)

Url2 (string, required) an absolute URL that needs to be resolved.

The return value is a Boolean variable and returns "true" if two fields match, otherwise returns "false".

Example:

Return: True
var same = $.mobile.path.issamedomain ("http://foo.com/a/file.html", "http://foo.com/a/b/c/test.html" );
 
Return: false
var same = $.mobile.path.issamedomain ("file://foo.com/a/file.html", "http://foo.com/a/b/c/test.html ");
 
Return: false
var same = $.mobile.path.issamedomain ("https://foo.com/a/file.html", "http://foo.com/a/b/c/ Test.html ");
 
Return: false
var same = $.mobile.path.issamedomain ("http://foo.com/a/file.html", "http://bar.com/a/b/c/test.html ");

14. $.mobile.path.isrelativeurl ()
Determines whether a URL is a relative URL.

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

The return value is a Boolean variable and returns "true" if the URL is a relative form, otherwise returns "false".

Example:

Return: false
var isrel = $.mobile.path.isrelativeurl ("http://foo.com/a/file.html");
 
Return: True
var isrel = $.mobile.path.isrelativeurl ("//foo.com/a/file.html");
 
Return: True
var isrel = $.mobile.path.isrelativeurl ("/a/file.html");
 
Return: True
var isrel = $.mobile.path.isrelativeurl ("file.html");
 
Return: True
var isrel = $.mobile.path.isrelativeurl ("? a=1&b=2");
 
Return: True
var isrel = $.mobile.path.isrelativeurl ("#foo");

xv. $.mobile.path.isabsoluteurl ()
Determines whether a URL is an absolute URL.

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

The return value is a Boolean variable and returns "true" if the URL is an absolute form, otherwise returns "false".

Example:

Return: True
var isabs = $.mobile.path.isabsoluteurl ("http://foo.com/a/file.html");
 
Return: false
var isabs = $.mobile.path.isabsoluteurl ("//foo.com/a/file.html");
 
Return: false
var isabs = $.mobile.path.isabsoluteurl ("/a/file.html");
 
Return: false
var isabs = $.mobile.path.isabsoluteurl ("file.html");
 
Returns: false
var isabs = $.mobile.path.isabsoluteurl ("? a=1&b=2");
 
Return: false
var isabs = $.mobile.path.isabsoluteurl ("#foo");

16. $.mobile.path.get ()
This method can be used to determine the directory portion of a URL. If there is no backslash at the end of the URL, the last part of the URL is considered to be the file name. This situation for the webmaster should be not unfamiliar, such as http://kayosite.com/aaa/, the last part of the URL "aaa/" should be a directory, and Http://kayosite.com/aaa/xxx.zip the last part of " Xxx.zip "should be a filename. This is also the reason that Kayo recommended that you need 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 return value is the part of the directory in the URL.

Example:

Back: http://foo.com/a/
var dirname = $.mobile.path.get ("http://foo.com/a/file.html");
 
Back: http://foo.com/a/
var dirname = $.mobile.path.get ("http://foo.com/a/");
 
Back: http://foo.com/a
var dirname = $.mobile.path.get ("http://foo.com/a");
 
Back://foo.com/a/
var dirname = $.mobile.path.get ("//foo.com/a/file.html");
 
Back:/a/
var dirname = $.mobile.path.get ("/a/file.html");
 
Returns: "" "
var dirname = $.mobile.path.get (" file.html ");
 
Back:/
var dirname = $.mobile.path.get ("/file.html");
 
Back:? a=1&b=2
var dirname = $.mobile.path.get ("? a=1&b=2");
 
Back: Foo
var dirname = $.mobile.path.isabsoluteurl ("#foo");

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

18. $.mobile.silentscroll ()
silently scrolls to a Y-value and does not trigger any events.

It has one argument, YPos (number, defaults to 0), and its value is the Y position that needs to be scrolled to.

Nineteen. $.mobile.activepage
references the currently active page.

Twenty. A call to a method
1. Method invokes the introduction of the corresponding JavaScript

When introducing the custom JQuery Mobile default configuration, it has been explained that the corresponding JavaScript statements need to be placed between the jquery library and the jquery Mobile library, while the jquery mobile approach is a call to jquery mobile. Therefore, it needs to be invoked after the introduction of the JQuery Mobile Library, as follows:

<script src= "Jquery.min.js" ></script>
<!--introduce custom jquery Mobile default configuration corresponding JavaScript-->
< Script src= "Custom-mobile.js" ></script>
<script src= "Jquery-mobile.min.js" ></script>
<!--introduce jquery mobile calls, including the jquery mobile approach, event detection, and all application JavaScript-->
<script src= "My-site.js" >& Lt;/script>

2. Call to Method

For jQuery developers, you should be more accustomed to executing JavaScript after triggering ready events, such as:

$ (document). Ready (function () {
  //execute JavaScript
});

or shorthand for,

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

This shows that when the DOM is already loaded and the page (including the image) is fully rendered, the ready event is triggered.

In the previous article in the series, Kayo introduced the Pageinit event, which triggers when the DOM is loaded (including the DOM enhancements of the JQuery Mobile to the element), that is, it triggers earlier than the ready.

But because the JQuery Mobile-driven Web site is navigated by Ajax, even if a document contains multiple ' page ', the Ready event is triggered when the first ' page ' DOM and content is loaded, and pageint only needs the first ' page ' D The OM is triggered when it finishes loading.

Finally, using that event as the right time to start calling the method involves a lot of convenient considerations, and the developer should make a choice based on the actual situation.

The following example shows an example of how to invoke the jquery mobile method, and because of the many methods of jquery mobile, only the $.mobile.changepage () method is used here to demonstrate how to invoke 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 example above, you jump to an external page by detecting a left stroke event trigger, using the ' slide ' transition animation and displaying a new page as a dialog box.