Prepare to learn about jQuery Mobile, write down some summaries and insights of the learning process, to deepen memory and facilitate future viewing, and hope to communicate with other programmers.
jQuery Moblile is a component of the jQuery framework that works on almost all mobile platforms. Because he uses Html5, css and JS, I hope you have this convenient knowledge before learning.
1. The installation of jQuery Mobile is very simple, you can just introduce relevant js and css in the html page without downloading.
<head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head>
2. jQuery Mobile pages , the data-* attributes are used to create a "touch-friendly" interactive look and feel for mobile devices via jQuery Mobile. A page can use multiple data-role="page", distinguish them by unique id. Use href to jump. You can also use data-ref='another id' to pop up other dialogs one by one.
- data-role="page" is the page displayed in the browser
- data-role="header" creates a toolbar at the top of the page (often used for headers and search buttons)
- data-role="content" defines the content of the page, such as text, images, forms and buttons, etc.
- data-role="footer" creates a toolbar at the bottom of the page
- data-ref = "" pops up a dialog
Below is a basic JQuery Mobile page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Welcome to my homepage</h1>
</div>
<div data-role="content">
<p>Content</p>
</div>
<div data-role="footer" data-position='fixed' data=fullscreen = 'true'>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="plus">更多</a></li>
<li><a href="#" data-icon="minus">更少</a></li>
<li><a href="#" data-icon="delete">删除</a></li>
<li><a href="#" data-icon="check">喜爱</a></li>
<li><a href="#" data-icon="info">信息</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
3. jQuery Mobile page transition effect . There are many effects of transitioning from one page to another, such as fading, flipping, sliding up and down, etc. Browser support is required, IE 10 and above.
<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑动</a>
Use the data-transition property with values: fade, flip, flow, pop, slide, slidefade, slideup, slidedown, turn, and none.
Using data-direction="reverse" will reverse the effect.
4. jQuery Mobile button . Three kinds: input, button, a tag. Inputs and buttons are often used for form submission. The a tag is used for page jumps. The button of the a label adapts to the screen by default, plus data-line = 'true' to adapt to the size.
<button>按钮</button>
<input type="button" value="按钮">
<a href="#pagetwo" data-role="button" data-inline="true">转到页面二</a>
4.1 To group buttons, use data-role = 'controlgroup'. data-type = 'horizontal' for horizontal, data-tye = 'vertical' for vertical.
<div data-role="controlgroup" data-type="horizontal"> <a href="#anylink" data-role="button">按钮 1</a> <a href="#anylink" data-role="button">按钮 2</a> <a href="#anylink" data-role="button">按钮 3</a> </div>
4.2 Back button, use attribute data-rel = 'back'.
<a href="#" data-role="button" data-rel="back">返回</a>
There are some other button properties: data-corners, data-mini, data-shadow, all of which are true and false.
4.3 Buttons with icons, use the data-icon attribute, the values are: arrow-l, arrow-r, delete, info, home, back, search, grid, etc. data-iconpos specifies the position of the icon, the values are top, bottom, left, right. notext, indicating that only the icon is displayed, and no text is displayed.
<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>
5, jQuery Mobile toolbar . Toolbars are generally placed in the header or footer.
The title bar generally consists of: logo home page and logo return on the left; title in the middle; search and options on the right. If there is only one button and it should be displayed on the right, add class='ui-btn-right'. The header is usually 1-2 buttons.
<div data-role="header"> <a href="#" data-role="button">首页</a> <h1>Welcome to my homepage</h1> <a href="#" data-role="button">搜索</a> </div>
The footer has more buttons that can be added and is more flexible. class='ui-btn' enables centering.
<div data-role="footer" class="ui-btn">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="plus">Rebroadcast to Sina Weibo</a>
<a href="#" data-role="button" data-icon="plus">Rebroadcast to Tencent Weibo</a>
<a href="#" data-role="button" data-icon="plus">转播到 QQ 空间</a>
</div>
</div>
Position headers and footers. The data-position values include: inline, fixed. The data-fullscreen="true" attribute is full positioning, making headers and footers translucent.
<div data-role="header" data-position="fixed" data-fullscreen="true"></div> <div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
6, jQuery mobile navigation bar . Usually consists of a set of horizontally arranged links (more than 5 will wrap), located in the header and footer. Use the data-role="navbar" attribute (it will be automatically converted to a button, no need for data-role='button');
ui-btn-active , ui-state-persist selected styles.
Header navigation bar
<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#anylink" class="ui-btn-active ui-state-persist">首页</a></li>
<li><a href="#anylink">页面二</a></li>
<li><a href="#anylink">搜索</a></li>
</ul>
</div>
</div>
The navigation bar for the footer. data-iconpos='left' means the image is on the left.
<div data-role="footer">
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#" data-icon="plus">更多</a></li>
<li><a href="#" data-icon="minus">更少</a></li>
<li><a href="#" data-icon="delete">删除</a></li>
<li><a href="#" data-icon="check">喜爱</a></li>
<li><a href="#" data-icon="info">信息</a></li>
</ul>
</div>
</div>
7. jQuery mobile folding
The div uses data-role = 'collapsible', adds an h1-h6 tag, followed by the collapsing content. Collapsed content is hidden by default. Add data-collapsed='false' if needed.
Folds can be nested.
collapsible set data-role = 'collapsible-set'
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>Click me - I can fold! </h1>
<p>I am the expanded content. </p>
<div data-role="collapsible">
<h1>Click me - I'm a nested collapsible block! </h1>
<p>I am the expanded content within a nested collapsible block. </p>
</div>
</div>
<div data-role="collapsible">
<h1>Click me - I can fold! </h1>
<p>I am the expanded content. </p>
</div>
</div>
div add data-insert='false' : remove rounded corners. data-mini = 'true': Smaller. data-callapsed-icon='arrow-u' data-expanded-icon='arrow-d' Replaces the default + - icon in front.
8. jQuery Mobile grid layout .
| grid class | List | column width | correspond |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e |
<div class="ui-grid-b">
<div class="ui-block-a" style="border: 1px solid black;"><span>Some Text</span></div>
<div class="ui-block-b" style="border: 1px solid black;"><span>Some Text</span></div>
<div class="ui-block-c" style="border: 1px solid black;"><span>Some Text</span></div>
</div>