Home > Developer > Web Develop
Main features of JQuery Mobile:
1. Based on the jquery structure
2. Compatible with most mobile platforms
3. Lightweight Library
4. Modular Construction
5.HTML5 tag-driven configuration, rapid development of pages, minimizing the need for scripting capabilities for Web front-end developers
6. Progressive enhancement principle, jQuery mobile fully adopts progressive enhancement principle
7. Corresponding design
8. Powerful AJAX navigation system
9. Ease of Use
10. Support for touch and mouse operation
11. Unified UI Components
12. A strong thematic framework
Required components for this demo project:
| data-role= "Page" | Define a page container (used when building multiple pages) |
| Data-role= "Header" | Define a page or title bar (this property is optional) |
| data-role= "Content" | Defining Content Topics Packaging containers (this property is optional) |
| data-role= "Footer" | Define the footer bar (this property is optional) |
| data-role= "button" | In-line buttons: Data-inline= "true" Combo button: Data-role= "Controlgroup + Data-type= "horizontal| Vertical Fallback button: 1. Add Data-auto-btn= "true" 2. Bind the Mobileinit to Addbackbtn set to True |
| data-icon= "Grid" | Icon Component |
Required external "material"
<meta name= "viewport" content= "width=device-width,initial-scale=1" >
<link rel= "stylesheet" href= "Https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css" >
<script language= "javascript" type= "Text/javascript" src= "https://apps.bdimg.com/libs/jquery/1.10.2/ Jquery.min.js "></script>
<script src= "Https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js" ></script>
Device-width: Indicates that the entire width of the screen is extended to the content
Initial-scale: Used to view the initial zoom percentage or scale factor of a Web page, with a value of 1, displays a document that is not scaled
Code attachment:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metakeywords= "JavaScript"> <Metaname= "Viewport"content= "Width=device-width,initial-scale=1"> <title>JQuery Mobile Demo Website</title> <Linkrel= "stylesheet"href= "Https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <Scriptlanguage= "JavaScript"type= "Text/javascript"src= "Https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></Script> <Scriptsrc= "Https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></Script></Head><Body> <DivData-role= "page"ID= "Pageone"> <DivData-role= "header"Data-theme= "a"> <H1>JQuery Mobile Demo Website</H1> </Div> <navData-role= "NavBar"> <ul> <Li><ahref= "#home"Data-icon= "Home">Home</a></Li> <Li><ahref= "#information"Data-rel= "Dialog"Data-icon= "Grid">News</a></Li> <Li><ahref= "#calendar"Data-rel= "Dialog"Data-icon= "Star">Calendar</a></Li> </ul> </nav> <DivData-role= "Content"style= "Color:grey; font-size:0.9em; line-height:25px;"> <Pstyle= "text-align:center;color:black; font-size:1.2em;">This is the homepage of jquery Mobile</P> <P>Balabarabalabala Balabarabalabala Balabarabalabala Balabarabalabala Barabarabalabala</P> <P>Balabarabalabala Balabarabalabala Balabarabalabala Balabarabalabala Barabarabalabala</P> <P>Balabarabalabala Balabarabalabala Balabarabalabala Balabarabalabala Barabarabalabala</P> <P>Balabarabalabala Balabarabalabala Balabarabalabala Balabarabalabala Barabarabalabala</P> <P>Balabarabalabala Balabarabalabala Balabarabalabala Balabarabalabala Barabarabalabala</P> <P>Balabarabalabala Balabarabalabala Balabarabalabala Balabarabalabala Barabarabalabala</P> </Div> <DivData-role= "Footer"data-position= "fixed"Data-theme= "a"> <H1>Copyright Web Front-end development technology and practice</H1> </Div> </Div> <!--Popup dialog box - <DivData-role= "page"ID= "Information"> <DivData-role= "header"> <H1>News</H1> </Div> <DivData-role= "Content"> <P>This is a list of news</P> <P>In fact, there is nothing to tell you to come in and see. Surprised not surprise! No surprises! There is nothing, hahaha haha ha ha ha haha ...</P> <P>In fact, there is nothing to tell you to come in and see. Surprised not surprise! No surprises! There is nothing, hahaha haha ha ha ha haha ...</P> <P>In fact, there is nothing to tell you to come in and see. Surprised not surprise! No surprises! There is nothing, hahaha haha ha ha ha haha ...</P> <P>In fact, there is nothing to tell you to come in and see. Surprised not surprise! No surprises! There is nothing, hahaha haha ha ha ha haha ...</P> <P>In fact, there is nothing to tell you to come in and see. Surprised not surprise! No surprises! There is nothing, hahaha haha ha ha ha haha ...</P> <P>In fact, there is nothing to tell you to come in and see. Surprised not surprise! No surprises! There is nothing, hahaha haha ha ha ha haha ...</P> </Div> </Div> <!--Popup dialog box - <DivData-role= "page"ID= "Calendar"> <DivData-role= "header"> <H1>Calendar</H1> </Div> <DivData-role= "Content"> <P>This is the calendar.</P> <P>Today is September 8, 2017, Monday five! Friday Oh!</P> <P>Tomorrow on Monday six, it's a holiday! High Not happy!</P> </Div> </Div></Body></HTML>
Code effects Show:
Hope to make a little progress every day ^ ^. Above, mutual encouragement
JQuery Mobile Demo
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
