使用 jcarousel.js - 导航后准确保存图像和位置答案

【问题标题】：Using jcarousel.js - saving the images and position exactly, after navigation使用 jcarousel.js - 导航后准确保存图像和位置
【发布时间】：2013-05-14 18:53:56
【问题描述】：

我正在使用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 );

真正得到与真实图像相同的 courosel 和位置 exepct 一个问题：它不滚动。箭头是可点击的，但没有做任何事情

我比较了启动页面和返回页面时的代码，它相似。有什么想法可以实现我的想法吗？

      <!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>

【问题讨论】：

JavaScript 变量不会在页面加载时保持不变，因此 'divContent' 不会包含之前的内容。
不不，没关系。我有一个全局变量，我正在将内容保存到它，我确实转移了内容。
不幸的是，窗口变量只能存储字符串，不能存储复杂的结构a（如jQuery对象）。以这种方式持久化它的唯一方法是先将其序列化为字符串，然后在检索时将其反序列化。
我认为我们需要查看正在运行的脚本才能就该问题提出建议。有很多事情会影响导航，如果没有它，我们就不可能找到答案。
添加了更多代码。我不明白我有什么样的问题存储复杂的结构 - 它是字符串。使用：globalDivContent = $('#imagesPage #box'); 我有所有的 HTML 代码。

标签： javascript jquery html jcarousel

【解决方案1】：

我建议只保存您需要的信息，而不是一次性复制整个 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>');
});

这将确保当用户返回页面时显示相同的图像集。您可以使用类似的技术来保存滑块的位置以及您想要保存的任何其他变量数据。

【讨论】：

听起来不错...所以基本上我可以使用全局参数（或存储）来保存语法，然后简单地附加它。
我建议不要保存整个语法，而是只保存图像的 src 属性的内容和任何其他相关元数据（例如幻灯片位置）。这样，如果存在任何数据，您可以从 localStorage 干净地填充和初始化滑块，如果不存在，则从 Flickr 绘制图像。保存整个语法可能会奏效，但它更像是一种破解而不是解决方案。