Question

我想使用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>

Answer 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
            });

    });
}

iosSlider不适用于jquery mobile

1 个答案: