jquerymobile的页面滑动切换效果实现

最新推荐文章于 2024-04-20 09:41:11 发布
最新推荐文章于 2024-04-20 09:41:11 发布
阅读量4.1k 收藏 1
点赞数
分类专栏： cordova-android jquerymobile 文章标签： cordova 安卓 jquery mobile
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014359108/article/details/45313117
版权

这里直接给出四个html，可以轮番切换

一、index.html

<!DOCTYPE html>
<html>
<head>
    <title>Splashscreen Example</title>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css" />
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/swap_page.js"></script>
    <script>
      $(function() {
         $( "[data-role='navbar']" ).navbar();
         $( "[data-role='header'], [data-role='footer']" ).toolbar();
      });
      // Update the contents of the toolbars

   </script>
</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a">
    <a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
    <h1>Info</h1>
    <a href="#add-form" data-icon="gear" data-iconpos="notext" class="ui-link ui-btn-right ui-btn ui-icon-gear ui-btn-icon-notext ui-shadow ui-corner-all" data-role="button" role="button">Add</a>
</div><!-- /header -->
<div data-role="page" data-title="Info" id="index" class="jqm-demos"  data-dom-cache="true" data-theme="a" data-prev="page-d" data-next="page-b">
    <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" data-theme="a" id="add-form">

        <form class="userform">

            <h2>Login</h2>

            <label for="name">Username:</label>
            <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">

            <label for="password">Password:</label>
            <input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">

            <div class="ui-grid-a">
                <div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Cancel</a></div>
                <div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Save</a></div>
            </div>
        </form>

    </div>
    <div role="main" class="ui-content jqm-content jqm-fullwidth">

        <h1>Persistent toolbars</h1>

        <p>These pages are a demo of a persistent <a href="http://www.baidu.com" data-ajax="false">Baidu</a> in a fixed footer toolbar. Click on any of the links in the footer, and you'll see the page content transition. Both the persistent header and footer on these pages remain in place during the animation to a new HTML page.</p>

        <p>With the new external toolbars no extra effort is required to now have persistent toolbars. Simply place them outside of the page container on each page they will be loaded on the first page and persist on subsequent pages. The toolbars still need to be placed on each page to account for refresh however they will be ignored if not within a page container.</p>

        <p>Typically, the persistent toolbar technique will be combined with fixed positioning.</p>

        <h2>Updating toolbar contents</h2>

        <p>Because the same toolbar is used on every page, you might want to update the content. In this demo we show how to change the heading in the header and set the nav button of the page currently in view to the active state.</p>

        <div data-demo-js="true"></div>

        <h2>Improving page load with persistent toolbars</h2>

        <p>By combining this technique with a little bit of server side logic you can reduce the file size for each page load significantly by not sending anything except the actual page container back when the request is from ajax. this not only reduces file size but makes the actual processing of the page quicker also. To see an example of this technique see <a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized persistent toolbars</a></p>

        <h3>A note about transitions</h3>

        <p>By Removing the toolbars from the page container they are no longer part of the page transition which dramaticly improves the performance of complex 3D page transitions over the older style of persistent toolbars.</p>

    </div><!-- /content -->

</div><!-- /page -->

<div data-role="footer" data-position="fixed" data-theme="a">
    <div data-role="navbar">
        <ul>
            <li><a href="index.html" data-prefetch="true">Info</a></li>
            <li><a href="page-b.html"  data-prefetch="true">Friends</a></li>
            <li><a href="page-c.html"  data-prefetch="true">Albums</a></li>
            <li><a href="page-d.html"  data-prefetch="true">Emails</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->
</body>
</html>
二、page-b.html 

<!DOCTYPE html>
<html>
<head>
    <title>Splashscreen Example</title>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css" />
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/swap_page.js"></script>
    <script>
      $(function() {
         $( "[data-role='navbar']" ).navbar();
         $( "[data-role='header'], [data-role='footer']" ).toolbar();
      });
      // Update the contents of the toolbars
   </script>

