引用js：<link rel="stylesheet" href="http://www.mamicode.com/jquery.mobile-1.1.0/jquery.mobile-1.1.0.css" /><script src="http://www.mamicode.com/jquery.mobile-1.1.0/jquery-1.7.2.js"></script><script src="http://www.mamicode.com/jquery.mobile-1.1.0/jquery.mobile-1.1.0.js"></script>page：<div data-role="page"></div>设置设备的适配：让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0：<meta name="viewport" content="width=device-width, initial-scale=1"> <div data-role="header |content| footer | navbar"></div>：<div data-role="header" data-position="inline"> <h1>Page Title</h1><a href="http://www.mamicode.com/index.html" data-icon="gear" class="ui-btn-right">Options</a></div>主题样式：data-theme="a | b | c | d | e"位置固定：data-pisition="fixed"全屏样式：data-fullscreen="true"返回按钮：data-rel="back" 反向过渡：data-direction="reverse"按钮位置：data-role="button"      class="ui-btn-right"自定义导航菜单： class="ui-bar ui-bar-b"例：<div class="ui-bar ui-bar-b"><h3>I‘m just a div with bar classes and a <a href="http://www.mamicode.com/#" data-role="button">Button</a></h3></div><div data-role="navbar"><ul><li><a href="http://www.mamicode.com/a.html" class="ui-btn-active">One</a></li><li><a href="http://www.mamicode.com/b.html">Two</a></li></ul></div>链接：打开对话框：<a href="http://www.mamicode.com/#" data-rel="dialog">Dialog link</a>对话框大小设置：.ui-dialog .ui-header, .ui-dialog .ui-content, .ui-dialog .ui-footer {     max-width: 500px;     margin: 10% auto 15px auto; }对话框遮罩主题：data-overlay-theme="a | b | c | d | e"页面过渡：data-transition="fade | pop | flip |  turn | flow | slide | slideup | slidedown | none">>>>>Buttons：<a href="http://www.mamicode.com/index.html" data-role="button">Link button</a> 小按钮：data-mini="true" 按钮上的图标：data-icon="arrow-l | arrow-r | arrow-u | arrow-d | delete | plus | minus | check | gear | refresh | forward | back | grid | star | alert | info | home | search"图标位置：data-iconpos="top | bottom | left | right"无文字按钮：data-iconpos="notext"自定义图标：data-icon="myicon"   .ui-icon-myicon{ }按钮并列：data-inline="true"按钮组：data-role="controlgroup"水平按钮组：data-type="horizontal"例：<div data-role="controlgroup" data-type="horizontal"><a href="http://www.mamicode.com/index.html" data-role="button">Yes</a><a href="http://www.mamicode.com/index.html" data-role="button">No</a><a href="http://www.mamicode.com/index.html" data-role="button">Maybe</a></div> >>>>>Content： 标题：h1 、h2。。。；文本区域；图片；可折叠： data-role="collapsible"内容主题：data-content-theme=“a”默认展开：data-collapsed="false"小号折叠：data-mini="true"可折叠组：data-role="collapsible-set"例：<div data-role="collapsible-set"><div data-role="collapsible" data-collapsed="false">    <h3>Section 1</h3>    <p>I‘m the collapsible set content for section B.</p>    </div>    <div data-role="collapsible">    <h3>Section 2</h3>    <p>I‘m the collapsible set content for section B.</p>    </div></div>网格：class="ui-grid"两列 (ui-grid-a)三列(ui-grid-b)四列 (ui-grid-c)五列 (ui-grid-d)例：<div class="ui-grid-a">    <div class="ui-block-a"><strong>I‘m Block A</strong> and text inside will wrap</div>    <div class="ui-block-b"><strong>I‘m Block B</strong> and text inside will wrap</div></div>>>>>>List Views： 列表：data-role="listview"普通列表：<ul data-role="listview" data-theme="g">    <li><a href="http://www.mamicode.com/acura.html">Acura</a></li>    <li><a href="http://www.mamicode.com/audi.html">Audi</a></li>    <li><a href="http://www.mamicode.com/bmw.html">BMW</a></li></ul>嵌套列表，点击某行可以进入嵌套列表：<ul data-role="listview">    <li>        <h3>Animals</h3>        <p>All your favorites from aarkvarks to zebras.</p><ul><li>Pets<ul>                <li><a href="">Canary</a></li>                <li><a href="">Cat</a></li>            </ul>    </li>编号列表：<ol data-role="listview"><li></li><li></li></ol>只读列表：没有<a>链接拆分按钮列表：<ul data-role="listview" data-split-icon="gear" data-split-theme="d">    <li><a href="http://www.mamicode.com/#链接地址1"><img src="" /><h3>Broken Bells</h3><p>Broken Bells</p></a><a href="http://www.mamicode.com/#链接地址2" data-rel="dialog" data-transition="slideup">Purchase album</a></li></ul>列表分隔：<li data-role="list-divider"data-dividertheme=“a”>A</li>搜索过滤：<ul data-role="listview" data-filter="true" data-filter-theme=“a”></ul>数字区：<ul data-role="listview" data-theme="g">    <li><a href="http://www.mamicode.com/#">Acura</a><span class="ui-li-count">12</span></li>    <li><a href="http://www.mamicode.com/#">Audi</a><span class="ui-li-count">12</span></li></ul>列表格式：<ul data-role="listview" data-theme="d" data-divider-theme="d">    <li data-role="list-divider">列表标题<span class="ui-li-count">2</span></li>    <li><a href="http://www.mamicode.com/#"><h3>标题</h3> <p><strong>副标题</strong></p><p>简介</p><p class="ui-li-aside"><strong>6:24</strong>PM</p></a></li></ul>图标/图标列表：<ul data-role="listview">       <li><a href="http://www.mamicode.com/#"><img src="" /><h3>Broken Bells</h3><p>Broken Bells</p></a></li></ul>列表块：<ul data-role="listview" data-inset="true">调用ListView的插件：$(‘#mylist‘).listview();更新列表：$(‘#mylist‘).listview(‘refresh‘);>>>>>Form Elements： 表单结构：<form action="form.php" method="post"> ... </form>隐藏标签：<label for="username" class="ui-hidden-accessible">Username:</label><input type="text" name="username" id="username" value="" placeholder="Username"/>或者<div data-role="fieldcontain" class="ui-hide-label">    <label for="username">Username:</label>    <input type="text" name="username" id="username" value="" placeholder="Username"/></div>禁用表单元素：disable & enable表单容器： data-role="fieldcontain"刷新表单元素：复选框:$("input[type=‘checkbox‘]").prop("checked",true).checkboxradio("refresh");单选框:$("input[type=‘radio‘]").prop("checked",true).checkboxradio("refresh");下拉菜单:var myselect = $("#selectfoo");myselect[0].selectedIndex = 3;myselect.selectmenu("refresh");Sliders:$("input[type=‘range‘]").val(60).slider("refresh");开关:var myswitch = $("#selectbar");myswitch[0].selectedIndex = 1;myswitch.slider("refresh");保持原生态：data-role="none"滑块：<label for="slider-0">Input slider:</label><input type="range" name="slider" id="slider-0" value="http://www.mamicode.com/60" min="0" max="100" step="50"data-highlight="true"data-theme="a" data-track-theme="b"/>开关：<div data-role="fieldcontain"><label for="flip-c">Flip switch:</label>  <select name="slider" id="flip-c" data-role="slider" data-theme="a">  <option value="http://www.mamicode.com/no">No</option>  <option value="http://www.mamicode.com/yes">Yes</option>  </select> </div>单选复选：type="radio" type="checkbox"水平排列<fieldset data-role="controlgroup" data-type="horizontal"> ,单选框name要一致。<div data-role="fieldcontain"><fieldset data-role="controlgroup">        <legend>Choose a pet:</legend>             <input type="radio" name="radio-choice-1" id="radio-choice-1" value="http://www.mamicode.com/choice-1" checked="checked" />             <label for="radio-choice-1">Cat</label>             <input type="radio" name="radio-choice-1" id="radio-choice-2" value="http://www.mamicode.com/choice-2"  />             <label for="radio-choice-2">Dog</label>             <input type="radio" name="radio-choice-1" id="radio-choice-3" value="http://www.mamicode.com/choice-3"  /> <label for="radio-choice-3">Pig</label> </fieldset></div>下拉菜单：弹出式data-native-menu="false"<div data-role="fieldcontain">        <label for="select-choice-5" class="select">Shipping method:</label>        <select name="select-choice-5" id="select-choice-5" data-native-menu="false">        <option>Choose one...</option>            <option value="http://www.mamicode.com/standard">Standard: 7 day</option><option value="http://www.mamicode.com/rush">Rush: 3 days</option>            <option value="http://www.mamicode.com/express">Express: next day</option>            <option value="http://www.mamicode.com/overnight">Overnight</option>        </select></div>

jquery mobile 前言