<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#pagetwo",function(){
$("p").on("tap",function(){
$(this).hide();
});
$("span").on("taphold",function(){
$(this).hide();
});
$("h2").on("swipeleft",function(){
$(this).hide();
});
$("h3").on("swiperight",function(){
$(this).hide();
});
$(document).on("scrollstart",function(){
alert("开始滚动!");
});
$(document).on("scrollstop",function(){
alert("停止滚动!");
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<a href="#" data-role="button">首页</a>
<h1>jquery mobile</h1>
<a href="#" data-role="button" class="ui-btn-right">搜索</a>
<!-- 右侧浮动类 ui-btn-right -->
</div>
<div>
<p>链接 过渡模式 打开新对话 按钮图标 选中效果</p>
<p>列表 提示气泡 字母分类 搜索</p>
<p>表格 百分百</p>
<p>表单 日期 开关 滑动块</p>
<p>头部 左右两侧图标</p>
<p>底部 半透明 点击隐藏</p>
<p>手风琴</p>
</div>
<div data-role="content">
<div>
<h1>按钮 button</h1>
<a href="" data-role="button" data-icon="search" data-iconpos="right">按钮图标 icon+位置 iconpos</a>
<a href="" data-role="button" data-corners="false" data-inline="true">直角 corners+行内按钮 inline</a>
<a href="" data-role="button" data-icon="search" data-iconpos="notext" data-inline="true" class="ui-nodisc-icon">只显示图标 iconpos</a>
<!-- 去除底色类 ui-nodisc-icon -->
<a href="" data-role="button" data-mini="true" data-shadow="false">小型按钮 mini+无阴影 shadow</a>
<div data-role="controlgroup" data-type="horizontal" data-mini="mini">
<a href="" data-role="button" class="ui-btn-active ui-state-persist">横向 horizontal</a>
<!-- 默认选中类 ui-btn-active ui-state-persist -->
<a href="" data-role="button" >小型 mini</a>
</div>
</div>
<div>
<h1>链接属性 transition</h1>
<br/>
<a href="#" data-rel="back">回上一页 back</a>
<a href="#pagetwo" data-rel="dislog">打开新会话 dislog</a>
<a href="#pagetwo" data-transition="fade">事件</a>
<a href="#pagetwo" data-transition="flip">过渡模式 flip</a>
<a href="#pagetwo" data-transition="flow">过渡模式 flow</a>
<a href="#pagetwo" data-transition="pop">过渡模式 pop</a>
<a href="#pagethr">对话框 </a>
</div>
<h1>折叠元素 collapsible</h1><br/>
<div data-role="collapsible" data-collapsed="false" data-collapsed-icon="arrow-l" data-expanded-icon="arrow-r" data-iconpos="right" data-inset="false" data-mini="true">
<h1>默认展开 collapsed</h1>
<p>图标 collapsed-icon</p>
<p>图标 expanded-icon</p>
<p>图标位置 iconpos</p>
<p>圆角 inset</p>
<p>小型 mini</p>
</div>
<br/>
<h1>手风琴 collapsible-set</h1>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>内容同折叠元素</p>
</div>
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>内容同折叠元素</p>
</div>
</div>
<div>
<h1>列表 listview 圆角 inset</h1>
<br/>
<ul data-role="listview" data-autodividers="true" data-filter="true" data-filter-placeholder="搜索 filter" data-icon="search" data-inset="true">
<li data-role="list-divider">列表分割 list-divider</li>
<li data-icon="arrow-l"><a href="">autodividers</a></li>
<li><a href=""><span class="ui-li-count">123</span>autodividers</a></li>
<!-- 气泡文字类 ui-li-count -->
<li><a href="">拆分列表</a><a href="">cfda</a></li>
<li><a href="" class="ui-hidden-accessible">cfda</a></li>
<!-- 隐藏类 ui-hidden-accessible -->
</ul>
</div>
<div>
<h1>表格布局 ui-grid-d</h1>
<div class="ui-grid-d">
<div class="ui-block-a">
<a href="#" class="ui-btn ui-corner-all ui-shadow">第一列</a><br>
<span>第一列: 这是一些文本。 </span>
</div>
<div class="ui-block-b">
<a href="#" class="ui-btn ui-corner-all ui-shadow">第二列</a><br>
<span>第二列: 这是一些文本。</span>
</div>
<div class="ui-block-c">
<a href="#" class="ui-btn ui-corner-all ui-shadow">第三列</a><br>
<span>第三列: 这是一些文本。 </span>
</div>
<div class="ui-block-d">
<a href="#" class="ui-btn ui-corner-all ui-shadow">第四列</a><br>
<span>第四列: 这是一些文本。</span>
</div>
<div class="ui-block-e">
<a href="#" class="ui-btn ui-corner-all ui-shadow">第五列</a><br>
<span>第五列: 这是一些文本。</span>
</div>
</div>
</div>
<div>
<form data-mini="true">
<h1>配对 label+input</h1>
<div data-role="fieldcontain">
<label for="text">点击</label>
<input type="text" id="text">
<label for="text1">点击</label>
<input type="text" id="text1">
</div>
<h1>时间 data 邮箱 email</h1>
<input type="date"/>
<input type="email" placeholder="你的电子邮箱.."/>
<h1>按钮选择 slider</h1>
<select data-role="slider" data-mini="true">
<option>小型</option>
<option>mini</option>
</select>
<h1>滑动块 range</h1>
<input type="range" data-highlight="true" data-mini="true" value="50" min="0" max="100"/>
<h1>单选按钮 radio</h1>
<label for="rad1">单选按钮</label>
<input type="radio" id="rad1" value="小型" name="rad"/>
<label for="rad2">单选按钮</label>
<input type="radio" id="rad2" value="mini" name="rad"/>
<h1>复选框 checkbox</h1>
<label for="checkbox">小型复选框 mini</label>
<input type="checkbox" id="checkbox" data-mini="true"/>
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<label for="checkbox1">横向 horizontal</label>
<input type="checkbox" id="checkbox1" data-mini="true" checked/>
<label for="checkbox2">小型 mini</label>
<input type="checkbox" id="checkbox2" data-mini="true"/>
</div>
<h1>选择 select</h1>
<div data-role="controlgroup" data-type="horizontal">
<select data-icon="search" data-inline="true" data-mini="true">
<option>组合 controlgroup</option>
<option>横排 horizontal</option>
</select>
<select data-icon="search" data-inline="true" data-mini="true" data-iconpos="left">
<option>内联 inline</option>
<option>图标 icon 位置 iconpos</option>
</select>
</div>
</form>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div data-role="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="true" class="ui-btn">
<!-- 子元素居中类 ui-btn -->
<h1>固定 fixed 半透明 fullscreen 点击消失 tap-toggle</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#pageone" data-transition="slidedown">过渡模式 slidedown</a>
<a href="#pageone" data-transition="slidefade">过渡模式 slidefade</a>
<a href="#pageone" data-transition="slideup">过渡模式 slideup</a>
<a href="#pageone" data-transition="turn">过渡模式 turn</a>
<a href="#pagethr" data-rel="popup">弹窗 popup</a>
<div>
<h1>事件</h1>
<p>点击</p>
<span>长按</span>
<h2>向左滑动</h2>
<h3>向右滑动</h3>
</div>
</div>
</div>
<div data-role="page" data-dialog="true" id="pagethr">
<div data-role="header">
<h1>我是对话框</h1>
</div>
<div data-role="content">
<a href="#pageone" data-transition="slidedown">过渡模式 slidedown</a>
</div>
<div data-role="footer">
<h1>对话框底部文本</h1>
</div>
</div>
</body>
</html>