</head>
<body>
<div data-role="page" data-title="Friends"  id="page-b" class="jqm-demos"  data-dom-cache="true" data-theme="a" data-prev="index" data-next="page-c">
    <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" data-theme="a" id="add-form">
        <h1>hahaha</h1>
        <p>哈哈哈啊哈哈</p>
    </div>
    <div class="ui-content" role="main">

        <ul data-role="listview" data-theme="a" data-dividertheme="e" data-filter="true" data-filter-theme="a" data-filter-placeholder="Search friends...">
            <li data-role="list-divider">A</li>
            <li><a href="#">Adam Kinkaid</a></li>
            <li><a href="#">Alex Wickerham</a></li>
            <li><a href="#">Avery Johnson</a></li>
            <li data-role="list-divider">B</li>
            <li><a href="#">Bob Cabot</a></li>
            <li data-role="list-divider">C</li>
            <li><a href="#">Caleb Booth</a></li>
            <li><a href="#">Christopher Adams</a></li>
            <li><a href="#">Culver James</a></li>
            <li data-role="list-divider">D</li>
            <li><a href="#">David Walsh</a></li>
            <li><a href="#">Drake Alfred</a></li>
            <li data-role="list-divider">E</li>
            <li><a href="#">Elizabeth Bacon</a></li>
            <li><a href="#">Emery Parker</a></li>
            <li><a href="#">Enid Voldon</a></li>
            <li data-role="list-divider">F</li>
            <li><a href="#">Francis Wall</a></li>
            <li data-role="list-divider">G</li>
            <li><a href="#">Graham Smith</a></li>
            <li><a href="#">Greta Peete</a></li>
            <li data-role="list-divider">H</li>
            <li><a href="#">Harvey Walls</a></li>
            <li data-role="list-divider">M</li>
            <li><a href="#">Mike Farnsworth</a></li>
            <li><a href="#">Murray Vanderbuilt</a></li>
            <li data-role="list-divider">N</li>
            <li><a href="#">Nathan Williams</a></li>
            <li data-role="list-divider">P</li>
            <li><a href="#">Paul Baker</a></li>
            <li><a href="#">Pete Mason</a></li>
            <li data-role="list-divider">R</li>
            <li><a href="#">Rod Tarker</a></li>
            <li data-role="list-divider">S</li>
            <li><a href="#">Sawyer Wakefield</a></li>
        </ul>

    </div><!-- /content -->

</div><!-- /page -->
</body>
</html>
三、page-c.html 

<!DOCTYPE html>
<html>
<head>
    <title>Splashscreen Example</title>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css" />
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/swap_page.js"></script>
    <script>
      $(function() {
         $( "[data-role='navbar']" ).navbar();
         $( "[data-role='header'], [data-role='footer']" ).toolbar();
      });
   </script>
