刷卡不jQuery Mobile的工作(Swiper not working in Jquery M

我使用组队，探索通过idangero.us与jQuery Mobile的...

这里我使用滚动集装箱组队，探索为内容滑块...

只是面临着很多的问题，嵌入代码一起...

http://jsfiddle.net/keuKu/4/embedded/result/

滚动条不显示为一个在演示，也将滚动不会粘在那里标记我离开它...

$(function(){
        /* Scroll container: */
        var sScroll = $('.swiper-scroll-container').swiper({
            scrollContainer : true,
            scrollbar : {
                container : '.swiper-scrollbar' 
            }
        })  
     })

Answer 1:

工作示例： http://jsfiddle.net/Gajotres/B7hwh/

首先让我告诉你，我做了什么。文档准备（或它的匿名优化版本）不应与jQuery Mobile的使用，因为它不会页面初始化过程中正确地触发。通常它是不是一个问题，但在这里。

因为你需要它来初始化某一页我已删除的文件准备中，并用正确的页面事件取而代之。我也包裹你的代码转换成HTML和BODY标签，我不能让页面事件中的jsfiddle工作离不开它。

另一个变化，因为pageshow每个页面重新我已经使用，如果要检查是否刷卡已经应用于它的代码时触发。由于刷卡需要正确的页面宽度和高度，这些信息只能在pageshow活动期间成功地计算出我不能使用其他页面事件。

工作示例： http://jsfiddle.net/Gajotres/B7hwh/

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>    
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>   
    </head>
    <body>
        <div data-role="page" id="page">
            <div data-role="header">
                <h1>Page One</h1>              
            </div>
            <div data-role="content">
                <a href="#slider" data-transition="slide" data-role="button">Go to Slider</a>
            </div>
            <div data-role="footer">
                <h4>Page Footer</h4>
            </div>
        </div>

        <div data-role="page" id="slider">
            <div data-role="header" data-position="fixed">
                <a href="#page" class="ui-btn-left">Back</a>
                <h1>Page One</h1>
            </div>
            <div data-role="content">
                <div role="main" class="main">
                    <div class="swiper-container swiper-scroll-container">
                        <div class="swiper-wrapper" >
                            <div class="swiper-slide" style="background:#fff; padding:20px">
                                <div class="red-slide" style="width:250px; float:left; font-size:25px; line-height:30px; text-align:center">
                                    <p style="color:#fff; font-weight:bold; font-style:italic;">Your dreams come true:) That is a simple single scrollable area! No slides, no nothing, just pure area!</p>
                                </div>
                                <div style="width:300px; float:left; margin-left:20px">
                                    <p>Here goes some text</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum ipsum auctor nulla consectetur sed porta nunc placerat.</p>
                                    <p>Nulla dui augue, sollicitudin egestas consequat a, consequat quis neque. Sed at mauris nunc. Donec rutrum leo id risus congue convallis. Maecenas ultrices condimentum velit, nec tincidunt lorem convallis consequat. Nulla elementum consequat quam eu euismod</p>
                                </div>
                                <div style="width:500px; float:left; margin-left:20px">
                                    <p>Here goes wide image</p>
                                    <p><img src="http://farm9.staticflickr.com/8183/8362012092_601c3dbf28_n.jpg" /></p>
                                </div>
                                <div class="blue-slide" style="width:350px; float:left; font-size:28px; line-height:30px; text-align:center; margin-left:20px; padding:25px">
                                    <p style="color:#fff; font-weight:bold; font-style:italic;">You can make it any width/height, horizontal (like this one) or vertical, with any styling and with any HTML content!</p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-scrollbar"></div>

                    </div> 
                </div>
                <div data-role="footer" data-position="fixed">
                    <h4>Page Footer</h4>
                </div>
            </div>
        </div>    
    </body>
</html>

使用Javascript：

$(document).on('pageshow', '#slider', function(){ 
    /* Scroll container: */
    if($('.swiper-scroll-container .swiper-scrollbar-cursor-drag').length == 0) {
        var sScroll = $('.swiper-scroll-container').swiper({
            scrollContainer : true,
            scrollbar : {
                container : '.swiper-scrollbar' 
            }
        });     
    }
});

CSS：

.swiper-scrollbar {
        width: 100%;
        height: 4px;
        border-radius: 10px;
        position: absolute !important;
        left:0;
        bottom:auto;
        top:0 !important;
        -ms-touch-action: none;
        background: none
    }
    .swiper-scrollbar-drag {
        height: 100%;
        width: 100%;
        position: relative;
        background: rgba(0,0,0,0.5);
        border-radius: 10px;

    }

Answer 2:

一个为我工作更简单的解决方案是让一个最小的jQuery Mobile的页面格，里面坐了，使用SRC =“”链接到一个复杂的滑块页普通iframe中。这样，滑块DOM是从主应用程序独立的，它太工程JQM对话框内等。