2013-05 / 2013-05-02

前のエントリ: DialogFragmentでダイアログ表示 [Android]

pull to refreshを使う
2013-05-02-2 / カテゴリ: [html][JavaScript][jQueryMobile] / [permlink]

ツイッターの公式アプリなんかでよくある「引っ張って続きを取得」するための JavaScript ライブラリにhttp://cubiq.org/iscroll-4というのがあるので、これを使ってみる。

配布サイトの「DOWNLOAD」をクリックで、zipのアーカイブがダウンロードされる。5/2時点でver4.2。
zipを展開して examples/pull-to-refresh/index.html を開けば、デモが見れる。

でもこれに、jQueryMobile を加えようとしても、jqmのヘッダやフッタがちゃんと表示されなかったり、ちゃんと動作しないのよね。

というわけで、この iScroll4 を jQueryMobile で使うためのプラグインをいくつか試してみた。

  • javascript-jquery.mobile.iscroll
    • iScrollが古い(3.7.1)
    • ドラッグスクロールのみでpull to refreshの組み込み方がわからなかった
  • jquery.scrollz
    • examplesの時点でよくわからなかったorz
  • pull-to-refresh
    • PCのブラウザで動かなかった(モバイルブラウザ限定？)ので回避
と一長一短で、添付のデモをすぐに動作させることができた jquery-mobile-iscrollview を使ってみた。

といっても、zip の中に入っている demo/build/pull_13.html をブラウザで開けば、jQuery1.9.1/jQueryMobile1.3.1 の構成でそのまま動く。

添付のdemoをベースに動く状態で最小限(?)の構成にするとこんな感じ。(のハズ…)
zipの中のlib/iscroll-pull-icon@2x.png を、css と同じディレクトリに置いておくこと。


html

<!DOCTYPE html>
<html lang="ja">
  <head>
	<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
	<title>pull to refresh sample</title>

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

	<link href="css/jquery.mobile.iscrollview.css" media="screen" rel="stylesheet" type="text/css" />
	<link href="css/jquery.mobile.iscrollview-pull.css" media="screen" rel="stylesheet" type="text/css" />

	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

	<script src="js/iscroll.js" type="text/javascript"></script>
	<script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>
	
	<!-- 実行時の処理はここで記述 -->
	<script src="js/sample-script.js" type="text/javascript"></script>

  </head>
  
  <body>
	<div data-role="page" id="my_pull_to_refresh_sample">
	  <div data-role="header">
		<h1>pull to refresh サンプル</h1>
	  </div>

	  <div data-role="content" data-iscroll="">
		<div class="iscroll-pulldown">
		  <span class="iscroll-pull-icon"></span>
		  <span class="iscroll-pull-label" data-iscroll-loading-text="更新中" data-iscroll-pulled-text="リリースして更新">スライドして更新</span>
		</div>

		<ul data-role="listview" id="my_data_list">
		  <!-- 初期表示項目 -->
		  <li>list item 1</li>
		  <li>list item 2</li>
		  <li>list item 3</li>
		  <li>list item 4</li>
		  <li>list item 5</li>
		</ul>

		<div class="iscroll-pullup">
		  <span class="iscroll-pull-icon"></span>
		  <span class="iscroll-pull-label" data-iscroll-loading-text="更新中" data-iscroll-pulled-text="リリースして更新">スライドして更新</span>
		</div>
	  </div>
	  
	  <div data-role="footer">
		<h4>zaki_hmkc</h4>
	  </div>
	</div>
  </body>
</html>

sample-script.js

//-------------------------------------------------------
// Pull-Up and Pull-Down callbacks for "Pull" page
//-------------------------------------------------------
(function pullPagePullImplementation($) {
    "use strict";
    var pullDownGeneratedCount = 0,	// pull-down で追加した項目の総数
    pullUpGeneratedCount = 0,		// pull-up で追加した項目の総数
    listSelector = "#my_data_list",
    lastItemSelector = listSelector + " > li:last-child";
    
    function gotPullDownData(event, data) {
	var i,
        newContent = "";
	for (i=0; i<3; i+=1) {  // Generate some fake new content
	    newContent = "<li>Pulldown-generated row " + (++pullDownGeneratedCount) + "</li>" + newContent;
	}
	$(listSelector).prepend(newContent).listview("refresh");  // listviewの先頭に挿入
	data.iscrollview.refresh();    // Refresh the iscrollview
    }
    
    function gotPullUpData(event, data) {
	var i,
        iscrollview = data.iscrollview,
        newContent = "";
	for (i=0; i<3; i+=1) { 
	    newContent += "<li>Pullup-generated row " + (++pullUpGeneratedCount) + "</li>";
	}
	$(listSelector).append(newContent).listview("refresh");	// listviewの末尾に追加
	
	iscrollview.refresh(null,
			    null,
			    $.proxy(function afterRefreshCallback(iscrollview) { 
				this.scrollToElement(lastItemSelector, 400); 
			    }, iscrollview) ); 
    }
    
    // 下へ引き下げた時の処理中ダミータイマー
    function onPullDown (event, data) { 
	setTimeout(function fakeRetrieveDataTimeout() {
	    gotPullDownData(event, data);
	}, 
		   1500); 
    }

    // 上へ引き伸ばした時の処理中ダミータイマー
    function onPullUp (event, data) { 
	setTimeout(function fakeRetrieveDataTimeout() {
	    gotPullUpData(event, data);
	}, 
		   1500); 
    }

    // htmlの #my_pull_to_refresh_sample にイベントを設定する
    $(document).delegate("#my_pull_to_refresh_sample", "pageinit", 
			 function bindPullPagePullCallbacks(event) {
			     $(".iscroll-wrapper", this).bind( {
				 iscroll_onpulldown : onPullDown,
				 iscroll_onpullup   : onPullUp
			     } );
			 } );

}(jQuery));
[ コメント ]
前のエントリ: DialogFragmentでダイアログ表示 [Android]

2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12

最終更新時間: 2013-05-02 16:12