JQuery Mobile provides APIs for using JavaScript to communicate with the framework (HTML5) and for content management. Specific events are described below.
Document EventsThe Mobileinit event is triggered after the jquery mobile framework is loaded into memory and UI elements are rendered, starting with this event handler to change some of the UI global options. The order in which JQuery mobile document events are executed is usually:
How to use: The Bind method of jquery is usually used to process the document element. $ (document). Bind (' Mobileinit ', function () {}); Location of the code: between jquery and the jquery mobile framework.
Configuration$.mobile can call global properties and useful methods. This framework uses the jquery UI desktop version of the framework's part structure, so-called widgets even managed by the framework controls. each part has an object constructor and a default configuration that can be changed in Mobileinit, which affects every part on the page. a list of parts can be used in JQuery Mobile:page, dialog, collapsible, Fieldcontain, NavBar, ListView, Checkboxradio, Button, slider, TextInput, Selectmenu, Controlgroup and so on. some rich controls are organized into a part, and the text input type uses textinput, and the check and radio buttons belong to the Checkboxradio part. each part has its own object constructor, which represents how each object on the page works and can access the corresponding prototype through $.mobile.<widget_name>.prototype. Each part constructor has an option object that allows you to define the default properties of the part, and $.mobile.page.prototype.options can be used to define the default properties that are applied to each page instance. Note: These configurations are only valid in the Mobileinit event. one of the core features of JQuery Mobile is the AJAX framework for loading external pages. Ajaxenaled=false can be used to disable. Use the Allowcrossdomainpages property to force the framework to support loading external pages. specific configuration please crossing net.
data-* Custom properties are often required to work with jquery mobile. Jquery:var button=$ ("A:jqmdata (role= ' button ')");JQuery Mobile Adds a new filter named Jqmdata and applies the namespaces we specify, which can be replaced by the following code:var button=$ ("A:jqmdata (role= ' button ')");You can also use Jqmdata and jqmremovedate to replace the original data and Removedata functions.
The $.mobile.activepage property can be associated with the current data-role= "page" element, which points to the corresponding jquery Dom object (usually a DIV element):
var currentpageid=$.mobile.activepage.id;
The container of the current page (usually the BODY element) can be accessed through the $.mobile.pagecontainer property The most useful tool is the $.mobile.changepage method, which allows us to jump to another page just as the user clicked on the corresponding link. You can use this method to display internal or external pages in JavaScript. Parameters can be either a string (external link) or a JQuery object that points to an internal page. $.mobile.changepage ("external.html");$.mobile.changepage ($ ("#pageId"));The Second optional argument to the Changepage method is an object, all options: Note: The target page to be loaded must be a jquery mobile document. The $.mobile.loadpage method is used primarily by changepage when loading external pages. You can use LoadPage to preload the specified content and insert it into the DOM, and then use the corresponding jquery Dom object to turn to it using the Changepage method.
for querying the current platform, see < Learn to use 141 pages > for details.
access is available through $.mobile.path. With the query, there is a general absolute and relative path of the conversion, whether the same domain name, relative path and absolute path judgment. a useful parseurl (URL) that returns an object that each property pair should be part of the URL (protocol, hostname, port, pathname, directory, filename, hash, and more).
The $.mobile.getinheritedtheme (Element,defaultswatch) method allows you to get the color swatch that the element should apply based on the color swatch definition or inheritance. $.mobile.silentscroll (Y) scrolls the page to any position, without animation, and without triggering any events. $.mobile.showpageloadingmsg () and $.mobile.hidepageloadingmsg () can display and hide pop-up loading information. $.mobile.fixetollbars.show () and $.mobile.fixedtoolbars.hide () show and hide the docked toolbar. Toolbars can be displayed in full screen or fixed. $.mobile.fixedtoolbars.show (True) displays the toolbar immediately, without fading the animation. Dynamic content Cons: If the user refreshes the current page on a newly created page, the user must listen to the Mobileinit and check (by reading the hash value in the page address or a page event) whether a dynamic page is being loaded or not refreshed. On the second load, the dynamic page will not exist and must be created again as needed. when you use JavaScript to insert other components after page rendering is complete, these components may not render properly if the Create event is not triggered.
creating parts dynamically requires invoking the constructor for the part, which is the jquery function with the same name as the part name. For example:Convert a number of a elements to a button, just: $ ("a"). button ();dynamically Create a: $ ("<a>"). attr ("href", "somewhere,html"). button ();
Add elements to a list view, or modify a check box. To achieve this, you need to call the part function and pass in the string parameter refresh. cannot be refreshed when it is empty. For example: $ ("#list1"). ListView ("Refresh");
Grids can be used to create special parts of a CSS mesh, use an HTML element of a strap element, and turn it into a grid of n columns based on the number of its child elements. How to use: $ ("#element"). Grid ();
For example:$ ("#content"). HTML (newhtmlcontent);$ ("#page1"). Trigger ("create");to update a container, simply trigger the Create event on the page, usually the constructor of each part responds to the page's Create event to check if a corresponding control needs to be created. Handling Events
jquery Mobile documents have different pages (internal or externally loaded), so it is important to consider the loading of jquery mobile pages carefully.
each page (an element with data-role= "page") has a different set of events, some of which can be processed globally (all pages are processed at the same time), and some are only valid for a particular page.
to handle page events globally , you can call $ (document). Bind (), or you can invoke a more explicit $ (": Jqmdata (role= ' page ')"). Bind. or use live instead of bind so that you can bind pages that will be added to the DOM in the future.
pagebeforecreate: The page has been inserted into the DOM, but the component has not yet been created. pagecreate: The page has been created, but the component has not yet been rendered. Pageinit: The page is fully loaded. This should be the most commonly used event on a page. Pageremove: The page has been removed from the DOM (usually this is an AJAX-loaded page and is not currently active).
For those pages that are loaded with Ajax, event handlers are usually bound to $ (document) because the corresponding page is not in the DOM at this time, and the corresponding handler cannot be bound. Available Load events:Pagebeforeload: Executes before all AJAX requests are completed. Pageload: Executes when a new page has been loaded and inserted into the DOM. pageloadfailed: Specifies that the page cannot be loaded when it is executed. these event handlers will receive two parameters, an event object, and a data object. The first parameter has a Preventdefault () method, which forces the framework to not display the default error message warning and provide its own UI. for the second parameter, please refer to the official website.
A page can be initialized once, but users can move forward and backward in the history of page access. events are divided into page change events and transition events.
Valid page change events include the following: Pagebeforechang: Executes before the page changes occur and before the transition begins. Pagechange: Executes after the page change is complete. pagechangefailed: Execution When page changes cannot be completed. each of the above event handlers accepts two parameters. ToPage: If the target page is an external page, the value is the URL string for the target page, or the DOM object for the target page if the internal page is the value. options: Same as the option to send to $.mobile.changepage. The
following are some of the available transition events: Pagebeforeshow: Executes before the page transitions and displays (the page is still hidden). Pageshow: Executes when the page has finished loading transitions and is displayed on the screen. Pagebeforehide: Executes before the page is hidden (the page is still visible). pgehide: The page has finished unloading the transition and is hidden when it is executed. handlers for each transition event can receive a parameter that is a jquery (encapsulated DOM) object of the relevant page. If it is a display event that corresponds to an object on the previous page, or if it is a hidden event, the corresponding object is the next page.
Each part that dynamically displays or hides content, such as collapsible, triggers a updatelayout event because the page layout has changed.
Orientationchange event. Force this event to be triggered only when the width and height values are updated, and you can execute code $.mobile.orientationchangeenabled=false.The handler for this event will receive a string as the first argument, position portrait (for Portrait) or Landscape (for portrait).
tap: Triggered when a quick touch is on the screen. Taphold: Triggered when the user touches the screen and keeps holding down for one second. Useful when displaying a context menu. swipeleft: Triggers when the user's finger is drawn from right to left. swiperight: Triggers when the user's finger is drawn from left to right.
A virtual Click event is a wrapper that can be used to replace touch or click events, based on the different running platforms they will automatically select for the correct event. the usage of the virtual Click event is exactly the same as the Click event, with a V as the prefix in the different names. JQuery Mobile includes the following virtual click events: Vclick, Vmousedown, Vmousemove, Vmouseup, and Vmousecancel.
6 JQuery Mobile Api
