为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery Mobile基础

标签:
JQuery

<!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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="//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>


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消