Ajax基础教程（3）- 3.1 处理服务器响应
2008-07-14 14:45
363 查看
最近研究了一下jquerymonile，一些方法和jquery本身没有什么变化，使用方法也都是一样所以就没有多看，就针对jquerymobile的主题以及页面的上看了许多，发现他通过一些属性来实现比如data-role就是最关键的，现在jquerymobile的手册特别是中文版的手册基本上是没有，但是自己的英文水平实在是太菜，但是没有办法没有这方面的资料只有到jquerymobile的官网去研究，现在整理了一下放到自己的博客中，一方面是记录自己的学习过程另一方面希望能给想研究jquerymobile的同学们一些帮助！好了下面就贴出整理的手册：
提示：你可以先修改部分代码再运行。
（建议你使用firefox浏览器或者chrome，ie浏览器看不到一些效果！）
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>jquerymobile手册</title>
<meta charset="UTF-8">
<link rel="stylesheet" media="all" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
<style type="text/css">
* { padding:0; margin:0; font-size:14px; }
#header, #footer { }
table { border:1px solid #ccc; margin:0 auto; border-collapse:collapse; }
td, th { height:30px; border:1px solid #ccc; text-align:left; line-height:2; }
th { width:15%; }
caption { font-size:1.5; font-weight:bold; padding:10px; }
img { vertical-align:middle; }
</style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-nobackbtn="false" data-theme="a" id="header">
<h1>jquery mobile手册</h1>
</div>
<div data-role="content">
<table width="98%">
<tbody>
<tr>
<td width="11%" rowspan="10">data-role</td>
<th width="9%">page</th>
<td width="80%">设置你的页面为mobile的样式就靠它了，放在body的下面是mobile的容器<div data-role="page"></div></td>
</tr>
<tr>
<th>header</th>
<td>用来设置你的页面的头部使用方法和page类似，<div data-role="header"></div></td>
</tr>
<tr>
<th>footer</th>
<td>用来设置你的页面的底部使用方法和header类似，<div data-role="footer"></div></td>
</tr>
<tr>
<th>content</th>
<td>用于设置页面的内容部分<div data-role="content"></div></td>
</tr>
<tr>
<th>controlgroup</th>
<td>把几个标签设置成一个组，这个一般会配合data-type="horizontal"一起使用</td>
</tr>
<tr>
<th>fieldcontain</th>
<td>使用它会给这个标签定义一下下划线和一个下边距</td>
</tr>
<tr>
<th>navbar</th>
<td>从字面的意思你就可以想到它的用法，对就是用来设置你的导航菜单的</td>
</tr>
<tr>
<th>listview</th>
<td>以列表的样式显示（这个样式是预先定好的）这个一般会配合data-inset="true"使用。例如<ul data-role="listview" data-inset="true"></ul></td>
</tr>
<tr>
<th>list-divider </th>
<td>这个是用在li上面的用于设置成众多li的标题，并且这个li中不能存在a标签</td>
</tr>
<tr>
<th>button</th>
<td>这个属性可以使你的标签样式呈现出和按钮相同的外观</td>
</tr>
<tr>
<td rowspan="5"><p>data-theme</p>
<p>（主题）</p></td>
<th>a</th>
<td><img src="http://tech.alltosun.com/home/attachment/201010/29/1464_1288328632rc9d.jpg" alt="主题a" /> 这个是代码风格a也就是默认的风格</td>
</tr>
<tr>
<th>b</th>
<td><img src="http://tech.alltosun.com/home/attachment/201010/29/1464_12883286338Snw.jpg" /></td>
</tr>
<tr>
<th>c</th>
<td><img src="http://tech.alltosun.com/home/attachment/201010/29/1464_1288328633XZB4.jpg" /></td>
</tr>
<tr>
<th>d</th>
<td><img src="http://tech.alltosun.com/home/attachment/201010/29/1464_1288328633VZjV.jpg
" /></td>
</tr>
<tr>
<th>e</th>
<td><img src="http://tech.alltosun.com/home/attachment/201010/29/1464_12883286338b1B.jpg" /></td>
</tr>
<tr>
<td rowspan="2"><p>data-type</p>
<p>（排列方式）</p></td>
<th>horizontal（水平）</th>
<td>这个属性是实现一个组内的标签的排列方向是水平的</td>
</tr>
<tr>
<th>默认就是竖直</th>
<td>如果不想实现水平那么你可以不添加data-type即可！</td>
</tr>
<tr>
<td rowspan="3"><p>data-transition</p>
<p>（切换方式）</p></td>
<th>pop</th>
<td>你可以通过测试得出你想要的切换方式</td>
</tr>
<tr>
<th>slideup</th>
<td>你可以通过测试得出你想要的切换方式</td>
</tr>
<tr>
<th>flip</th>
<td>你可以通过测试得出你想要的切换方式</td>
</tr>
<tr>
<td rowspan="16"><p>data-icon</p>
<p>（图标）</p></td>
<th>delete</th>
<td><a data-icon="delete" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>plus</th>
<td><a data-icon="plus" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>minus</th>
<td><a data-icon="minus" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>arrow-u</th>
<td><a data-icon="arrow-u" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>arrow-d</th>
<td><a data-icon="arrow-d" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>arrow-l</th>
<td><a data-icon="arrow-l" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>arrow-r</th>
<td><a data-icon="arrow-r" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>check</th>
<td><a data-icon="check" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>gear</th>
<td><a data-icon="gear" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>refresh</th>
<td><a data-icon="refresh" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>forward</th>
<td><a data-icon="forward" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>back</th>
<td><a data-icon="back" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>grid</th>
<td><a data-icon="grid" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>star</th>
<td><a data-icon="star" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>alert</th>
<td><a data-icon="alert" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>info</th>
<td><a data-icon="info" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<td rowspan="2"><p>data-iconp<strong>os</strong></p>
<p><strong>（图标对齐）</strong></p></td>
<th>left</th>
<td>这个是默认的左对齐</td>
</tr>
<tr>
<th>right</th>
<td><a data-icon="info" data-role="button" data-iconpos="right" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<td rowspan="2"><p>data-iconpos</p>
<p>(去除文本)</p></td>
<th>notext(去除文本)</th>
<td> <a data-icon="alert" data-role="button" data-iconpos="notext" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<td rowspan="2">data-fullscreen</td>
<th>true（满屏）</th>
<td>设置这个可以实现满屏</td>
</tr>
<tr>
<th>false（非满屏）</th>
<td>这个是默认的如果你不需要满屏就不需要设置这一项</td>
</tr>
<tr>
<td rowspan="3">data-position</td>
<th>fixed</th>
<td>从表面的意思就可以理解，就是实现固定在某个位置不动</td>
</tr>
<tr>
<th>inline</th>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<td rowspan="2">data-inset</td>
<th>true</th>
<td>实现非全屏的圆角效果</td>
</tr>
<tr>
<th>false</th>
<td>默认的就是false</td>
</tr>
<tr>
<td rowspan="2"><p>data-rel</p></td>
<th>dialog(弹出对话框)</th>
<td><a data-icon="alert" data-role="button" data-rel="dialog" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<td rowspan="2">data-inline<br/>
（内联）</td>
<th>true（析成内联样式）</th>
<td><a data-icon="info" data-role="button" data-iconpos="right" data-inline="true" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>false</th>
<td><a data-icon="info" data-role="button" data-iconpos="right" data-inline="false" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<td rowspan="2"><p>data-nobackbtn</p>
<p>(返回按钮)</p></td>
<th>true</th>
<td>设置成true，header中将不再有back按钮出现</td>
</tr>
<tr>
<th>false</th>
<td>默认的有back按钮</td>
</tr>
<tr>
<td></td>
<th></th>
<td></td>
</tr>
<tr>
<td></td>
<th></th>
<td></td>
</tr>
<tr>
<td></td>
<th></th>
<td></td>
</tr>
</tbody>
</table>
</div>
<div id="footer" data-role="footer">
<h4>jquerymobile手册 不断更新...</h4>
</div>
</div>
</body>
</html>
提示：你可以先修改部分代码再运行。
（建议你使用firefox浏览器或者chrome，ie浏览器看不到一些效果！）
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>jquerymobile手册</title>
<meta charset="UTF-8">
<link rel="stylesheet" media="all" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
<style type="text/css">
* { padding:0; margin:0; font-size:14px; }
#header, #footer { }
table { border:1px solid #ccc; margin:0 auto; border-collapse:collapse; }
td, th { height:30px; border:1px solid #ccc; text-align:left; line-height:2; }
th { width:15%; }
caption { font-size:1.5; font-weight:bold; padding:10px; }
img { vertical-align:middle; }
</style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-nobackbtn="false" data-theme="a" id="header">
<h1>jquery mobile手册</h1>
</div>
<div data-role="content">
<table width="98%">
<tbody>
<tr>
<td width="11%" rowspan="10">data-role</td>
<th width="9%">page</th>
<td width="80%">设置你的页面为mobile的样式就靠它了，放在body的下面是mobile的容器<div data-role="page"></div></td>
</tr>
<tr>
<th>header</th>
<td>用来设置你的页面的头部使用方法和page类似，<div data-role="header"></div></td>
</tr>
<tr>
<th>footer</th>
<td>用来设置你的页面的底部使用方法和header类似，<div data-role="footer"></div></td>
</tr>
<tr>
<th>content</th>
<td>用于设置页面的内容部分<div data-role="content"></div></td>
</tr>
<tr>
<th>controlgroup</th>
<td>把几个标签设置成一个组，这个一般会配合data-type="horizontal"一起使用</td>
</tr>
<tr>
<th>fieldcontain</th>
<td>使用它会给这个标签定义一下下划线和一个下边距</td>
</tr>
<tr>
<th>navbar</th>
<td>从字面的意思你就可以想到它的用法，对就是用来设置你的导航菜单的</td>
</tr>
<tr>
<th>listview</th>
<td>以列表的样式显示（这个样式是预先定好的）这个一般会配合data-inset="true"使用。例如<ul data-role="listview" data-inset="true"></ul></td>
</tr>
<tr>
<th>list-divider </th>
<td>这个是用在li上面的用于设置成众多li的标题，并且这个li中不能存在a标签</td>
</tr>
<tr>
<th>button</th>
<td>这个属性可以使你的标签样式呈现出和按钮相同的外观</td>
</tr>
<tr>
<td rowspan="5"><p>data-theme</p>
<p>（主题）</p></td>
<th>a</th>
<td><img src="http://tech.alltosun.com/home/attachment/201010/29/1464_1288328632rc9d.jpg" alt="主题a" /> 这个是代码风格a也就是默认的风格</td>
</tr>
<tr>
<th>b</th>
<td><img src="http://tech.alltosun.com/home/attachment/201010/29/1464_12883286338Snw.jpg" /></td>
</tr>
<tr>
<th>c</th>
<td><img src="http://tech.alltosun.com/home/attachment/201010/29/1464_1288328633XZB4.jpg" /></td>
</tr>
<tr>
<th>d</th>
<td><img src="http://tech.alltosun.com/home/attachment/201010/29/1464_1288328633VZjV.jpg
" /></td>
</tr>
<tr>
<th>e</th>
<td><img src="http://tech.alltosun.com/home/attachment/201010/29/1464_12883286338b1B.jpg" /></td>
</tr>
<tr>
<td rowspan="2"><p>data-type</p>
<p>（排列方式）</p></td>
<th>horizontal（水平）</th>
<td>这个属性是实现一个组内的标签的排列方向是水平的</td>
</tr>
<tr>
<th>默认就是竖直</th>
<td>如果不想实现水平那么你可以不添加data-type即可！</td>
</tr>
<tr>
<td rowspan="3"><p>data-transition</p>
<p>（切换方式）</p></td>
<th>pop</th>
<td>你可以通过测试得出你想要的切换方式</td>
</tr>
<tr>
<th>slideup</th>
<td>你可以通过测试得出你想要的切换方式</td>
</tr>
<tr>
<th>flip</th>
<td>你可以通过测试得出你想要的切换方式</td>
</tr>
<tr>
<td rowspan="16"><p>data-icon</p>
<p>（图标）</p></td>
<th>delete</th>
<td><a data-icon="delete" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>plus</th>
<td><a data-icon="plus" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>minus</th>
<td><a data-icon="minus" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>arrow-u</th>
<td><a data-icon="arrow-u" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>arrow-d</th>
<td><a data-icon="arrow-d" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>arrow-l</th>
<td><a data-icon="arrow-l" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>arrow-r</th>
<td><a data-icon="arrow-r" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>check</th>
<td><a data-icon="check" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>gear</th>
<td><a data-icon="gear" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>refresh</th>
<td><a data-icon="refresh" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>forward</th>
<td><a data-icon="forward" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>back</th>
<td><a data-icon="back" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>grid</th>
<td><a data-icon="grid" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>star</th>
<td><a data-icon="star" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>alert</th>
<td><a data-icon="alert" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>info</th>
<td><a data-icon="info" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<td rowspan="2"><p>data-iconp<strong>os</strong></p>
<p><strong>（图标对齐）</strong></p></td>
<th>left</th>
<td>这个是默认的左对齐</td>
</tr>
<tr>
<th>right</th>
<td><a data-icon="info" data-role="button" data-iconpos="right" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<td rowspan="2"><p>data-iconpos</p>
<p>(去除文本)</p></td>
<th>notext(去除文本)</th>
<td> <a data-icon="alert" data-role="button" data-iconpos="notext" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<td rowspan="2">data-fullscreen</td>
<th>true（满屏）</th>
<td>设置这个可以实现满屏</td>
</tr>
<tr>
<th>false（非满屏）</th>
<td>这个是默认的如果你不需要满屏就不需要设置这一项</td>
</tr>
<tr>
<td rowspan="3">data-position</td>
<th>fixed</th>
<td>从表面的意思就可以理解，就是实现固定在某个位置不动</td>
</tr>
<tr>
<th>inline</th>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<td rowspan="2">data-inset</td>
<th>true</th>
<td>实现非全屏的圆角效果</td>
</tr>
<tr>
<th>false</th>
<td>默认的就是false</td>
</tr>
<tr>
<td rowspan="2"><p>data-rel</p></td>
<th>dialog(弹出对话框)</th>
<td><a data-icon="alert" data-role="button" data-rel="dialog" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<td rowspan="2">data-inline<br/>
（内联）</td>
<th>true（析成内联样式）</th>
<td><a data-icon="info" data-role="button" data-iconpos="right" data-inline="true" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>false</th>
<td><a data-icon="info" data-role="button" data-iconpos="right" data-inline="false" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<td rowspan="2"><p>data-nobackbtn</p>
<p>(返回按钮)</p></td>
<th>true</th>
<td>设置成true，header中将不再有back按钮出现</td>
</tr>
<tr>
<th>false</th>
<td>默认的有back按钮</td>
</tr>
<tr>
<td></td>
<th></th>
<td></td>
</tr>
<tr>
<td></td>
<th></th>
<td></td>
</tr>
<tr>
<td></td>
<th></th>
<td></td>
</tr>
</tbody>
</table>
</div>
<div id="footer" data-role="footer">
<h4>jquerymobile手册 不断更新...</h4>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Vue------第五天（Vue的Ajax请求，使用Axios,目前熟悉了一下，主要包括GET请求、POST请求、并发请求、请求参数的配置、服务器响应的结构以及对服务器响应错误的简单处理）
- 3.1 处理服务器响应
- Android基础入门教程——3.1 基于监听的事件处理机制
- Ajax漫步（四）处理服务器响应
- Ajax技术之与服务器通信-发送请求与处理响应
- Ajax---通过JSON与服务器通信（发送请求和处理响应）
- Ajax基础教程学习(5)_读取响应首部
- 使用jQuery处理AJAX请求的基础学习教程
- AJAX教程3-服务器响应
- AJAX 教程4- 服务器响应
- 使用jQuery处理AJAX请求的基础学习教程
- 基础教程三(天空，地面和雾化处理)
- 第六天 JSON和AJAX基础教程
- AJAX基础教程
- 6.5 开发笔记-异步TCP通信，响应服务器发来的消息，并处理消息
- [Ajax 完整教程]-第 4 页 利用 DOM 进行 Web 响应
- DELPHI基础教程 第十二章 异常处理与程序调试（三）
- ajax调用服务器方法，Sesstion过期的处理方法
- java入门教程-11.6Java图像处理基础
- 比较通用的Ajax响应处理