jquery mobile touch 实例

<!DOCTYPE html>

<head>

* { font-family: 'Microsoft YaHei'; }

body, html { width: 100%; }

div .asdd div { }

.one { left: 0%; }

.two { left: 25%; }

.three { left: 50%; }

.four { left: 75%; }

#ul-one, #ul-two, #ul-three, #ul-four { position: relative; }

#ul-one { left: 0%; }

#ul-two { left: 100%; display: none; }

#ul-three { left: 100%; display: none; }

#ul-four { left: 100%; display: none; }

.ul-active { display: block; }

#touch-box { width: 100%; }

.ul-style { list-style: none; margin-top: 0px; padding-left: 0px; }

.ul-style > li { width: 100%; background: -webkit-linear-gradient(top,#f1f1f1,#fdfdfd); padding: 5px; background: -moz-linear-gradient(top,#f1f1f1,#fdfdfd); background: -o-linear-gradient(top,#fff,#fdfdfd); border-top: 1px solid #ccc; padding: 3px; }

.ul-style :last-child { border-bottom: 1px solid #ccc; padding: 3px; }

.ul-style li > a { text-decoration: none; margin: 1%; }

</style>

$(function () {

var arr = ["#firsta a", "#seconda a", "#thirda a", "#fortha a"], arry = 0, ularr = ["#ul-one", "#ul-two", "#ul-three", "#ul-four"];

$(document)

.bind("swiperight", function () { $(".ui-btn-active").removeClass("ui-btn-active"); arry++; if (arry > 3) arry = 0; $(arr[arry]).addClass("ui-btn-active"); $(".ul-active").removeClass("ul-active").animate({ "left": "-100%" }, 300).hide(); $("#box").animate({ "left": arry * 25 + "%" }, "easeOutQuint"); $(ularr[arry]).show().addClass("ul-active").animate({ "left": "0%" }, 300); })

.bind("swipeleft", function () { $(".ui-btn-active").removeClass("ui-btn-active"); arry--; if (arry < 0) arry = 3; $(arr[arry]).addClass("ui-btn-active"); $(".ul-active").removeClass("ul-active").animate({ "left": "-100%" }, 300).hide(); $("#box").animate({ "left": arry * 25 + "%" }, "easeOutQuint"); $(ularr[arry]).show().addClass("ul-active").animate({ "left": "0%" }, 300); });

$("#firsta").click(function () { $(".ul-active").removeClass("ul-active").animate({ "left": "-100%" }, 300).hide(); $("#box").animate({ "left": "0%" }, "easeOutQuint"); $("#ul-one").show().addClass("ul-active").animate({ "left": "0%" }, 300); });

$("#seconda").click(function () { $(".ul-active").removeClass("ul-active").animate({ "left": "-100%" }, 300).hide(); $("#box").animate({ "left": "25%" }, "easeOutQuint"); $("#ul-two").show().addClass("ul-active").animate({ "left": "0%" }, 300); });

$("#thirda").click(function () { $(".ul-active").removeClass("ul-active").animate({ "left": "-100%" }, 300).hide(); $("#box").animate({ "left": "50%" }, "easeOutQuint"); $("#ul-three").show().addClass("ul-active").animate({ "left": "0%" }, 300); });

$("#fortha").click(function () { $(".ul-active").removeClass("ul-active").animate({ "left": "-100%" }, 300).hide(); $("#box").animate({ "left": "75%" }, "easeOutQuint"); $("#ul-four").show().addClass("ul-active").animate({ "left": "0%" }, 300); });

})

</script>

</head>

<body>

<ul>

</ul>

</div>

<li><a href="#" style="color: #333">Acura</a></li>

<li><a href="#" style="color: #333">Cadillac</a></li>

<li><a href="#" style="color: #333">Ferrari</a></li>

</ul>

</ul>

</ul>

</ul>

</div>

</body>

</html>

jquery mobile touch 实例的更多相关文章

jquery mobile Touch事件
Touch事件在用户触摸屏幕(页面)时触发 1.jquery mobile tap tap事件在用户敲击某个元素时触发 $("p").on("tap",fucn ...
jQuery Mobile和Sencha Touch哪个更适合你？
纯粹的总结一下移动web开发框架,移动web开发框架有jQuery Mobile .Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家族 ...
(转)Sencha Touch和jQuery Mobile的比较
原文:http://extjs.org.cn/node/664 Sencha Touch和jQuery Mobile的比较 Posted 周三, 08/07/2013 - 10:07 by admin ...
Sencha Touch 和 jQuery Mobile 的比较
Sencha Touch 和 jQuery Mobile 的比较英文原文:Sencha Touch vs jQuery Mobile 标签: Sencha Touch jQuery Mobile 1 ...
jquery mobile自己定义webapp开发实例（一）——前言篇
用jquery mobile做了一段时间的webapp开发,准备用自己的一个小demo做一个模块化的分享点击demo演示手机演示二维码: 此demo已经是比較老的版本号,用户体验流畅度确实还存在非 ...
移动Web框架:jQuery Mobile VS Sencha Touch
最近常被问到是用 jQuery Mobile还是Sencha Touch,本人也比较关注这两个框架,试图从以下两方面发表点儿见解: 身家背景,都系出名门 1.jQuery Mobile 建立在jQue ...
Sencha Touch vs jQuery Mobile
Sencha Touch:重量级框架,类似于Flex SDK;组件封装较多;在各平台交互表现统一(内部封装);入门门槛较高 jQuery Mobile:轻量级框架,实质是jQuery插件;组件较少;交 ...
Sencha Touch和jQuery Mobile的比较
第一组-行销和平台支持 Sencha Touch和jQuery Mobile都以HTML5框架著称.jQuery Mobile谦虚的说自己只是内建于所有流行的移动设备平台,而Sencha Touch则 ...
Jquery Mobile实例--利用优酷JSON接口读取视频数据
本文将介绍,如何利用JqueryMobile调用优酷API JSON接口显示视频数据. (1)注册用户接口. 首页,到 http://open.youku.com 注册一个账户,并通过验证.然后找到A ...

随机推荐

IOS面试攻略
IOS面试攻略(1.0) 2013-10-13 20:58:09| 分类: IOS面试 | 标签:ios知识点总汇 ios面试 |举报|字号订阅来自:伊甸网 @ 看到这个关键字,我 ...
ubuntu设置系统时间与网络时间同步
ubuntu设置系统时间与网络时间同步 Linux的时间分为System Clock(系统时间)和Real Time Clock (硬件时间,简称RTC). 系统时间:指当前Linux Ker ...
Vector3.Dot 与Vector3.Cross
Vector3.Dot(点积) : 点积的计算方式为: a·b=|a|·|b|cos<a,b>; 其中<a,b>和<b,a> 夹角不分顺序; 物理学中点积用来计算 ...
Android 中如何使用动画
1:首先在res/anim/文件夹下建立动画xml文件. 2:在java代码中对UI控件使用动画. //加载动画 Animation myAnim=AnimationUtils.loadAnimati ...
C++面试问题总结
转自:http://blog.csdn.net/wangtengqiang/article/details/8061806 1.static用法 static 的成员函数和成员变量,可直接通过类名:: ...
Owncloud中文目錄包裹下載
Owncloud提供私有雲端儲存環境的自由軟體解決方案,目前4.5版中文支援已經很完整,但是早期ZIP壓縮檔內的檔名不支援utf-8,所以使用ZIP格式下載整個目錄或多個檔案時大部分解縮軟體無法正確處 ...
ASP.NET MVC – 关于Action返回结果类型的事儿（上）
原文:ASP.NET MVC – 关于Action返回结果类型的事儿(上) 本文转自:博客园-文超的技术博客一. ASP.NET MVC 1.0 Result 几何? Action的 ...
Manor
Description Bob有n个正整数,他将这n个整数根据大小划分成两部分.对于小于等于k的整数放在集合A中,其余的放在集合B中.每次他从集合B中取出一个最大的值,将其变成0放入A集合中.然后将A ...
linux下so动态库一些不为人知的秘密
linux 下有动态库和静态库,动态库以.so为扩展名,静态库以.a为扩展名.二者都使用广泛.本文主要讲动态库方面知识. 基本上每一个linux 程序都至少会有一个动态库,查看某个程序使用了那些 ...
WPF Customize TabControl
有篇很好的文章 http://www.blogs.intuidev.com/post/2010/01/25/TabControlStyling_PartOne.aspx 详细介绍了如何Customiz ...

jquery mobile touch 实例

jquery mobile touch 实例的更多相关文章

随机推荐

热门专题