jquery mobile touch 实例

时间：2021-08-30 03:16:38
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
    <link rel="stylesheet" href="jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery.ui.effect.min.js"></script>
    <style type="text/css">
        * { 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>
    <script type="text/javascript">
        $(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>
    <div id="touch-box">
        <div data-role="navbar" data-grid="c">
            <ul>
                <li id="firsta"><a href="#" class="ui-btn-active">新闻</a></li>
                <li id="seconda"><a href="#">娱乐</a></li>
                <li id="thirda"><a href="#">大事</a></li>
                <li id="fortha"><a href="#">小事</a></li>
            </ul>
            <div class="asdd">
                <div style="width: 25%; height: 20px; background-color: #f00; position: relative;" id="box"></div>
            </div>
        </div>
        <ul id="ul-one" class="ul-active ul-style">
            <li><a href="#" style="color: #333">Acura</a></li>
            <li><a href="#" style="color: #333">Audi</a></li>
            <li><a href="#" style="color: #333">BMW</a></li>
            <li><a href="#" style="color: #333">Cadillac</a></li>
            <li><a href="#" style="color: #333">Ferrari</a></li>
        </ul>
        <ul id="ul-two" class="ul-style">
            <li><a href="#" style="color: #333">sd</a></li>
            <li><a href="#" style="color: #333">sd</a></li>
            <li><a href="#" style="color: #333">sd</a></li>
            <li><a href="#" style="color: #333">sdc</a></li>
            <li><a href="#" style="color: #333">sdi</a></li>
        </ul>
        <ul id="ul-three" class="ul-style">
            <li><a href="#" style="color: #333">df</a></li>
            <li><a href="#" style="color: #333">df</a></li>
            <li><a href="#" style="color: #333">df</a></li>
            <li><a href="#" style="color: #333">df</a></li>
            <li><a href="#" style="color: #333">df</a></li>
        </ul>
        <ul id="ul-four" class="ul-style">
            <li><a href="#" style="color: #333">we</a></li>
            <li><a href="#" style="color: #333">we</a></li>
            <li><a href="#" style="color: #333">df</a></li>
            <li><a href="#" style="color: #333">ewc</a></li>
            <li><a href="#" style="color: #333">wei</a></li>
        </ul>
    </div>
</body>
</html>

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

  1. jquery mobile Touch事件

    Touch事件在用户触摸屏幕(页面)时触发 1.jquery mobile tap tap事件在用户敲击某个元素时触发 $("p").on("tap",fucn ...

  2. jQuery Mobile和Sencha Touch哪个更适合你？

    纯粹的总结一下移动web开发框架,移动web开发框架有jQuery Mobile .Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家族 ...

  3. &lpar;转&rpar;Sencha Touch和jQuery Mobile的比较

    原文:http://extjs.org.cn/node/664 Sencha Touch和jQuery Mobile的比较 Posted 周三, 08/07/2013 - 10:07 by admin ...

  4. Sencha Touch 和 jQuery Mobile 的比较

    Sencha Touch 和 jQuery Mobile 的比较 英文原文:Sencha Touch vs jQuery Mobile 标签: Sencha Touch jQuery Mobile 1 ...

  5. jquery mobile自己定义webapp开发实例（一）——前言篇

    用jquery mobile做了一段时间的webapp开发,准备用自己的一个小demo做一个模块化的分享 点击demo演示 手机演示二维码: 此demo已经是比較老的版本号,用户体验流畅度确实还存在非 ...

  6. 移动Web框架&colon;jQuery Mobile VS Sencha Touch

    最近常被问到是用 jQuery Mobile还是Sencha Touch,本人也比较关注这两个框架,试图从以下两方面发表点儿见解: 身家背景,都系出名门 1.jQuery Mobile 建立在jQue ...

  7. Sencha Touch vs jQuery Mobile

    Sencha Touch:重量级框架,类似于Flex SDK;组件封装较多;在各平台交互表现统一(内部封装);入门门槛较高 jQuery Mobile:轻量级框架,实质是jQuery插件;组件较少;交 ...

  8. Sencha Touch和jQuery Mobile的比较

    第一组-行销和平台支持 Sencha Touch和jQuery Mobile都以HTML5框架著称.jQuery Mobile谦虚的说自己只是内建于所有流行的移动设备平台,而Sencha Touch则 ...

  9. Jquery Mobile实例--利用优酷JSON接口读取视频数据

    本文将介绍,如何利用JqueryMobile调用优酷API JSON接口显示视频数据. (1)注册用户接口. 首页,到 http://open.youku.com 注册一个账户,并通过验证.然后找到A ...

随机推荐

  1. &lpar;转&rpar;CString截取字符串全攻略

    附:去掉空格方法 CString str("e w r we  中华ADF 华AG中"); newstr=str.Replace(" ", "&quo ...

  2. 配置hibernate例子

    一.hiberbate.cfg.xml <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE hib ...

  3. &lbrack;压缩解压缩&rsqb; SharpZip--压缩、解压缩帮助类

    里面有三个类都是用于压缩和解压缩的.大家看下图片 看下面代码吧 /// <summary> /// 类说明:SharpZip /// 编 码 人:苏飞 /// 联系方式:361983679 ...

  4. MySQL命令mysqldump参数大全

    参数参数说明--all-databases  , -A导出全部数据库.mysqldump  -uroot -p --all-databases--all-tablespaces  , -Y导出全部表空 ...

  5. JavaWeb核心编程之&lpar;三&period;1&rpar;ServletHello

    Servlet简介Java Servlet是和平台无关的服务器端组件,它运行在Servlet容器中. Servlet容器负责Servlet和客户的通信以及调用Servlet方法, 在这里Servlet ...

  6. &lpar;简单&rpar; POJ 2406 Power Strings，扩展KMP。

    Description Given two strings a and b we define a*b to be their concatenation. For example, if a = & ...

  7. XVII Open Cup named after E&period;V&period; Pankratiev&period; Grand Prix of America &lpar;NAIPC-2017&rpar;

    A. Pieces of Parentheses 将括号串排序,先处理会使左括号数增加的串,这里面先处理减少的值少的串:再处理会使左括号数减少的串,这里面先处理差值较大的串.确定顺序之后就可以DP了. ...

  8. taskService 流程任务组件

    act_ru_task:任务表act_ru_identitylink:权限表(流程定义和用户组(用户)之间的权限数据)act_ru_variable:参数表act_hi_attachment:任务附件 ...

  9. PostgreSQL内核分析——BTree索引

    文中附图参考至<PostgreSQL数据库内核分析> (一)概念描述 B+树是一种索引数据结构,其一个特征在于非叶子节点用于描述索引,而叶子节点指向具体的数据存储位置.在PostgreSQ ...

  10. &sol;usr&sol;bin&sol;ld&colon; cannot find -lc错误原因及解决方法

    问题解决 我在执行如下命令的时候,出现了错误. gcc -o main main.c -static -L. –lmylib Linux环境下gcc静态编译/usr/bin/ld: cannot fi ...

相关文章