使用jcarousle.js - 在導航後精確保存圖像和位置

我正在使用jcarousel.js插件訂購<ul>我的jQuery Mobile應用程序中的圖像列表中帶有旋轉木馬效果。每次我初始化我的頁面圖像是不同的（來自WS），所以以後我將它們設置爲<ul>我這樣稱呼它：使用jcarousle.js - 在導航後精確保存圖像和位置

$('#imagesPageDiv').live('pagebeforeshow', function (e, data) { 
        jQuery('#carouselDiv').jcarousel({ visible: 4, scroll: 2}); 
       });

它工作正常。

每個圖像都有URL到同一個大圖像。返回到同一頁面時發生問題。

我不想從開始設置圖像，想要在點擊它之前完全回到相同的圖像和位置（圖像位置）。我設置了flag，所以基本上我知道我什麼時候回來，什麼時候從頭開始。所以，我試圖導航到下一個頁面之前保存所有網頁，回來後再次將其追加到頁面：

globalDivContent = $('#imagesPage #box');

回來到該頁面後，我追加它：

$("#imagesPage").empty(); 
    $("#imagesPage").append(globalDivContent);

如果真的有圖像和posstion會出現一個問題：它不會滾動。箭頭是可點擊的，但沒有做任何事情

我比較了代碼，當啓動頁面，並回到頁面和它相似。任何想法如何實現我的想法？

 <!DOCTYPE html> 
     <html> 
      <head> 
       <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
       <link rel="stylesheet" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" />  
       <script src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.9.1.min.js"></script> 
       <script src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>      
       <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>  
       <script> 
         $('#imagesPage').live('pageshow', function (event, ui) { 
         jQuery('#carouselDiv').jcarousel({visible:2}); 
     }); 
       </script> 
      </head> 
      <body> 
       <div data-role="page" id="imagesPage"> 
        <div data-theme="b" data-role="header"> 
         <h1>Index page</h1> 
        </div> 

        <div data-role="content"> 
         <ul id="carouselDiv" class="jcarousel-skin-tango"> 
          <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="65" height="65" alt=""/></li> 
          <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="65" height="65" alt=""/></li> 
          <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="65" height="65" alt=""/></li> 
          <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="65" height="65" alt=""/></li> 
          <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="65" height="65" alt=""/></li> 
          <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="65" height="65" alt=""/></li> 
          <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="65" height="65" alt=""/></li> 
          <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="65" height="65" alt=""/></li> 
          <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="65" height="65" alt=""/></li> 
          <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="65" height="65" alt=""/></li> 
         </ul> 
        </div> 
       </div>  
      </body> 
     </html>

來源

2013-05-20 oleg

JavaScript變量在頁面加載過程中不是永久性的，因此'divContent'不會包含以前的內容。 – Khior

不，不。我有一個全局變量，我將內容保存到它，我轉移內容。 – oleg

不幸的是，窗口變量只能存儲字符串，而不能存儲複雜的結構（比如jQuery對象）。你可以用這種方式堅持它的唯一方法是先將它序列化爲一個字符串，然後在檢索它時將其反序列化。 – Khior

我會建議只保存所需的信息，而不是一次性複製整個div。這將允許您挑選您真正需要的數據，並在跨頁加載時安全地保留它。

最好的解決方案是使用本地存儲。這使您可以在IE8中持久保存字符串到字符串值（詳情請參閱：http://www.html5rocks.com/en/features/storage）。

例如，你可以保存你的數據是這樣的：

localStorage["carouselSource"] = JSON.stringify(
    $('#carouselDiv li img').map(function(i,e){ 
     return $(this).attr('src'); 
    }).get(); 
);

像這樣檢索它（的jCarousel調用之前）：

var items = jQuery.parseJSON(localStorage["carouselSource"]); 

jQuery.each(items, function(i,e){ 
    $('#carouselDiv').append('<li><img src="' + e + '" width="65" height="65" alt="" /></li>'); 
});

這將確保相同的圖像集當用戶返回到頁面時顯示。您可以使用類似的技術來保存諸如滑塊的位置和任何其他想要保存的變量數據。

來源

2013-05-23 10:39:36 Khior

聽起來不錯...所以基本上我可以使用全局參數（或存儲）來保存語法，然後簡單地追加它。 – oleg

我建議不要保存整個語法，而只保存圖像的src屬性以及任何其他相關元數據（如幻燈片位置）的內容。這樣，如果有任何數據存在，您可以從localStorage乾淨地填充和初始化滑塊，如果不存在，則從Flickr中繪製圖像。保存整個語法可能會起作用，但它比解決方案更像是一種破解。 – Khior

使用jcarousle.js - 在導航後精確保存圖像和位置

回答

相關問題