5

Jquery Mobile で idangero.us のSwiperを使用しています...

ここでは、コンテンツ スライダーにScroll Container Swiperを使用しています...

コードを一緒に埋め込むという多くの問題に直面しているだけです...

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

スクロールバーがデモのように表示されず、スクロールが残したマークにくっついていません...

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

3 に答える 3

7

作業例: http://jsfiddle.net/Gajotres/B7hwh/

まず、私が何をしたかをお話ししましょう。ドキュメント準備完了 (またはその匿名バージョン) は、ページの初期化中に正しくトリガーされないため、jQuery Mobile では使用しないでください。通常は問題ありませんが、ここにあります。

特定のページ内で初期化する必要があるため、ドキュメントの準備を削除し、正しいページ イベントに置き換えました。また、コードを HTML と BODY タグにラップしました。それなしでは、jsFiddle でページ イベントを動作させることはできません。

別の変更として、ページが再表示されるたびに pageshow がトリガーされるため、swiper がそのコードを既に適用しているかどうかを確認するために if を使用しました。スワイパーには正しいページ幅と高さが必要であり、これらの情報は 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;

    }
于 2013-05-13T13:46:08.307 に答える