0

iosSliderを使用してページ#testにスライダーを作成したいのですが、jquery mobileによって作成されたページ（メソッド "pageinit"を使用）の場合、div#sliderが表示されません。

メソッド$（document）.ready（）で動作しますが、jquery mobileは$（document）.bind（'pageinit'）を使用する必要があります。だから誰かが私を助けることができますか？

私のコードがあります：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        /* slider container */
    .iosSlider {
        /* required */
        position: relative;
        overflow: hidden;
        width: 200px;
        height: 200px;
    }

    /* slider */
    .iosSlider .slider {
        /* required */
        width: 100%;
        height: 100%;
    }

    /* slide */
    .iosSlider .slider .slide {
        /* required */
        float: left;
        width: 100%;
        height: 100%;
    }
    </style>
    <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="./js/jquery.mobile-1.1.1.min.js"></script>
    <script type="text/javascript" src="./js/jquery.iosslider.js"></script>
    <script type="text/javascript">
        $("#test").live('pageinit', function(event){
            $("#slider").iosSlider();
        });
    </script>
</head>
<body>
    <div data-role="page" id="test">
        <div data-role="content"
            <div class="iosSlider" id="slider">
                <div class="slider">
                    <div class="slide" style="background-color:green;"></div>
                    <div class="slide" style="background-color:red;">2</div>
                    <div class="slide" style="background-color:blue;">3</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
4

1 に答える 1

1

このコードを追加する必要があります。ページを変更するたびに、iosSliderを呼び出す必要があります。

    $(document).bind('pagechange', function(e, data){

    var pageId="";

    if ( typeof data.toPage === "string" ) {
        pageId=data.toPage;
    }else{
        pageId="#"+data.toPage.attr('id');
    }
    console.log('pagechange',pageId);
    switch(pageId){
        case '#login':loginPageIsShowed();
            break;
        case '#main':checkLogin();mainPageIsShowed();renderIosSlider();
            break;
        case '#form':checkLogin();formPageIsShowed();renderIosSlider();
            break;
        case '#package':checkLogin();packagePageIsShowed();renderIosSlider();
            break;
        default: console.log('default');
            break;
    }


function renderIosSlider(){
    $('.iosSlider').iosSlider({
                desktopClickDrag: true
            });

    });
}
于 2012-10-23T14:20:00.200 に答える