bob体育官方平台
利用jQueryMobile完结滑动翻页效果的艺术_jquery_脚本之家

本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法。分享给大家供大家参考。具体分析如下:

本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法。分享给大家供大家参考。具体分析如下:

jQuery Mobile弹出窗、弹出层知识汇总,jquerymobile

先创建一个窗体

<div data-role="popup" id="popupView" class="ui-content" data-overlay-theme="b" data-position-to="window" data-dismissible="false">
  <a href='javascript:void(0)' data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
  <div>弹出窗内容<div>
</div>

1)点击后弹出

<a href="#popupView" data-rel="popup" data-transition="flip" class="ui-btn ui-corner-all">按钮</a> 

2)页面加载后弹出

//页面延时加载<script>
setTimeout(function () {
  $("#popupView").popup('open');
}, 1000);//1秒</script> 

关键字说明:

data-overlay-theme: 背景色透明灰 data-position-to: 弹窗在窗口居中显示 data-dismissible: 是否允许单击窗口外任一位置关闭窗口(默认true为允许) data-transition: 弹出方式

下面通过代码实例详解jquery mobile 弹出层使用

引入文件

<head> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
</head>

弹出层基础

创建一个弹出层,要在div标签中添加一个 data-role="popup" 属性,然后在添加一个a标签,并在a标签href属性中设置弹出div层的id,在a标签中添加属性

data-rel="popup"
To create a popup, add the data-role="popup" attribute to a div with the popup contents. Then create a link with the href set to the id of the popup div, and add the attribute data-rel="popup" to tell the framework to open the popup when the link is tapped. A popup div has to be nested inside the same page as the link.
<a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="pop">Basic Popup</a>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.</p>
</div>

简单实例

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="pop">点击我弹出层</a>
<div data-role="popup" id="popupBasic">
<p>弹出层测试</p>
</div>
</div> 
</body>
</html>

工具提示可以通过添加一个主题创建样本基本通过ui-content弹出并添加填充

A tooltip can be created by adding a theme swatch to a basic popup and adding padding via the ui-content class. 
<p>A paragraph with a tooltip. <a href="#popupInfo" data-rel="popup" data-transition="pop" class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext" title="Learn more">Learn more</a></p>
<div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;">
<p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p>
</div>

提示信息实例

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<p>A paragraph with a tooltip. <a href="#popupInfo" data-rel="popup" data-transition="pop" class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext" title="Learn more">Learn more</a></p>
<div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;">
<p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p>
</div>
</div> 
</body>
</html>

弹出图片

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<a href="#popupParis" data-rel="popup" data-position-to="window" data-transition="fade"><img class="popphoto" src="http://www.bkjia.com/uploads/allimg/160107/0051332V9-3.jpg" alt="Paris, France" style="width:30%"></a>
<a href="#popupSydney" data-rel="popup" data-position-to="window" data-transition="fade"><img class="popphoto" src="http://www.bkjia.com/uploads/allimg/160107/0051331a9-1.jpg" alt="Sydney, Australia" style="width:30%"></a>
<a href="#popupNYC" data-rel="popup" data-position-to="window" data-transition="fade"><img class="popphoto" src="http://www.bkjia.com/uploads/allimg/160107/005133B03-2.jpg" alt="New York, USA" style="width:30%"></a>
<div data-role="popup" id="popupParis" data-overlay-theme="b" data-theme="b" data-corners="false">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img class="popphoto" src="http://www.bkjia.com/uploads/allimg/160107/0051332V9-3.jpg" style="max-height:512px;" alt="Paris, France">
</div>
<div data-role="popup" id="popupSydney" data-overlay-theme="b" data-theme="b" data-corners="false">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img class="popphoto" src="http://www.bkjia.com/uploads/allimg/160107/0051331a9-1.jpg" style="max-height:512px;" alt="Sydney, Australia">
</div>
<div data-role="popup" id="popupNYC" data-overlay-theme="b" data-theme="b" data-corners="false">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img class="popphoto" src="http://www.bkjia.com/uploads/allimg/160107/005133B03-2.jpg" style="max-height:512px;" alt="New York, USA">
</div>
</div> 
</body>
</html>

滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见

jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。就是能够迅速能把页面写成APP的界面,让用户浏览网页,相当于在使用布局好的app一样。

您可能感兴趣的文章:

  • jquery Mobile入门—多页面切换示例学习
  • jquery Mobile入门—外部链接切换示例代码
  • jQuery Mobile页面跳转后未加载外部JS原因分析及解决
  • jquery mobile实现拨打电话功能的几种方法
  • jquery mobile changepage的三种传参方法介绍
  • 让jQuery Mobile不显示讨厌loading界面的方法
  • jquery mobile动态添加元素之后不能正确渲染解决方法说明
  • JqueryMobile动态生成listView并实现刷新的两种方法
  • jquerymobile局部渲染的各种刷新方法小结
  • jQuery Mobile + PHP实现文件上传
  • 使用jQueryMobile实现滑动翻页效果的方法
  • jquery.mobile 共同布局遇到的问题小结

Mobile弹出窗、弹出层知识汇总,jquerymobile 先创建一个窗体 div data-role="popup" id="popupView" class="ui-content" data-overlay-theme="b" data-position-to=...

虽然这个功能可以在jQueryMobile中实现,但是个人与之前一篇【jQuery手机浏览器中拖拽动作的艰难性分析】中的观点一致,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势,以免跟手机浏览器与手机系统本身的手势发生冲突。

首先要在jQueryMobile下载一个压缩包,然后把这个压缩包的所有内容拉到你的站点文件夹,虽然在网页仅仅是引用jquery.mobile-1.4.5.js与jquery.mobile-1.4.5.css,但是其他的辅助文件除了说明文档demo文件夹外缺一不可。即使它的js文件与css文件,但它不像Bootstrap一样,把所有功能集成到一个js里面,如果缺乏某些文件夹,某些图标可能无法显示。而且,请把原根文件夹jquery.mobile-1.4.5的名字改成jqmobile或者其他,反正文件夹中别有.-这些标点符号,否则,在网页中引用jquery.mobile-1.4.5.js与jquery.mobile-1.4.5.css可能失效。

那么,使用jQueryMobile实现滑动翻页的效果到底怎么做呢?

同时,jquery.mobile作为一个插件,需要jQuery1.11支持,可以到jQuery官网中下载兼容旧浏览器IE6的jQuery1.11,而不是不兼容旧浏览器IE6的jQuery2。把下载到的jQuery1.11.js也与jQueryMobile的文件放在一起吧。如下图:

一、基本目标

之后就可以在网页编写页面,代码如下,详情请看注释。复制代码 代码如下:

在手机浏览器中的jQueryMobile框架页中现实滑动手势翻页的功能,如下图:

a

返回顶部