1. Get the jquery mobile file and visit the Jquerymobile website to download
(jquery will automatically add some class classes to the Web page after using jquery Mobile, and the first time you know I'm scared!!) 2. Need to use data attributes, data attributes are HTML5 introduced, starting with data-such as data-role can be used to define headers, footers, content, pages, etc.
- data-role= "page" is the page that is displayed in the browser.
- Data-role= "Header" is a toolbar created at the top of the page (typically used for headings or search buttons)
- data-role= "Main" defines the content of the page, such as text, images, forms, buttons, and so on.
- The "Ui-content" class is used to add padding and margins to the page.
- data-role= "Footer" is used to create a toolbar at the bottom of the page.
3. When you define multiple pages in jquery Mobile,:p age, On the mobile side, only one page 4 will appear by default. When a connection is encountered, if it is the other content of the same page, or other content on the same server, the page is loaded using AJAX and when an external Web site is encountered, a general connection operation is performed if you want to disable the operation of jquery Mobile, Then use the Data property: Data-ajax= "false" 5.jquery page to set the page title: Data-title Settings in the page tab, you can also set the prefetch content in the Header tab in a site, a few pages are often loaded by the user, in order to improve loading speed , allowing the browser background to be read pre-loaded on the main page. Specifically set to add Data-prefetch= "true" to the appropriate connection to modify the excessive way of the page-reprint Data-transition:poo (pop-up window), fade,flip,flow,slide (swipe from right to left), Slidedown (swipe from top to bottom), Slidefade,turn,none6. Header Add button to add a button to the header page, add a connection to add a button to the right of the header only: class= "Ui-btn-right" can add an icon to the button data-icon7. Add the Back button add data-add-back-btn= "True" setting a connection is empty, and set data-rel= "back" to add a button in the footer, he will not keep space in the button for four weeks, need to add "Ui-bar type 8. Fixed header and footer add data-position= "fixed" full-screen header footer in header footer: data-fullscreen= "true" 9. Create a navigation bar add data-role= "NavBar" to the div tag, Then create an unordered list on the active button plus the "uibtn-active" type label line can add up to five buttons, and too many buttons will be split 10. Multiple page persistent footer all pages use the same Data-id need to add "ui-btn-active, Ui-state-persist "class label 11. List function no sequence table in UL add data-role=" ListView "after adding a connection in Li, the list will add the arrow icon inline list: UL add data-inset=" true " List separator: Li adds data-role= "Listdriver" or UL plus data-autodrivers= "true" 12. Add a thumbnail or icon to the list to add an img to Li, orAdd "Ui-li-icon" class type, icon to specify the location, otherwise the icon does not display: Ui-btn-icon-top/bottom/left split the list of branches, in the UL add data-spliticon= "Delete" 13. List of search filters added in ul data-filter= "true" is not de-capitalization by default and is retrieved by Ajax 14. Use Tel and mailto to automatically call the phone's dial-up and e-mail features 15. The form's submit feature in Jquery-lmobie is that the form component that is submitted via Ajax automatically adds data-role= "Fieldcontain" 16 to the div in which the form is submitted. Select Menu if you want to hide the label, use the class Ui-hidden-accessible. This is often used when you use the placeholder property of an element as a label, and we can add a button that clears the contents of the input box using the data-clear-btn= "true" property (an X icon to the right of the input box)jQuery Mobile automatically handles form submissions via AJAX and will attempt to integrate the server into the application's DOM.
- The <form> element must have a method and an Action property
- Each form element must have a unique "id" attribute. The ID must be unique across all pages on the site. This is because JQuery Mobile's single-page navigation mechanism allows multiple pages to be presented at the same time
- Each form element must have a label. set the label's for property to match the ID of the element
Working with platforms 17. Search Components and slider components switch components <form method= "POST" action= "demoform.php" > <label for= "switch" > Toggle switch: </ label> <input type= "checkbox" data-role= "Flipswitch" name= "switch" id= "switch" data-on-text= "True" data-off-text= "False" checked> (default selected) </form> slider component, type changed to range 18. Disable native form controls data-role= "None" Mini Component: Data-mini= " True "19. Create modal dialog box (the following two ways can be) add data-rel=" dialog "page in a link to add data-dialog=" true "20. Use the grid for content layout add class= to the div tag" Ui-grid-a ", (a for a two-column grid, b for a three-column grid, and so on) to add class=" Ui-block-a "(from A to D) in the DIV tag 21. Make the HTML component responsive to different dimensions add class= to an existing grid Ui-reponsive "collapse Box: data-role=" Collapsible "(initially expanded: add Data-collapsible=" false ") to move the shrink icon to the right: data-iconpos= Collapsible collection: data-role= "Collapsible-set" 22. Pop-up windows first write a chunk: data-role= "popup" and then write a link as a button (to start the event): <a href= "#f" data-role= "Button" Data-rel= "Popup" data-position-to= "window" >sss</a> 23. Table (Response: Column reflow and column switchingAdd data-role= "table" class= "Ui-responsive Table-stroke" (responsive and table border respectively) in the Table tab (after adding the response, the original horizontal version of the table will become vertical when the resolution changes) You can add data-mode= "Columntoggle" to the column headings in THEAD, based on the user's need to filter the display data: data-priority= "1~10" Changes to the button text: data-column-btn-text= "?? "24. Add panel Add data-role=" Panel ", and you must add data-position=" Left/right "outside the content to set the orientation of the panel by setting the Data-display property to revise the display: reveal , Push, Overveal 25. Create button
- Using <button> elements
- Using <input> elements
- Use the <a> element with the data-role= "button"
Combo button (Horizontal/Vertical): data-role= "Controlgroup" and data-type= "horizontal|vertical" Back button: <a href= "#" data-role= "button" Data-rel= "Back" > Return </a> 26.juqery Mobile defines a variety of topics and can also be customized http://www.runoob.com/jquerymobile/ The jquerymobile-themes.html 27.jquery Mobile event jquery on () method is used to bind events to the selected element. <script> $ (document). On ("Pagecreate", "#pageone", function () {
//jQuery events ...
});</script> Rotation event: The Window.orientation property returns 0 for portrait view and 90 or-90 for landscape view. Page load: JQuery apps are typically initialized with a $ (document). Ready to initialize, but jquery mobile doesn't work as well because jquery Mobile uses AJAX to load pages, $ (document). Ready only works on the first page so you need to use the Pagecreate event
JQuery Mobile Learning Notes
