个人中心
gpt4 book ai didi

android - Jquery Mobile 和 Swipe JS 不兼容导致选择列表无法在 Android 上运行

转载 作者：太空狗 更新时间：2023-10-29 15:35:18 24 4
gpt4 key购买 nike

我将 jquery mobile 1.0 与 swipejs 结合使用。 swipejs库用于允许在图像轮播上进行移动滑动手势。但是，我在 Android 2.2.3 (Motorola Droid) 和其他 Android 设备上遇到了一个问题，其中选择列表(与 swipejs 在同一页面上)根本不起作用。选择列表出现，但 native 选项菜单不会弹出，单击它们根本无济于事。我不仅能够将其缩小到 swipejs，而且还能缩小到 swipejs 中的特定行。

style.webkitTransform = 'translate3d(' + -(index * this.width) + 'px,0,0)';

transalate3d css 行为似乎以某种方式干扰了 jquery 移动选择列表。我发现了很多关于 Android 上 jquery 移动选择列表脆弱性的报告 (https://github.com/jquery/jquery-mobile/issues/1051)。并且已经能够创建一个相当简单的示例页面来展示这种行为。我的解决方法是更改​​ translate3d 以在 swipejs 库本身中进行翻译。但我想知道是否有人更好地了解 translate3d 的作用以及它可能如何影响 jquery mobile 可能会提出更好的解决方案，或者这是 jqm 或 swipejs 的错误？

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon" href="/images/mobile/homeIcon.png" />
    <link rel="apple-touch-startup-image" href="/images/mobile/splash.png" />
    <link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" rel="Stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).bind("mobileinit", function () {
            $.mobile.ajaxEnabled = false;
        });

    </script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
</head>
<body>
    <div data-role="page" id="main">
        <header data-role="header">
        </header>
        <div data-role="content">
            <div data-role="fieldcontain">
                <label for="select-choice-1">
                    Shipping method:</label>
                <select name="select-choice-0" id="select-choice-1" data-theme="a">
                    <option value="standard">Standard: 7 day</option>
                    <option value="rush">Rush: 3 days</option>
                    <option value="express">Express: next day</option>
                    <option value="overnight">Overnight</option>
                </select>
            </div>
            <div id="divProductImagesCarousel">
                <ul>
                    <li><a href="image_0.jpg">
                        <img width="250" height="250" src="image_0.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_1.jpg">
                        <img width="250" height="250" src="image_1.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_2.jpg">
                        <img width="250" height="250" src="image_2.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_3.jpg">
                        <img width="250" height="250" src="image_3.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_4.jpg">
                        <img width="250" height="250" src="image_4.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_5.jpg">
                        <img width="250" height="250" src="image_5.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_6.jpg">
                        <img width="250" height="250" src="image_6.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_7.jpg">
                        <img width="250" height="250" src="image_7.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_8.jpg">
                        <img width="250" height="250" src="image_8.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_9.jpg">
                        <img width="250" height="250" src="image_9.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                </ul>
            </div>
        </div>
    </div>
    <script src="https://raw.github.com/bradbirdsall/Swipe/master/swipe.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var productImagesCarousel = document.getElementById('divProductImagesCarousel');
            window.mySwipe = new Swipe(productImagesCarousel);          
        });

    </script>
</body>
</html>

最佳答案

是的，jQueryMobile有自己的滑动功能

但是! swipeJS 太棒了!而且您仍然可以使用它!

这让我进行了大量调查，但我找到了适合我的解决方案。

基本上，只需将所有 swipejs 内容放入 $(document).ready(function(){

像这样:

<script type="text/javascript">

// outside ready function so that buttons still have a var to attach function calls to like slider.next()
var slider;

// process AFTER jquery mobile. 
// i "think" the problem that somehow jquery mobile stops swipejs from detecting the width of the div (in the setup function) 
$(document).ready(function(){

    slider = new Swipe(document.getElementById('myslider'), {
        callback: function(e, pos) {  
             // some callback code here
        }
    });

});
</script>

我认为这不是 JS 中的冲突——也许吧。这会强制在最后处理 swipejs，并且大概是在任何 jquerymobile 功能搞砸之后。

我是 JS 的新手，所以我不知道这个函数与其他“最后执行”类型的函数有何不同。我想这可能会导致其他讨厌的冲突。如果有人想用更好的功能(以及为什么)发表评论，那也很好。

关于android - Jquery Mobile 和 Swipe JS 不兼容导致选择列表无法在 Android 上运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9383077/

24 4 0
文章推荐： C 和汇编 __asm 不工作
文章推荐： css - 如何在html中自定义单选按钮
文章推荐： c - 从文件中读取 C 中的不同类型
文章推荐： c - 如何阅读 GUID 分区表 (GPT) 及其条目？
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com