使用jquery mobile做幻灯播放效果实现步骤
使用jquery mobile，可以很容易实现幻灯播放效果，下面讲解下。
1、引入相关的jqury mobile类库
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title> jQuery Mobile Presentation</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<div data-role="page" id="slide1" data-theme="a" data-transition="fade">
<div data-role="header">
<h1>Slide 1</h1>
</div>
<div data-role="content">
</div>
</div>
3、接下来是每个幻灯片之间的来回导航了，代码为：
代码如下:
var changeSlide = function(toSlide){
if(toSlide.length)
$.mobile.changePage( toSlide, { transition: toSlide.jqmData('transition') } );
};
// 返回主页
var getHomeSlide = function(){
return $(':jqmData(role=page):first');
};
// go home
var goHome = function(){
changeSlide( getHomeSlide() );
return false;
};
// 到下一页
var getNextSlide = function(slide){
return slide.next(':jqmData(role=page)');
};
//到下一页
var goForward = function(){
changeSlide( getNextSlide($.mobile.activePage) );
return false;
};
// 获得前一个页面
var getPrevSlide = function(slide){
return slide.prev(':jqmData(role=page)');
};
// 跳到前一个页面
var goBack = function(){
changeSlide( getPrevSlide($.mobile.activePage) );
return false;
};
注意一下，使用了 $.mobile.changePage方法来实现页面的跳转，并且跳转是带有
跳转效果参数的，比如：
//transition to the "about us" page with a slideup transition
$.mobile.changePage( "about/us.html", { transition: "slideup"} );
//transition to the "search results" page, using data from a form with an id of "search"
$.mobile.changePage( "searchresults.php", {
type: "post",
data: $("form#search").serialize()
});
而return $(':jqmData(role=page):first');中，实际上jqmData是代替了
jquery的data选择器了。
4、还有一个就是对左右箭头的就是键盘按键的处理了，比如：
代码如下:
$(document).keydown(function(e) {
if(e.keyCode ==39) goForward(); //right
else if(e.keyCode ==37) goBack(); //left
})
.bind("swiperight", goForward )
.bind("swipeleft", goBack );
5、对导航条的处理
当每个幻灯片加载时，导航条自动加载到页面的footer部分，
这个要在'pagebeforecreate前加载，
代码如下:
$(':jqmData(role=page)').live( 'pagebeforecreate',function(event){
var slide = $(this);
// 找到footer
var footer = $(":jqmData(role=footer)", slide );
if( !footer.length ) {
//添加到页面底部
footer = $('<div data-role="footer" data-position="fixed" data-fullscreen="true"/>').appendTo(slide);
};
// add nav. bar
footer.html('<div data-role="navbar">'+
'[list]'+
'[*]<a data-icon="back"></a>
'+
'[*]<a data-icon="home"></a>
'+
'[*]<a data-icon="forward"></a>
' +
'[/list]'+
'</div>');
// 处理前，后页的点击按钮
var backButton = $(':jqmData(icon=back)', footer).click( goBack );
var homeButton = $(':jqmData(icon=home)', footer).click( goHome );
var forwardButton = $(':jqmData(icon=forward)', footer).click( goForward );
// 获得前，后，主页
var prevSlide = getPrevSlide( slide ), homeSlide = getHomeSlide(), nextSlide = getNextSlide( slide ) ;
// 是否存在前一页，存在的话设置可以点击的样式
if( prevSlide.length ) {
backButton.attr('href', '#'+ prevSlide.attr('id') );
homeButton.attr('href', '#'+ homeSlide.attr('id') )
}else{
//禁止其按钮
backButton.addClass('ui-disabled');
homeButton.addClass('ui-disabled')
};
// 是否存在后一页
if( nextSlide.length ) {
forwardButton.attr('href', '#'+ nextSlide.attr('id') )
}else{
// 禁止其按钮
forwardButton.addClass('ui-disabled')
};
//.........
});
6、根据情况加载图片
如果幻灯片很多的话，不应该全部加载图片，应该先加载小的图片，并且可以根据屏幕大小判断用什么图片，比如：
代码如下:
<img src="empty.gif" class="photo"
data-small="..."
data-large="..."/>
var loadImages = function(slide) {
var width = $(window).width();
//根据屏幕大小判断使用图片大小
var attrName = width > 480? 'large' : 'small';
$('img:jqmData('+attrName+')', slide).each(function(){
var img = $(this);
var source = img.jqmData(attrName);
if(source) img.attr('src', source).jqmRemoveData(attrName);
});
};
整个运行效果见：
http://moretechtips.googlecode.com/svn/mobile-presentation/index.htm
相关推荐
-
jQuery Mobile弹出窗、弹出层知识汇总
先创建一个窗体 <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="ba
-
jquery mobile页面跳转后样式丢失js失效的解决方法
用ajax跳转的时候,从a.html跳转到b.html后,b.html的css以及js都失效了. 方法: 将当前页面b.html需要用到的css以及js放在<page>div内. 原理: 由于jqm的ajax跳转的时候,只会把b.html中<page>内的内容加载进dom,而<page>外的代码都不会加载,所以导致在<page>外的js和css都失效了.
-
JQuery动态创建DOM、表单元素的实现代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
jquery-mobile基础属性与用法详解
本文实例讲述了jquery-mobile基础属性与用法.分享给大家供大家参考,具体如下: 写在前面 本文是根据w3c 学习轨迹,自己研习过程中记录下的笔记,只供自己学习轨迹记录之用,不喜勿喷. 0. 引入库 引入对应的文件: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="
-
jquery mobile实现拨打电话功能的几种方法
如果需要在移动浏览器中实现拨打电话,发送email,调用sns等功能,jquery mobile提供的接口是一个好办法. 采用url链接的方式,实现在safari ios,android 浏览器,webos 浏览器,塞班浏览器,ie,operamini等主流浏览器,进行拨打电话功能. 1.最常用的方式: 复制代码 代码如下: <a href="tel:+120">报警!</a> 在拨号界面,显示号码,并提示拨打. 支持大部分的浏览器,但是在qq浏览器上支持不好.
-
让jQuery Mobile不显示讨厌loading界面的方法
jQuery Mobile 的一个BUG: 当不采用 ajax 以及 他自己的 back 返回的时候,即: 点击浏览器后退按钮时,将会从缓存之中加载页面,此时,讨厌的 loading 动画出来了,而且一直不消失. 网上找了好多解决方法,搜索了好久都没有好用的,今天突然想起来个釜底抽薪,直接动jqeury-mobile 的类库. 用编辑器打开, 找到显示pageLoading的方法, showPageLoadingMsg 的定义处: 然后加上一句代码,if("".length<5)
-
jquerymobile局部渲染的各种刷新方法小结
在JQueryMobile页面在第一次初始化进行一次整体渲染,动态生成的需要局部渲染. 在jquerymobile实现listview局部渲染的方法: 复制代码 代码如下: function queryPublishOrderList(trackOrDealOrInsp,userCode,type,pageNum){ var queryPublishOrderListURL="http://xxx.xxx.xxx.xxx/Myapp/WorkOrderSelByTypeService.
-
jQuery Mobile的loading对话框显示/隐藏方法分享
显示loading对话框方法是: 复制代码 代码如下: $.mobile.showPageLoadingMsg(); 也可设置参数 复制代码 代码如下: $.mobile.showPageLoadingMsg("b","加载中",false); 隐藏loading对话框方法是: 复制代码 代码如下: $.mobile.hidePageLoadingMsg();
-
jquery-mobile表单的创建方法详解
本文实例讲述了jquery-mobile表单的创建方法.分享给大家供大家参考,具体如下: 一.注意事项 1. <form> 元素必须设置 method 和 action 属性 2. 每个表单元素必须设置唯一的 "id" 属性. 该 id 在站点的页面中必须是唯一的. 这是因为 jQuery Mobile 的单页面导航模型允许许多不同的"页面"同时呈现. 3. 每个表单元素必须有一个标记(label). 请设置 label 的 for 属性来匹配元素的 i
-
jQuery Mobile框架中的表单组件基础使用教程
一.表单组件基础 1.组件简介 jQuery Mobile 中的表单组件是基于标准 HTML ,然后在此基础上增强样式,因此即使浏览器不支持 jQuery Mobile 表单仍可正常使用.需要注意的是, jQuery Mobile 会把表单元素增强为触摸设备很容易使用的形式,因此对于 iphone/ipad 与 Android 使用 Web 表单将会变得非常方便. jQuery Mobile 的表单组件有以下几种: (1)文本输入框, type="text" 标记的 input 元素会
-
使用jQueryMobile实现滑动翻页效果的方法
本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法.分享给大家供大家参考.具体分析如下: 滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现,但是个人与之前一篇[jQuery手机浏览器中拖拽动作的艰难性分析]中的观点一致,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势,以免跟手机浏览器与手机系统本身的手势发生冲突. 那么,使用jQueryMobile实现滑动翻页的效果到底怎么做呢
-
jQueryMobile之Helloworld与页面切换的方法
本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法.分享给大家供大家参考.具体分析如下: jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持全球主流的移动平台.就是能够迅速能把页面写成APP的界面,让用户浏览网页,相当于在使用布局好的app一样. 首先要在jQueryMobile(点击此处本站下载)下载一个压缩包,然后把这个压缩包的所有内