0

我最初有我的页面外部。但是，我想利用页面转换，所以我将每个包含 Royal Slider 的页面导入到我的 index.html 中。但是，Royal Slider 只能在第一页上正确加载，而不能在另一页上正确加载。我阅读了有关使用 pageinit 的信息，但它不起作用。我还阅读了关于 pagebeforeshow 和 page change 的内容，它会在每次发生页面更改时运行代码，而不是像 pageinit 那样运行一次。有人可以看看我的代码并提供帮助吗？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>iPhone Quick Reference App</title>
<link rel="stylesheet" href="js/css/amwater.min.css" />
<link rel="stylesheet" href="js/css/jquery.mobile.structure-1.3.1.min.css" />
<script src="js/jquery-2.0.2.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/royalslider/jquery.royalslider.min.js" /></script>
<link href="js/royalslider/royalslider.css" rel="stylesheet">
<link href="js/royalslider/skins/minimal-white/rs-minimal-white.css" rel="stylesheet">

<script type="text/javascript">
$(document).on('pagebeforeshow','[data-role=page]', function() {
    jQuery(document).ready(function($) {
  $('#full-width-slider').royalSlider({
    arrowsNav: false,
    loop: false,
    keyboardNavEnabled: true,
    controlsInside: false,
    imageScaleMode: 'fit',
    arrowsNavAutoHide: false,
    autoScaleSlider: true, 
    autoScaleSliderWidth: 640,     
    autoScaleSliderHeight: 1057,
    controlNavigation: 'bullets',
    thumbsFitInViewport: false,
    navigateByClick: true,
    startSlideId: 0,
    autoPlay: false,
    transitionType:'move',
    globalCaption: false,
    deeplinking: {
      enabled: true,
      change: false
    },
    /* size of all images http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/adding-width-and-height-properties-to-images */
    imgWidth: 640,
    imgHeight: 1136,
  });
});
});
</script>

</head>
<body>
<div data-role="page" id="home"  data-theme="a">
  <div data-role="content"> <img src="images/logo.png" width="100%" /> <a href="#deleteapp" data-role="button" data-transition="slide" data-mini="false" data-theme="a">Deleting an App</a> <a href="#quitapp" data-role="button" data-transition="slide" data-mini="false" data-theme="a">Quitting an App</a> <a href="#wireless" data-role="button" data-transition="slide" data-mini="false" data-theme="a">Accessing AmWater Guest Wireless</a> <a href="#appidcc" data-role="button" data-transition="slide" data-mini="false" data-theme="a">Creating an Apple ID w/ Credit Card</a> <a href="#appidnocc" data-role="button" data-transition="slide" data-mini="false" data-theme="a">Creating an Apple ID w/o Credit Card</a> <a href="#hotspot" data-role="button" data-transition="slide" data-mini="false" data-theme="a">Enabling Your Personal Hotspot</a> <a href="#password" data-role="button" data-transition="slide" data-mini="false" data-theme="a">Syncing Your Work Email Password</a> <a href="#icloud" data-role="button" data-transition="slide" data-mini="false" data-theme="a">Backing Up Your iPhone to iCloud</a> <a href="#contacts" data-role="button" data-transition="slide" data-mini="false" data-theme="a">Accessing American Water Contacts</a>
    </ul>
  </div>
</div>
<div data-role="page" id="quitapp" data-theme="a">
  <div data-role="header" data-theme="a"> <a href="#home" data-rel="back" data-role="button" data-theme="a" data-transition="slide" data-inline="true">Menu</a>
    <h1></h1>
  </div>
  <div id="full-width-slider" class="heroSlider rsMinW">
    <div class="rsContent"> <img class="rsImg" src="images/quit/0.jpg" alt=""> </div>
    <div class="rsContent"> <img class="rsImg" src="images/quit/1.jpg" alt=""> </div>
    <div class="rsContent"> <img class="rsImg" src="images/quit/2.jpg" alt=""> </div>
    <div class="rsContent"> <img class="rsImg" src="images/quit/3.jpg" alt=""> </div>
    <div class="rsContent"> <img class="rsImg" src="images/quit/4.jpg" alt=""> </div>
    <div class="rsContent"> <img class="rsImg" src="images/quit/5.jpg" alt=""> </div>
  </div>
</div>
<div data-role="page" id="deleteapp" data-theme="a">
  <div data-role="header" data-theme="a"> <a href="#home" data-role="button" data-rel="back" data-theme="a" data-transition="slide" data-inline="true">Menu</a>
    <h1></h1>
  </div>
  <div id="full-width-slider" class="heroSlider rsMinW">
    <div class="rsContent"> <img class="rsImg" src="images/delete/1.jpg" alt=""> </div>
    <div class="rsContent"> <img class="rsImg" src="images/delete/2.jpg" alt=""> </div>
    <div class="rsContent"> <img class="rsImg" src="images/delete/3.jpg" alt=""> </div>
    <div class="rsContent"> <img class="rsImg" src="images/delete/4.jpg" alt=""> </div>
    <div class="rsContent"> <img class="rsImg" src="images/delete/5.jpg" alt=""> </div>
  </div>
</div>
</body>
</html>
4

1 回答 1

1

我想我明白了。必须向下导航到#full-width-slider - 现在每个页面都运行脚本。

<script type="text/javascript">
$(document).on('pagechange', function() {
  $('[data-role=page] #full-width-slider').royalSlider({
    arrowsNav: false,
    loop: false,
    keyboardNavEnabled: true,
    controlsInside: false,
    imageScaleMode: 'fit',
    arrowsNavAutoHide: false,
    autoScaleSlider: true, 
    autoScaleSliderWidth: 640,     
    autoScaleSliderHeight: 1057,
    controlNavigation: 'bullets',
    thumbsFitInViewport: false,
    navigateByClick: true,
    startSlideId: 0,
    autoPlay: false,
    transitionType:'move',
    globalCaption: false,
    deeplinking: {
      enabled: true,
      change: false
    },
    /* size of all images http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/adding-width-and-height-properties-to-images */
    imgWidth: 640,
    imgHeight: 1136,
  });
});
</script>
于 2013-08-11T23:21:57.800 回答