iosSlider不爲jquery mobile工作

我想使用iosSlider在頁面#test中創建滑塊，但是當由jquery mobile創建的頁面（我使用「pageinit」方法）時，div #slider不會顯示。iosSlider不爲jquery mobile工作

它使用方法$（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>

來源

2012-08-05 user1577750

您需要添加該代碼，每次更改需要的頁面調用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-23 14:20:00

iosSlider不爲jquery mobile工作

回答

相關問題