</head>
<body>
<div data-role="page" data-title="Albums"  id="page-c" class="jqm-demos"  data-dom-cache="true" data-theme="a" data-prev="page-b" data-next="page-d">
    <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" data-theme="a" id="add-form">
        <h1>hahaha</h1>
        <p>哈哈哈啊哈哈</p>
    </div>

    <div class="ui-content" role="main">

        <ul data-role="listview" data-split-icon="gear" data-split-theme="a" data-inset="false">
            <li><a href="#">
                <img src="img/1.jpg">
                <h2>Broken Bells</h2>
                <p>Broken Bells</p></a>
                <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
            </li>
            <li><a href="#">
                <img src="img/2.jpg">
                <h2>Warning</h2>
                <p>Hot Chip</p></a>
                <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
            </li>
            <li><a href="#">
                <img src="img/3.jpg">
                <h2>Wolfgang Amadeus Phoenix</h2>
                <p>Phoenix</p></a>
                <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
            </li>
            <li><a href="#">
                <img src="img/1.jpg">
                <h3>Of The Blue Colour Of The Sky</h3>
                <p>Ok Go</p>
                <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
            </a></li>
            <li><a href="#">
                <img src="img/3.jpg">
                <h3>Elephant</h3>
                <p>The White Stripes</p>
                <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
            </a></li>
            <li><a href="#">
                <img src="img/2.jpg">
                <h3>Kid A</h3>
                <p>Radiohead</p>
                <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
            </a></li>
            <li><a href="#">
                <img src="img/3.jpg">
                <h3>XX</h3>
                <p>XX</p>
                <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
            </a></li>
            <li><a href="#">
                <img src="img/1.jpg">
                <h3>Congratulations</h3>
                <p>MGMT</p>
                <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
            </a></li>
            <li><a href="#">
                <img src="img/1.jpg">
                <h3>Ashes Grammar</h3>
                <p>A Sunny Day in Glasgow</p>
                <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
            </a></li>

            <li><a href="index.html">
                <img src="img/1.jpg">
                <h3>Hot Fuss</h3>
                <p>Killers</p>
                <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
            </a></li>
            <li><a href="#">
                <img src="img/1.jpg">
                <h3>The Suburbs</h3>
                <p>Arcade Fire</p>
                <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
            </a></li>
        </ul>

        <div data-role="popup" id="purchase" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
            <h3>Purchase Album?</h3>
            <p>Your download will begin immediately on your mobile device when you purchase.</p>
            <a href="#" class="ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-shadow ui-btn-icon-left ui-icon-check" data-rel="back">Buy: $10.99</a>
            <a href="#" class="ui-btn ui-btn-inline ui-mini ui-corner-all ui-shadow" data-rel="back">Cancel</a>
        </div>

    </div><!-- /content -->

</div><!-- /page -->
</body>
</html>
四、page-d.html 

<!DOCTYPE html>
<html>
<head>
    <title>Splashscreen Example</title>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css" />
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/swap_page.js"></script>
    <script>
      $(function() {
         $( "[data-role='navbar']" ).navbar();
         $( "[data-role='header'], [data-role='footer']" ).toolbar();
      });
      // Update the contents of the toolbars

   </script>
</head>
<body>
<div data-role="page" data-title="Emails"   id="page-d" class="jqm-demos"  data-dom-cache="true" data-theme="a" data-prev="page-c" data-next="index">
    <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" data-theme="a" id="add-form">

        <form class="userform">
            <h2>Login</h2>
            <label for="name">Username:</label>
            <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">

            <label for="password">Password:</label>
            <input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">

            <div class="ui-grid-a">
                <div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Cancel</a></div>
                <div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Save</a></div>
            </div>
        </form>

    </div>
    <div class="ui-content" role="main">

        <ul data-role="listview" data-theme="a" data-dividertheme="a" data-filter="true" data-filter-theme="a" data-filter-placeholder="Search messages...">
            <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
            <li><a href="#">
                <h3>Stephen Weber</h3>
                <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
                <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
                <p class="ui-li-aside"><strong>6:24</strong>PM</p>
            </a></li>
            <li><a href="#">
                <h3>jQuery Team</h3>
                <p><strong>Boston Conference Planning</strong></p>
                <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
                <p class="ui-li-aside"><strong>9:18</strong>AM</p>
            </a></li>
            <li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
            <li><a href="#">
                <h3>Avery Walker</h3>
                <p><strong>Re: Dinner Tonight</strong></p>
                <p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
                <p class="ui-li-aside"><strong>4:48</strong>PM</p>
            </a></li>
            <li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
            <li><a href="#">
                <h3>Amazon.com</h3>
                <p><strong>4-for-3 Books for Kids</strong></p>
                <p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
                <p class="ui-li-aside"><strong>12:47</strong>PM</p>
            </a></li>
            <li><a href="#">
                <h3>Mike Taylor</h3>
                <p><strong>Re: This weekend in Maine</strong></p>
                <p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
                <p class="ui-li-aside"><strong>6:24</strong>AM</p>
            </a></li>
            <li><a href="#">
                <h3>Redfin</h3>
                <p><strong>Redfin listing updates for today</strong></p>
                <p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
                <p class="ui-li-aside"><strong>5:52</strong>AM</p>
            </a></li>
            <li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></li>
            <li><a href="index.html">
                <h3>Angela Smith</h3>
                <p><strong>Link Request</strong></p>
                <p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
                <p class="ui-li-aside"><strong>6:24</strong>AM</p>
            </a></li>
            <li><a href="index.html">
                <h3>Mike Taylor</h3>
                <p><strong>This weekend in Maine</strong></p>
                <p>Sounds good, let me check into our plans.</p>
                <p class="ui-li-aside"><strong>6:24</strong>AM</p>
            </a></li>
        </ul>

    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>
五、swap-page.js的js代码 

   $( document ).on( "swipeleft", ".ui-page", function( event ) {
      var next = $( this ).jqmData( "next" );
      $( ":mobile-pagecontainer" ).pagecontainer( "change", next+".html", { transition:"slide"} );
   });
   $( document ).on( "swiperight", ".ui-page", function( event ) {
      var prev = $( this ).jqmData( "prev" );
      $( ":mobile-pagecontainer" ).pagecontainer( "change", prev+".html", {
      transition:"slide",
      reverse:"true"} );
   });
    $( document ).on( "pagecontainerchange", function() {
         var current = $( ".ui-page-active" ).jqmData( "title" );
         $( "[data-role='header'] h1" ).text( current );
         $( "[data-role='navbar'] a.ui-btn-active" ).removeClass( "ui-btn-active" );
         $( "[data-role='navbar'] a" ).each(function() {
            if ( $( this ).text() === current ) {
               $( this ).addClass( "ui-btn-active" );
            }
         });
      });
六、其他的js就不写了

利用上面给出的代码就可以实现上述四个页面的滑动互相切换，虽然可以实现，但是据测试效果并不是特别的完美。

课本小明
关注
专栏目录
JQuery Mobile 页面过渡效果设置
liangyixin19800304的专栏
03-13 1782
系统帮助 $(document).ready(function(){ $('#default').bind('click', function() { $.mobile.loadingMessageTextVisible = false; $.mobile.showPageLoadingMsg(); }); $('#loadingMessageTextVisible').
JQuery Mobile实现滑动屏幕切换页面
热门推荐
definite_things的专栏
01-06 1万+
完整示例代码： Multipage example Page 1 Go To Page 2 Page 2 Go Back To Page 1 $(docu
使用jQueryMobile实现滑动翻页效果的方法
10-24
主要介绍了使用jQueryMobile实现滑动翻页效果的方法,较为详细的分析了jQueryMobile实现滑动翻页效果的原理与实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
当前jQuery Mobile支持的6种页面切换方式
10-09 1159
切换方式 data-transition属性值 横向幻灯方式 slide 自上向下幻灯方式 slideup 自下向上幻灯方式 slidedown 中央弹出 pop 淡入淡出 fade 旋转弹出 flip
jq滑动切换页面
07-02
jq滑动切换页面。可直接套用。 jq滑动切换页面。可直接套用。 jq滑动切换页面。可直接套用。
jquery 仿手机屏幕切换界面效果
weixin_30633405的博客
04-16 351
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <metahttp-equiv="Content-Type"content="text/htm...
jquery_mobile移动端幻灯片效果，滑动切换，点击切换
天步的博客
01-14 2016
自动适应设备的宽度，滑动会切换大图，底部导航跟随切换。点击底部导航切换大图。使用的jquery_mobile插件，引入1.4.5的插件，CSS表和jquery库即可，除了ID,CLASS命名可能会和你项目重复，改成单独即可，其他应该没有重复的，因为本脚本使用计时器写的，加入了方法判定，在执行一个方法的时候，锁定其他方法禁止执行，不会冲突，使用计时器来控制动画，可能不尽如人意，准备重构一下改成Jquery的animate()方法来执行动画效果。近期重构好在上传使用内置方法不用计时器的版本吧。
探索jQuery Mobile iScrollView：一款高效的滚动插件
最新发布
gitblog_00098的博客
04-20 313
探索jQuery Mobile iScrollView：一款高效的滚动插件 去发现同类优质开源项目:https://gitcode.com/ 是一个专为移动设备设计的高性能滚动组件，它将iScroll的强大功能与jQuery Mobile的简洁界面和易用性相结合，为开发者提供了一种流畅、可定制的滚动体验。 项目简介 这个项目旨在解决jQuery Mobile在处理大数据量或复杂布局时可能出现的滚动...
jquery mobile移动端幻灯片滑动切换效果
10-20
移动端幻灯片滑动切换效果是使用jQuery Mobile框架实现的一种用户界面交互方式，主要应用于移动设备上。它允许用户通过滑动或者点击操作在不同的幻灯片内容之间切换。本知识点将详细介绍如何在移动端实现这样的效果...
jquery mobile左右滑动效果
06-29
标题提到的“jquery mobile左右滑动效果”是jQuery Mobile中一个重要的交互功能，主要用于增强用户在手机或平板设备上的浏览体验。下面将详细阐述这一功能及其实现原理。 首先，jQuery Mobile的核心在于其触摸事件...
Jquery Mobile实现页面切换
bwf_erg的博客
04-19 2191
现在移动设备已经是手机和平板的天下了，在使用手机和平板的时候，我们应该有这样的经历，通过手势触摸或者点击，可以实现页面的来回切换，这些功能同样可以使用jquery mobile来实现。 jQuery Mobile 提供了各种页面切换到下一个页面的效果。 切换 描述 fade 默认，淡入到下一页 filp 从后向前
jQuery切换滑动效果
Donny的专栏
04-02 598
New Document $(document).ready(function(){ var index=0; var len=$(".d span").length; // 总共有多少个切换标签 var wid=$(".txt").width(); // 每个要显示的内容的div的宽度 $(".d span").click(function()
jquery mobile如何实现滑动屏幕跳转页面
橙子9102
04-26 2683
$("#detail_center").bind("swipeleft", function(e){$.mobile.changePage ('index.html', 'fade', false, false);}); 首先swipeleft api如下： swipe(划动)：一秒内水平拖拽大于30PX，同时纵向拖曳小?0px的事件发生时触发 swipeleft（左划）：划动事件
利用jquery.mobile的swipeleft开发左右滑动功能
ly7826的专栏
07-11 3508
先看看效果：
jQuery 滑动及点击切换效果
weixin_33890526的博客
06-05 688
效果图如下： 初始化 hover效果：滑动menuitem，‘首页’不变，字体颜色改变，有下划线展示。 即在动态添加boder-bottom，改变字体颜色颜色 .menuItem:hover{ border-bottom: 2px solid #108ee9; color: #108ee9; } click效果：点击其他menuitem，‘首...
实用功能小记-jQuery实现Tab切换功能
你说我的名称可爱不可爱♕
04-09 166
今天记录一下jQuery实现Tab切换的功能，不为别的，只是以后遇到了可以直接拿来用。 直接看效果： 直接看源码： <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js" type="text/javascript" charset="utf-8...
用jquery mobile实现手机上的文字或者图片可以左右滑动?
zimin的专栏
11-09 2533
首先左右滑动如何实现：比如这个块区域是 那么对该div进行监听触摸屏事件： var x_m_d =null; var x_m_u = null; var m_d=false; document.getElementById("move").addEventListener('touchstart',m_down, false); document.getElementById(
jQueryMobile之Helloworld与页面切换的方法
12-10
本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法。分享给大家供大家参考。具体分析如下： jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会...
jQuery Mobile 页面事件
灰白色
06-09 235
开发工具与关键技术：visual Studio jquery 作者：邓伟征 撰写时间： 在 jQuery Mobile 中与页面打交道的事件被分为四类： Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后 Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时 Page Transition - 在页面过渡之前和之后 Page Cha...
利用jQuery做tab栏切换
shi15926lei的博客
09-25 1871
jQuery做tab栏切换
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值