Home > Developer > JavaScript
Widgets
The core of jQuery Mobile is widgets. Provides an interface for interacting with users. In the latest version, a new widget: popup modal is added.
Popups (pop-up layer)
The pop-up layer is a small area that covers other content on the page. It can be used to design the prompt bar to Display photos, maps, or other content. In jQuery mobile 1.2, this superb widgets is implemented.
In this article, we will use the following code framework to demonstrate the Code:
<! DOCTYPE html>
<Html>
<Head>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1">
<Title> jQuery mobility 1.2 </title>
<Link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<Script src = "http://code.jquery.com/jquery-1.8.0.min.js"> </script>
<Script src = "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
</Head>
<Body>
<Div data-role = "content">
<! -- Paste the following article code here -->
</Div>
</Body>
</Html>
Here we use CDN to load javascript.
Tip: Please use Chrome to access the following "online debugging" address. Thank you!
To add the popup pop-up layer, we need to add the following attributes to define the reference type as popup:
Data-rel = "popup"
Then define the specific plug-in type as follows:
Data-role = "popup"
The trigger layer content displayed can be a form, menu, or image. The complete code is as follows:
<A href = "# simplepopup" data-rel = "popup"> Open Popup </a>
<Div data-role = "popup" id = "simplepopup">
<P> This is a completely basic popup, no options set. <p>
</Div>
Online debugging
Tooltips (tooltip)
With popup, we can also create a tooltip, as shown below:
<A href = "# tooltip" data-rel = "popup" data-role = "button"> Find out more </a>
<Div data-role = "popup" id = "tooltip" data-theme = "e">
<P> You found out more !. </P>
</Div>
Online debugging
Menus (menu)
A menu is generated as follows:
<A href = "# menu" data-rel = "popup" data-role = "button"> Menu </a>
<Div data-role = "popup" id = "menu" data-theme = "a">
<Ul data-role = "listview" data-theme = "c" data-inset = "true">
<Li data-role = "divider" data-theme = "a"> My Menu </li>
<Li> Unlinked </li>
<Li> <a href = "methods.html"> Linked </a> </li>
<Li> <a href = "methods.html"> With count </a> <span class = "ui-li-count"> 42 </span> </a> </ li>
</Ul>
</Div>
Online debugging
Of course, you can also generate a scalable list, as shown below:
<A href = "# nestedmenu" data-rel = "popup" data-role = "button"> Nested Menu </a>
<Div data-role = "popup" id = "nestedmenu" data-theme = "none">
<Div data-role = "collapsible-set" data-theme = "B" data-content-theme = "c" data-collapsed-icon = "arrow-r" data- expanded-icon = "arrow-d" style = "margin: 0; width: 250px; ">
<Div data-role = "collapsible" data-inset = "false">
<H2> Colors <Ul data-role = "listview">
<Li> <a href = "#"> Red </a> </li>
<Li> <a href = "#"> Blue </a> </li>
</Ul>
</Div>
<Div data-role = "collapsible" data-inset = "false">
<H2> Shapes <Ul data-role = "listview">
<Li> <a href = "#"> Circle </a> </li>
<Li> <a href = "#"> Square </a> </li>
</Ul>
</Div>
</Div>
</Div>
Online debugging
Form)
We can also generate a pop-up login form, as shown below:
<A href = "# login" data-rel = "popup" data-position-to = "window" data-role = "button"> Login </a>
<Div data-role = "popup" id = "login" data-theme = "a">
<Form style = "padding: 10px 20px;">
<H3> Please sign in <Label for = "un" class = "ui-hidden-accessible"> Username: </label>
<Input type = "text" name = "user" id = "un" placeholder = "username"/>
<Label for = "pw" class = "ui-hidden-accessible"> Password: </label>
<Input type = "password" name = "pass" id = "pw" placeholder = "password"/>
<Button type = "submit" data-theme = "B"> Sign in </button>
</Form>
</Div>
Online debugging
Dialogs (dialog box)
The dialog box is also commonly used, as follows:
<A href = "# dialog" data-rel = "popup" data-position-to = "window" data-role = "button" data-transition = "pop"> Dialog </a>
<Div data-role = "popup" id = "dialog" data-overlay-theme = "a" data-theme = "c">
<Div data-role = "header" data-theme = "a">
<H1> Delete Page? </H1>
</Div>
<Div data-role = "content" data-theme = "d">
<H3> Are you sure you want to delete this page? </H3>
<P> This action cannot be undone. </p>
<A href = "#" data-role = "button" data-inline = "true" data-rel = "back" data-theme = "c"> No </>
<A href = "#" data-role = "button" data-inline = "true" data-rel = "back" data-theme = "B"> Yes, delete it </a>
</Div>
</Div>
Online debugging
Photos (Image Display)
Use the floating mode to display the image as follows:
<A href = "# photo" data-rel = "popup" data-position-to = "window" data-role = "button" data-transition = "fade"> Photo </a>
<Div data-role = "popup" id = "photo" data-overlay-theme = "a" data-theme = "d" data-corners = "false">
<A href = "#" data-rel = "back" data-role = "button" data-theme = "a" data-icon = "delete" data-iconpos =" nojs "class =" ui-btn-right "> Close </a>
</Div>
Online debugging
List Views (Scalable List)
You must also:
<Div data-role = "collapsible" data-theme = "B" data-content-theme = "c">
<H2> Favorite Spice Girl? </H2>
<Ul data-role = "listview">
<Li> <a href = "index.html"> Posh </a> </li>
<Li> <a href = "index.html"> Scary </a> </li>
<Li> <a href = "index.html"> Sporty </a> </li>
<Li> <a href = "index.html"> Baby </a> </li>
<Li> <a href = "index.html"> Ginger </a> </li>
</Ul>
</Div>
Online debugging
Enhanced Functions
Other updates include some functional enhancements.
JQuery supports updates
JQuery1.8 is supported. The rewriting of sizzle. js brings about performance improvement and other improvements. And begin to consider giving up support for 1.6, if you use the old version, it may be uncomfortable.
Automatic Separation of list views
Data-autodividers = "true"
Originally:
Now:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
