您的位置：首页 > 移动开发

web app入门教程第二章JQM框架

2015-12-05 17:11 399 查看
Jquery moblie 框架使用，页面，按钮，表单，表格，列表组件使用。精美ui设计

帮助文档：http://download.csdn.net/detail/qq_19558705/9329159

Jquery-moblie-1.4.5下载：http://download.csdn.net/detail/qq_19558705/9329137

页面主体

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no" />
<title>Jquery Moblie 教程</title>
<link href="static/jquery.mobile-1.4.5/css/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
<script src="static/jquery.mobile-1.4.5/js/jquery.min.js"></script>
<script src="static/jquery.mobile-1.4.5/js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>jquery moblie</h2>
</div>
<div role="main" class="ui-content">
<div>中间主体内容</div>
</div>
<div data-role="footer">
<span>关注我©ITDragon </span>
</div>
</div>
</body>
</html>


导航：

习惯把导航放到底部



代码：

<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home">主页</a></li>
<li><a href="#" data-icon="grid">面板</a></li>
<li><a href="#" data-icon="search">搜索</a></li>
</ul>
</div>
</div>


form表单



更多内容看帮助文档

<div role="main" class="ui-content">
<div>
<form>
<div class="ui-field-contain">
<label for="name">User Name</label>
<input type="text" placeholder="User Name" autofocus="autofocus" />
</div>

<div class="ui-field-contain">
<label for="password">User Password</label>
<input type="password" placeholder="User Password" />
</div>

<div class="ui-field-contain">
<label for="email">User Email</label>
<input type="email" placeholder="User Email" />
</div>

<div data-role="ui-field-contain">
<label for="search">Search Country:</label>
<input type="search" name="password" id="search" value="" />
</div>

<div data-role="ui-field-contain">
<label for="slider">Input slider:</label>
<input type="range" name="slider" id="slider" value="10" min="0" max="100" />
</div>

<div data-role="ui-field-contain">
<label for="slider">Select slider:</label>
<select name="slider" id="slider" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>

<div data-role="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>User Habits:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">Reading</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
<label for="checkbox-2">Shopping</label>
<input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" />
<label for="checkbox-3">Playing</label>
</fieldset>
</div>
<div data-inline="true">
<span style="white-space:pre">							</span><a href="index.html" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Cancel</a> 　 
<span style="white-space:pre">							</span><a href="index.html" class="ui-btn ui-btn-inline">Save</a>
<span style="white-space:pre">						</span></div>
</form>
</div>
</div>


列表



<div>
<ul data-role="listview">
<li><a href="">List_one</a></li>
<li><a href="">List_two</a></li>
</ul>
</div>


回流表格

界面横线拉长后又是一种效果



<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
<tr>
<th>UserName</th>
<th>UserEmail</th>
<th>UserSex</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>ITDragon</td>
<td>xxx@qq.com</td>
<td>Male</td>
<td>Edit</td>
</tr>
<tr>
<td>ITDragon1</td>
<td>yyy@qq.com</td>
<td>Male</td>
<td>Edit</td>
</tr>
<tr>
<td>ITDragon2</td>
<td>zzz@qq.com</td>
<td>Male</td>
<td>Edit</td>
</tr>
</tbody>
</table>


本打算是就mmenu和jqm结合在一起的，结果发现用了mmenu后点击不能切换页面，所以暂时放弃了。

下一章就讲用Jquery mobile 的js内容。

如果有什么疑问和建议可以留言，我会及时处理。

更多干货等你来拿 http://www.itit123.cn/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航