0

jcarousel.jsプラグインを使用<ul>して、アプリ内の画像のリストjQuery Mobileをカルーセル効果で並べ替えています。ページを初期化するたびに画像が異なる (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 );

実際の画像と posstion で実際に同じ courosel を取得すると、1 つの問題が発生します。スクロールしません。矢印はクリック可能ですが、何もしていません

ページを開始してページに戻るときのコードを比較しましたが、似ています。どうすれば私のアイデアを実装できますか?

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

1 に答える 1

0

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-23T10:39:36.437 に答える