jquery mobile 样式
来源：互联网 发布：淘宝上图片模糊怎么办 编辑：程序博客网 时间：2024/05/29 16:47
http://jquerymobile.com/themeroller/
http://miamicoder.com/2011/building-a-jquery-mobile-application-part-1/
Basic UI components
jQuery Mobile uses data-* attributes to define UI components. Actually you just saw 4 of them above. Let’s see a small list of them and their correspondent data attribute:
- data-role=”page” : you can set divs inside your HTML page to behave as pages. SO what we’ve done above is to create a page “home” inside our file
- data-role=”header”: used to mark divs as top toolbars. You can set up data-position=”fixed” as well so it’ll behave as fixed toolbar
- data-role=”content”: the main part of your website / app. Images, buttons, actions and all the magic happens here!
- data-role=”footer”: defines a toolbar at the bottom of current page. May use data-position=”fixed” too so it’ll force to stay at the bottom of the screen
- data-role=”button”: it’ll be useful together with elements. You may use also data-transition to define how it’ll load next page. Options: slide, slideup, slidedown, pop, fade, flip. Another cool thing is data-icon, which gives you a lot of default icons. You may also reduce its size using data-inline=”true”.
- data-theme=”a/b/c/d/e”: Define color scheme used for elements.
Navigation, Lists, Form & Dialog Components
Then we have a bunch of other default components that are easily implemented with jQuery Mobile:
- data-role=”navbar”: Used to create menus. Then you should place a ul item with li’s and a’s (BTW, that’s the way you should create menus, always)
- data-role=”listview” + data-filter=”true” : Awesomely easy way to create searchable lists. Really useful!
- data-role=”fieldcontain”: This is a container for form elements
- select data-native-menu=”false”: creates a cool select element as “floating” element instead of default select which stole half of screen area
- select data-role=”slider”: Creates a “on / off” slider, useful for options pages
- input type=email, tel, number, url..: accepts any HTML5 data format, and adjust keyboard to better fit data type
- input type=range: same as before, but this one uses new HTML format and creates an actual slider, good for numbers range inputs
- data-rel=”dialog”: is an anchor attribute that makes target page opens as dialog box.
- data-add-back-btn=”true”: add this attribute to your page and you’ll have a “back” button. Cool, huh?
<!DOCTYPE html>2<html>3<head>4 <title>Starter page - 1stWebDesigner.com</title>5 <meta charset="utf-8" />6 <meta name="viewport" content="width=device-width, initial-scale=1" />7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />8 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />9 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>10 <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>11</head>12<body>13 <div data-role="page" id="home" data-add-back-btn="true">14 <div data-role="header">15 <h1>Alert element</h1>16 </div>17 <div data-role="content">18 <p><a href="#alert" data-role="button" data-transition="fade" data-icon="arrow-r"data-iconpos="right" data-theme="b" data-rel="dialog">Open alert</a></p>19 </div>20 <div data-role="footer">21 <div data-role="navbar">22 <ul>23 <li><a href="#form" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Form Elements</a></li>24 <li><a href="#list" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">List element</a></li>25 </ul>26 </div>27 </div>28 </div>29 <div data-role="page" id="form" data-add-back-btn="true">30 <div data-role="header">31 <h1>Form elements</h1>32 </div>33 <div data-role="content">34 <div data-role="fieldcontain">35 <label for="name" class="select">Choose:</label>36 <select id="name" name="select" data-native-menu="false">37 <option value="value1">option1</option>38 <option value="value2">option2</option>39 <option value="value3">option3</option>40 </select>41 42 <label for="slider">Select slider:</label>43 <select name="slider" id="slider" data-role="slider">44 <option value="off">Off</option>45 <option value="on">On</option>46 </select>47 48 <label for="slider">Input slider:</label>49 <input type="range" name="slider" id="slider" value="0" min="0" max="100" />50 51 <label for="email">Email Input:</label>52 <input type="email" id="email" name="email" value="" />53 54 <label for="num">Number Input:</label>55 <input type="number" id="num" name="num" value="" />56 </div>57 </div>58 <div data-role="footer">59 <div data-role="navbar">60 <ul>61 <li><a href="#home" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Home</a></li>62 <li><a href="#list" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">List element</a></li>63 </ul>64 </div>65 </div>66 </div>67 <div data-role="page" id="list" data-add-back-btn="true">68 <div data-role="header">69 <h1>This is a list</h1>70 </div>71 <div data-role="content">72 <ul data-role="listview" data-filter="true">73 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>74 <li>Aliquam vitae leo metus, quis suscipit nulla.</li>75 <li>Maecenas accumsan urna sit amet justo commodo accumsan.</li>76 <li>Nulla vitae lacus augue, vel eleifend tellus.</li>77 <li>Integer at ligula turpis, at fermentum nisl.</li>78 <li>Nam dapibus risus at massa sagittis egestas.</li>79 <li>Praesent hendrerit purus vitae enim faucibus tincidunt.</li>80 <li>Curabitur sit amet lectus neque, id facilisis elit.</li>81 </ul>82 </div>83 <div data-role="footer">84 <div data-role="navbar">85 <ul>86 <li><a href="#home" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Home</a></li>87 <li><a href="#form" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Form element</a></li>88 </ul>89 </div>90 </div>91 </div>92 <div data-role="page" id="alert" data-add-back-btn="true">93 <div data-role="header">94 <h1>Alert!</h1>95 </div>96 <div data-role="content">97 <p>I'm alert page!</p>98 </div>99 </div>100</body>101</html>
- jquery mobile 样式
- jQuery Mobile样式加载问题
- jQuery Mobile样式加载问题
- 去除jQuery mobile默认样式
- JQuery Mobile Alpha 4 无样式
- jQuery Mobile动态刷新页面样式
- jQuery Mobile动态刷新页面样式
- jQuery Mobile动态刷新页面样式
- 使用 ThemeRoller 轻松定制 jQuery Mobile 样式
- jQuery Mobile动态刷新页面样式
- jQuery Mobile动态刷新页面样式
- jQuery Mobile动态刷新页面样式
- jquery mobile 加载list丢失样式
- jQuery Mobile动态刷新页面样式
- jquery mobile修改原样式css
- 消除jquery Mobile自动添加的样式
- jQuery Mobile动态刷新页面样式
- jQuery Mobile动态刷新页面样式
- Google、 百度、谷歌的最本质区别?
- 软件开发人员的“七重苦”（1）
- ruby读取excel中文内容 转码后识别不了中文
- HTTP协议
- 将Apache2手动安装成Windows的服务
- jquery mobile 样式
- 840个日语惯用句型 学习笔记～20
- Java范型深入理解,利用反射穿透编译器忽略范型
- Java Web快速开发框架 ---- JSPX
- 学习资料
- Designing for Touch Screen
- Oracle 11g R2 OEM无法连接到数据库
- ubuntu 五笔输入法
- TIMESTAMP WITH TIME ZONE与TIMESTAMP WITH LOCAL TIME ZONE数据类型
