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

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

javascript jquery html

Javascript 使用jcarousel.js-在导航后准确保存图像和位置,javascript,jquery,html,jcarousel,Javascript,Jquery,Html,Jcarousel,我正在使用jcarousel.js插件在我的jQuery移动应用程序中订购具有旋转木马效果的图像列表。每次我初始化页面时，图像都是不同的（来自WS），因此在我将它们设置为后，我将其称为： $('#imagesPageDiv').live('pagebeforeshow', function (e, data) { jQuery('#carouselDiv').jcarousel({ visible: 4, scroll: 2});

我正在使用

jcarousel.js

插件在我的

jQuery移动应用程序中订购具有旋转木马效果的
图像列表。每次我初始化页面时，图像都是不同的（来自WS），因此在我将它们设置为
后，我将其称为：
 $('#imagesPageDiv').live('pagebeforeshow', function (e, data) {
                   jQuery('#carouselDiv').jcarousel({ visible: 4, scroll: 2});
              });

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

它很好用
每个图像都有指向同一个大图像的URL
。返回同一页面时会出现问题
我不想从一开始就设置图像，我想在单击之前完全回到相同的图像和位置（图像位置）。
我设置了标志，所以基本上我知道什么时候回来，什么时候开始。
因此，我尝试在导航到下一页之前保存所有页面，并在返回后将其再次附加到页面：
  globalDivContent = $('#imagesPage #box');

回到那一页后，我将其追加：
 $("#imagesPage").empty();
   $("#imagesPage").append(globalDivContent );

真实的图片和position 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> 


$（'#imagesPage'）.live（'pageshow'，函数（事件，用户界面）{
jQuery（'#carouselDiv'）.jcarousel（{visible:2}）；
});
索引页












我建议只保存您需要的信息，而不是一次性复制整个div。这将允许您挑选真正需要的数据，并在页面加载时安全地将其持久化
最好的解决方案是使用本地存储。这使您可以在一个站点上持久保存字符串到字符串的值，最早可追溯到IE8（请参阅此处的更多信息：）
例如，您可以这样保存数据：
 $('#imagesPageDiv').live('pagebeforeshow', function (e, data) {
                   jQuery('#carouselDiv').jcarousel({ visible: 4, scroll: 2});
              });

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

然后像这样检索它（在jCarousel调用之前）：
var items=jQuery.parseJSON（localStorage[“carouselSource”]）；
每个（项、函数（i、e）{
$（“#carouselDiv”）。追加（“”）；
});

这将确保在用户返回页面时显示相同的图像集。您可以使用类似的技术来保存滑块的位置和任何其他要保存的变量数据。
JavaScript变量不会在页面加载中持久化，因此“divContent”将不包含以前的内容。不，不，可以。我有一个全局变量，我将内容保存到其中，我确实传输了内容。不幸的是，窗口变量只能存储字符串，而不能存储复杂的结构a（例如jQuery对象）。以这种方式保存它的唯一方法是首先将它序列化为字符串，然后在检索它时取消序列化。我认为我们需要查看脚本的运行情况，以便能够就这个问题提供建议。有太多的事情可能会影响导航，我们不可能在没有它的情况下找到答案。添加了更多代码。我不明白我有什么样的问题，存储复杂的结构-它的字符串。使用：globalDivContent=$（'imagesPage#box'）我有所有的HTML代码。听起来不错…所以基本上我可以使用全局参数（或存储）来保存语法，然后简单地附加它。我建议不要保存整个语法，而只保存图像的src属性和任何其他相关元数据的内容（如幻灯片位置）。这样，如果存在任何数据，您就可以从localStorage干净地填充和初始化滑块，如果没有，则从Flickr绘制图像。保存整个语法可能会起作用，但这与其说是一个解决方案，不如说是一种黑客行为。