Creation and use of plugins

Third-party plugins available in: http://jquerymobile.com/resources/#Plugins中查找, JQuery Mobile supports multiple forms of expansion:

• • Theme: A CSS file, or a set of pictures, or both.
  • Plugin: A JavaScript file, a CSS file, to add new parts to the framework (Data-role).
  • Extension: A JavaScript file that adds new behavior to existing jquery mobile parts and core functions.

Create a plugin to recognize the following issues:

• • When using a plugin, users simply insert a JavaScript file and a CSS file on the page.
  • Plug-ins should be seamlessly compatible with existing custom namespaces and theme transitions.
  • Plug-ins should be initialized automatically like other parts of the framework
  • Avoid naming custom data-role with generic names as much as possible to avoid conflicts with naming in subsequent versions of the framework.

Base Template

• • Automatic initialization, that is, the automatic initialization of a part with Data-role or the declaration of a semantic HTML5 code.
  • The display is initialized by invoking the constructor of the part with the jquery syntax. For example: $ ("#myelement"). Widgetname ();

template for the part:(function ($) {//Wrap all the code in this method to ensure that $ is a reference to the jquery object//Definition of parts$.widget ("Mobile.ourwidgetname", $.mobile.widget,{options:{//Create a part default option. The configuration of the component.                    },_create:function () {//Constructors                    },//Public methodenable:function () {//Enable parts                 },disable:function () {//Disable parts                },refresh:function () {//Refresh parts                }            })});//end of part definition//Automatic initialization of code$ (document). Bind ("Pagecreate", function (event) {//Find the appropriate data-role and then apply the initialization method$ (event.target). Find (": Jqmdata (role= ' ourwidgetname ')"). Ourwidgetname ();      });} (JQuery));Self-Understanding: The _create method is the component's constructor. It is called only at initialization time. Because this is an extension, there must be inheritance, the method of the parent class has the Create method, the method of adding a _ into the use of subclasses is very common. 　 Example:For example, define a dynamicimage.　　　　Two implementations: The first is to find all the IMG elements on the page to automatically apply the dynamicimage resizing.       　 The second is to define a new data-role, called Dynamicimage, to resize only for the IMG element data-role dynamicimage. Typically, you need to implement the common methods in the three jquery mobile, refresh, enable, and disable. For example, when a program changes the URL of a picture through JavaScript, it needs to use $ ("#ourImag"). Dynamicimage ("Refresh") invokes the public method refresh to trigger the refresh behavior of the part.

1(function($){2     //Definition of widgets3$.widget ("Mobile.dynamicimage", $.mobile.widget,{4 options:{5margin:0,width:1006         },7_create:function(){8              This. _loadurl ();9         },Ten         //Private Methods One_loadurl:function(){ A             //this.element is our img element. -             varUrl//the URL that originally defined the Seccha IO src service -Url= "http://src.sencha.io/"; the             varParameters= ""; -             if(!isnan ( This. Options.width)) { -parameters+= "X" + This. options.width; -             } +             if((!isnan ( This. Options.margin)) && This. Options -. margin>0){ +parameters+= "-" + This. Options.margin; A             } at             if(parameters.length>0){ -url+=parameters+ "/"; -             } -             //Sencha Io needs to provide an absolute path to the URL -             //using Jqmdat instead of attr, you can make your code compatible with custom namespaces. element in all -             //The data-* property automatically matches the this.optons of the part object; in             varoriginalurl=$ ( This. Element). Jqmdata ("src"); -             if(originalurl.length>1){ to                 varNewurl= ""; +                 if($.mobile.path.isabsoluteurl (Originalurl)) { -                     //the URL of the picture is the absolute path theNewurl=Originalu; *}Else{ $                     //picture URL is relative path, we calculate absolute pathPanax Notoginseng                     varBaseurl=$.mobile.path.parseurl (location.href); -                     varbaseurlwithoutscript=baseurl.protocol+ "//" +baseurl.host+baseurl.directory; theNewurl=$.mobile.path.makeurlabsolute (Originalurl,baseurlwithoutscript);  +                 } Aurl+=Newurl; the$( This. Element). attr ("src", URL); +             }             -         }, $         //Public Methods $Enablefunction(){ -             //Enable Widgets -$( This. Element). attr (' disabled ', '); the         }, -Disablefunction(){Wuyi             //Disabling Widgets the$( This. Element). removeattr ("Disable"); -         }, WuRefreshfunction(){ -             //Refresh Widget About              This. _loadurl (); $         } -     }); -     //End of widget definition -     //The automation initializes the code, and the page looks for all elements that data-role= the "dynamicimage" property to create the Dynamicimage instance.  A$ (document). Bind (' Pagecreate ',function(event) { +         //find the appropriate data-role, call the Dynamicimage constructor the$ (event.target). Find ("Img:jqmdata (role= ' dynamic-image ')"). Dynamicimage (); -     }); $} (JQuery));

View Code

How to use:

<script src= "Jquery.mobile-dynamicimage-1.0.js" ></script> we just need to create an IMG element that configures the correct parameters: <!-- Take pictures of the full width of the screen-- <!--occupy the screen 40% width of the picture--&lt IMG data-src= "images/photo.png" data-role= "Dynamic-image" data-width= ">" <!--occupy the screen 100% width and the picture with 20 pixels margin-- > Plugin Recommendations: Paging Plugin: Http://filamentgroup.com/lab/jquery_mobile_pagination_plugin, the content (compared to slices) can be paged. Use: Create a UL element that data-role= "pagination".　 Each jquery mobile page should contain a paging widget. Example: <ul data-role= "pagination" > <li class= "ui-pagination-prev" ><a href= "1.html" >prev</a>    　　</li> <li class= "Ui-pagination-next" ><a href= "2.html" >next</a></li> </ul> Other: Tag navigation similar to the bottom of iOS app: http://www.stokkers.mobi/valuables/bartender.html datebox plugin: http://dev.jtsage.com/ Jqm-datebox Simple Dialog plugin (pop-up): Http://dev.jtsage.com/jQM-SimpleDialog Action Sheet plug-in (Simulation popup menu): https://github.com/ Hiroprotagonist/jquery.mobile.actionsheet plug-in for tablet use:Splitview plug-in can be found in: Http://asyraf9.github.com/jquery-mobile, which can be used to divide the page into two areas, these two areas are also called panels. MultiView plugin: http://www.stokkers.mobi/valuables/multiview/page1.html is similar to the above. But includes four panels: Menu panel, main Panel, full screen panel (optional, horizontal screen available), Pop-up panel (optional, vertical screen available); a compatible jquery UI plugin:Photoswipt (http://photoswipe.com), create photo gallery; Diapo (Http://www.pixedelic.com/plugins/diapo), great CSS animation effect slideshow Gallery; jQuery UI maps (HTTP://CODE.GOOGLE.COM/P/JQUERY-UI-MAP), a plugin for integrating Google Maps in mobile web apps; Mobiscroll (http:// www.mobiscroll.com): The selection of the event date using a stepper or a roulette wheel;

Creation and use of plugins