jquery mobile #9
Comments
列表页如果 jqm发现li>a href不为空，则会自动加上向右的箭头。 <ul data-role="listview">
<li><a href="ray.html">Raymond Camden</a></li>
<li><a href="scott.html">Scott Stroz</a></li>
<li><a href="todd.html">Todd Sharp</a></li>
<li><a href="dave.html">Dave Ferguson</a></li>
</ul>inset list
<ul data-role="listview" data-inset="true">
<li>Raymond Camden</li>
<li>Scott Stroz</li>
<li>Todd Sharp</li>
<li>Dave Ferguson</li>
</ul>带title的<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Active</li>
<li>Raymond Camden</li>
<li>Scott Stroz</li>
<li>Todd Sharp</li>
<li data-role="list-divider">Archived</li>
<li>Dave Ferguson</li>
</ul>带数字气泡的 <ul data-role="listview" data-inset="true">
<li data-role="list-divider">Cookies Eaten</li>
<li>Raymond Camden <span class="ui-li-count">9</span></li>
<li>Scott Stroz <span class="ui-li-count">4</span></li>
<li>Todd Sharp <span class="ui-li-count">13</span></li>
<li>Dave Ferguson <span class="ui-li-count">8</span></li>
</ul>带图片的图片大小是160x160 <ul data-role="listview" data-inset="true">
<li><a href="ray.html"><img src="ray.png"> Raymond Camden</a></li>
<li><a href="scott.html"><img src="scott.png"> Scott Stroz</a></li>
<li><a href="todd.html"><img src="todd.png"> Todd Sharp</a></li>
<li><a href="dave.html"><img src="dave.png"> Dave Ferguson</a></li>
</ul>带图标的jqm会自动的把图片缩小到一行的高度，但是最好是自己提供合适大小的图片（这里是16x16). <ul data-role="listview" data-inset="true">
<li>
<a href="ray.html">
<img src="ray_small.png" class="ui-li-icon">Raymond Camden</a>
</li>
...多action的除了点击列表项能触发某事件，在每一列右侧再加一个按钮。（太丑没什么用）实现方法是给li再加上一个a标签即可，这个a中的文字会自动变成按钮。 <ul data-role="listview" data-inset="true">
<li>
<a href="ray.html">
<img src="ray_small.png" class="ui-li-icon">
Raymond Camden
</a>
<a href="foo.html">Delete</a>
</li>
...如果这个按钮不好看，也可以自定义图标 自带搜索框的列表页<ul data-role="listview" data-inset="true" data-filter="true">高级的搜索框data-filter-reveal的意思是一开始隐藏掉所有的item，直到在搜索框中输入文字才显示匹配的item。 <ul data-role="listview" data-inset="true" data-filter="true"
data-filter-reveal="true" data-filter-placeholder="Type to
search..."> |
hotel 示例全屏图片在content中直接放img标签 <div data-role="page" data-fullscreen="true">
<div data-role="header" data-position="fixed">
<h1>Emperor Suite</h1>
</div>
<div data-role="content">
<img src="room2.jpg" />
</div>
<div data-role="footer" data-position="fixed">
<h4>© Camden Hotel 2012</h4>
</div>
</div>图文并茂在content中放一些p <div data-role="page">
<div data-role="header">
<h1>Find Us</h1>
</div>
<div data-role="content">
<p>
The Camden Hotel is located in beautiful downtown
Lafayette, LA. Home of the Ragin Cajuns, good food, good
</p> <p>
400 Kaliste Saloom<br/>
Lafayette, LA<br/>
70508
</p> <p>
<img src="http://maps.googleapis.com/maps/api/
staticmap?center=400+Kaliste+Saloom,+Lafayette,
LA&zoom=12&size=150x150&scale=2&maptype=roadmap&
markers=label:H%7C400+Kaliste+Saloom,+Lafayette,
LA&sensor=false">
</p> </div>
<div data-role="footer">
<h4>© Camden Hotel 2012</h4>
</div>
</div>打电话，发短信把tel改成sms即是发短信 <a href="tel:555-555-5555">555-555-5555</a> |
表单表单中的每一个元素放到各自的 basic注意后台代码(action对应的url)应该返回一段div#data-role=page，因为jqm会用你的响应替换当前的一整个div#page... <div data-role="header">
<h1>Form Demo</h1>
</div>
<div data-role="content">
<form action="echo.cfm" method="post">
<div data-role="fieldcontain">
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="" />
</div>
<div data-role="fieldcontain">
<input type="submit" name="submit" value="Send" />
</div>
<div data-role="fieldcontain">
<label for="bio">Bio:</label>
<textarea name="bio" id="bio"></textarea>
</div>
</form>
</div>单选，复选将上面的 <div data-role="content">
<form action="echo.cfm" method="post">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Favorite Movie:</legend>
<input type="radio" name="favoritemovie"
id="favoritemovie1" value="Star Wars">
<label for="favoritemovie1">Star Wars</label>
<input type="radio" name="favoritemovie"
id="favoritemovie2" value="Vanilla Sky">
<label for="favoritemovie2">Vanilla Sky</label>
<input type="radio" name="favoritemovie"
id="favoritemovie3" value="Inception">
label for="favoritemovie3">Inception</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Favorite Colors:</legend>
<input type="checkbox" name="favoritecolor"
id="favoritecolor1" value="Green">
<label for="favoritecolor1">Green</label>
<input type="checkbox" name="favoritecolor"
id="favoritecolor2" value="Red">
<label for="favoritecolor2">Red</label>
<input type="checkbox" name="favoritecolor"
id="favoritecolor3" value="Yellow">
<label for="favoritecolor3">Yellow</label>
</fieldset>
</div>
<input type="submit" name="submit" value="Send" />横向的单选和复选进一步将 下拉和basic一样 <div data-role="fieldcontain">
<label for="favmovie">Favorite Movie:</label>
<select name="favmovie" id="favmovie">
<option value="Star Wars">Star Wars</option>
<option value="Revenge of the Sith">Revenge of the
</option>
<option value="Tron">Tron</option>
<option value="Tron Legacy">Tron Legacy</option>
</select>
</div>多下拉和单选和复选一样。。 <div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Trip Setup:</legend>
<label for="location">Location</label>
<select name="location" id="location">其它搜索框search将type='text'改成type='search' 开关按钮slider <div data-role="fieldcontain">
<label for="gender">Gender:</label>
<select name="gender" id="gender" data-role="slider">
<option value="0">Male</option>
<option value="1">Female</option>
</select>
</div>滑动条range<div data-role="fieldcontain">
<label for="coolness">Coolness:</label>
<input type="range" name="coolness" id="coolness" min="0"
max="100"
value="22" data-highlight="true">
</div>双向滑动条<div data-role="fieldcontain">
<div data-role="rangeslider">
<label for="coolnessLow">Cool Range:</label>
<input type="range" name="coolnessLow" id="coolnessLow"
min="0" max="100" value="22">
<input type="range" name="coolnessHigh" id="coolnessHigh"
min="0" max="100" value="82">
</div>
</div>关掉jqm对form element的特殊处理 <input type="submit" value="Awesome">
<input type="submit" value="Not So Awesome" data-role="none">迷你表单给input加上 |
其它搜索框search将type='text'改成type='search' 开关按钮slider <div data-role="fieldcontain">
<label for="gender">Gender:</label>
<select name="gender" id="gender" data-role="slider">
<option value="0">Male</option>
<option value="1">Female</option>
</select>
</div>滑动条range<div data-role="fieldcontain">
<label for="coolness">Coolness:</label>
<input type="range" name="coolness" id="coolness" min="0"
max="100"
value="22" data-highlight="true">
</div>双向滑动条<div data-role="fieldcontain">
<div data-role="rangeslider">
<label for="coolnessLow">Cool Range:</label>
<input type="range" name="coolnessLow" id="coolnessLow"
min="0" max="100" value="22">
<input type="range" name="coolnessHigh" id="coolnessHigh"
min="0" max="100" value="82">
</div>
</div>关掉jqm对form element的特殊处理 <input type="submit" value="Awesome">
<input type="submit" value="Not So Awesome" data-role="none"> |
jqm1.4的变化有关dialogclose的方式变了 //You can programmatically close a page styled as a dialog by navigating to another page
//$('#settingsPage').dialog('close');
$.mobile.back();dom structure变了 <div data-role="page" data-dialog="true" id="settingsPage">
<div data-role="header"><h2>Settings</h2></div>
<div class="ui-content" role="main">
<form method="post" action="">
<label for="authServerAddr">Auth(Profile) Server:</label>
<input type="text" id="authServerAddr" name="authServerAddr" placeholder="authentication server addr"
value=""/>
<br/>
<label for="apiServerAddr">API Server:</label>
<input type="text" id="apiServerAddr" name="apiServerAddr" placeholder="api server addr" value=""/>
<br/>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Authentication type:</legend>
<input type="radio" name="auth_type" id="auth_type_simple" value="simple"/>
<label for="auth_type_simple">Demo</label>
<input type="radio" name="auth_type" id="auth_type_other" value="other"/>
<label for="auth_type_other">Other</label>
</fieldset>
<br/>
<input type="button" id="btnSaveSettings" name="save" value="Save"/>
</form>
</div>
</div>
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
http://jquerymobile.com/download/
index.html
打开index.html提示找不到js/lib/images/ajax-loader.gif， 解决办法是把解压后的jqm压缩包中的images目录也拷贝到工程中来。、
jqm使用了大量的data-元素来定义look and behaviour.
如果href指向同一页面（使用的是#）则直接定位到锚处。因为一次只显示一个page，所以能实现切屏效果。。
如果是href指向另一个html则jqm默认会用ajax来请求那个html文件，可以像下面这样来禁止jqm的这种行为。
但如果href是外部链接，则 jqm会坐视不管。
title
在page对应的div上定义data-title。
预抓取页面
像这样，如果jqm发现data-prefetch标记，则在加载当前页面的同时会读取href指向的页面。
翻页特效
可选的值有fade (the default), flip, flow, pop, slide, slidedown, slidefade, turn, and none.
header
左右各一个button
仅在右侧加一个button
给button加上icon
后退按钮
在
pageheader (since jqm1.4) 上加上data-add-back-btn="true"，则jqm会自动给你在左上角添加Back按钮。或者在页面上加<a href="" data-rel="back">Go back...</a>， jqm也会把这个链接当做后退链接（没啥用）改变后退按钮上的文字
data-back- btn-text="Return"。不带title的header
去掉header中的 h1标签就行了吗？不行，像下面这样加上一个空的
span#ui-title即可.footer
如果footer仅包含文字，放在 h4中就可以，如果底部是一排按钮，放一些a标签就可以了。
ui-bar给这排button加些额外的padding。固定header and/or footer
给header或footer对应的div加上
data-position='fixed'就可以了。这样他们就不会随页面滚动。自动隐藏工具栏
navbar(我说的tab页）
定义一个
data-role='navbar'的div并把ul>li放进去即可。最多只能定义5个tab. 得手动在当前的tab页加上class="ui-btn-active".放在header(加在h1或button后面即可jqm会另起一行放置navbar)
放在footer（直接放在footer里边)
页面跳转时固定tab页
//todo
• Your footer div must be present on all pages
• Your footer div must use the same data-id value across all pages
• You must use two CSS classes, ui-state-persist and ui-btn-active, on the active page in the NavBar
• You must also use the persistent footer feature
第一页
第二页
唯一的区别是把class="ui-btn-active ui-state-persist"移到第二个li>a上。。还不太清楚加或不加
ui-state-persist有什么区别。。。The text was updated successfully, but these errors were encountered: