使用jcarousel.js-導航后准確保存圖像和位置
[英]Using jcarousel.js - saving the images and position exactly, after navigation
問題描述
我正在使用jcarousel.js插件對具有輪播效果的jQuery Mobile應用程序中的<ul>圖片列表進行排序。 每次初始化頁面時，圖像都是不同的（來自WS），因此在將它們設置為<ul>我會這樣稱呼它：
$('#imagesPageDiv').live('pagebeforeshow', function (e, data) {
jQuery('#carouselDiv').jcarousel({ visible: 4, scroll: 2});
});
工作正常。
每個圖像都有指向相同大圖像的URL 。返回同一頁面時會發生問題。
我不想從一開始就設置圖像，想要在單擊之前完全返回相同的圖像和位置（圖像位置）。 我設置了flag ，所以基本上我知道何時返回以及何時從頭開始。 因此，我嘗試保存所有頁面，然后再導航到下一頁，然后返回后再次將其追加到頁面：
globalDivContent = $('#imagesPage #box');
回到該頁面后，我將其附加：
$("#imagesPage").empty();
$("#imagesPage").append(globalDivContent );
確實獲得與真實圖像相同的位置和位置會出現一個問題：它不會滾動。 箭頭是可單擊的，但什么也不做
我在啟動頁面並返回頁面時比較了代碼，並且類似。 有什么想法可以實現我的想法嗎？
<!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>
1 個解決方案
解決方案1
0 已采納 2013-05-23 10:39:36
我建議您只保存所需的信息，而不是一次性復制整個div。 這將使您可以挑選您真正需要的數據，並在頁面加載期間安全地持久保存該數據。
最好的解決方案是使用本地存儲。 這樣一來，您就可以在整個網站上永久保存字符串到字符串的值，甚至可以追溯到IE8（請在此處查看更多信息： http : //www.html5rocks.com/zh_cn/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>');
});
這樣可以確保當用戶返回頁面時顯示相同的圖像集。 您可以使用類似的技術來保存諸如滑塊的位置以及要保存的任何其他變量數據之類的內容。
使用javascript精確定位圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.