spPagingButton

マークアップ例

‹ ›

コンポーネント情報
モジュール	im_mobile_framework
導入されたバージョン	7.2
バージョン	8.0.9

機能説明

リストのページを移動するためのボタンを提供します。
ページ移動ボタン押下時、未実装の関数「onPageLinkFunc」を呼び出しますので、
用途に応じてJavaScript関数を実装してください。

注意事項

このタグはスマートフォン用の画面向けにデザインされています。
このタグはリスト内に配置する要素です。必ず<ul data-role=“listview”>内に配置してください。

属性一覧

注釈	属性名	型	説明	省略時の動作
必須	`currentPage`	number	現在表示中のページ数を指定します。	-
	`leftButtonIcon`	String	左部のボタンのアイコンを指定します。使用可能なアイコンの名前については、 jQuery Mobileのリファレンスを参照してください。	'arrow-l'
	`leftButtonTheme`	String	左部のテーマを指定します。省略した場合は、既定のテーマを使用します。左部のテーマをカスタマイズする場合は、この属性にテーマの名前を指定します。使用可能なテーマの名前については、 jQuery Mobileのリファレンスを参照してください。	-
必須	`maxRecord`	number	情報の全件数を指定します。	-
必須	`pageLine`	number	１ページあたりの表示行数を指定します。	-
	`panelTheme`	String	テーマを指定します。省略した場合は、既定のテーマを使用します。テーマをカスタマイズする場合は、この属性にテーマの名前を指定します。使用可能なテーマの名前については、 jQuery Mobileのリファレンスを参照してください。	-
	`rightButtonIcon`	String	右部のボタンのアイコンを指定します。使用可能なアイコンの名前については、 jQuery Mobileのリファレンスを参照してください。	'arrow-r'
	`rightButtonTheme`	String	右部のテーマを指定します。省略した場合は、既定のテーマを使用します。右部のテーマをカスタマイズする場合は、この属性にテーマの名前を指定します。使用可能なテーマの名前については、 jQuery Mobileのリファレンスを参照してください。	-

サンプル

マークアップ例

5行づつリスト表示する例。
<ul data-role=“listview”>タグの内部に配置します。

ファンクションコンテナ(サーバーサイドJavaScript)

var $records = [
	"レコード1",
	"レコード2",
	"レコード3",
	"レコード4",
	"レコード5",
	"レコード6",
	"レコード7",
	"レコード8",
	"レコード9",
	"レコード10",
	"レコード11",
	"レコード12"
];

var $currentPage = 1;
var $maxRecord;
var $pageLine;
var $currentRecords = [];

function init(request) {
	if (!isUndefined(request.currentPage)) {
		$currentPage = parseInt(request.currentPage);
	}
	$maxRecord = $records.length;
	$pageLine  = 5;
	
	var recordCount = $pageLine * ($currentPage - 1);
	for (var i = recordCount; i < recordCount + $pageLine; i++) {
		if (i >= $records.length) {
			break;
		}
		$currentRecords.push($records[i]);
	}
}

var $records = [
	"レコード1",
	"レコード2",
	"レコード3",
	"レコード4",
	"レコード5",
	"レコード6",
	"レコード7",
	"レコード8",
	"レコード9",
	"レコード10",
	"レコード11",
	"レコード12"
];

var $currentPage = 1;
var $maxRecord;
var $pageLine;
var $currentRecords = [];

function init(request) {
	if (!isUndefined(request.currentPage)) {
		$currentPage = parseInt(request.currentPage);
	}
	$maxRecord = $records.length;
	$pageLine  = 5;
	
	var recordCount = $pageLine * ($currentPage - 1);
	for (var i = recordCount; i < recordCount + $pageLine; i++) {
		if (i >= $records.length) {
			break;
		}
		$currentRecords.push($records[i]);
	}
}

プレゼンテーションページ (HTML)

<script>
  function onPageLinkFunc(page) {
      $("input[name='currentPage']").val(page);
      document.pageForm.submit();
  }
</script>
<ul data-role="listview">
  <imart type="spPagingButton" currentPage=$currentPage pageLine=$pageLine maxRecord=$maxRecord  panelTheme="e" />
  <imart type="repeat" list=$currentRecords item="record">
    <li><a><imart type="string" value=record /></a></li>
  </imart>
</ul>
<form name="pageForm" method="POST" action="/imart/mobile_fw/pagingSample">
  <input type="hidden" name="currentPage" />
</form>

<script>
  function onPageLinkFunc(page) {
      $("input[name='currentPage']").val(page);
      document.pageForm.submit();
  }
</script>
<ul data-role="listview">
  <imart type="spPagingButton" currentPage=$currentPage pageLine=$pageLine maxRecord=$maxRecord  panelTheme="e" />
  <imart type="repeat" list=$currentRecords item="record">
    <li><a><imart type="string" value=record /></a></li>
  </imart>
</ul>
<form name="pageForm" method="POST" action="/imart/mobile_fw/pagingSample">
  <input type="hidden" name="currentPage" />
</form>