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>