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

Question

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

Answer 1

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

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-05-23 10:39:36

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-05-23 10:39:36

解决方案1
0 已采纳 2013-05-23 10:39:36