「ページナビのオブジェクトのサンプル」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

ページナビのオブジェクトのサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページナビのオブジェクトのサンプル</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="knockout-2.1.0beta.js"></script>
<style type="text/css">
* {
font-family: "メイリオ";
font-size: 10pt;
}
table {
border-collapse:collapse;
margin:0;
}
th, td {
text-align:left;
vertical-align:top;
padding:3px;
font-weight:normal;
border:1px solid #ccc;
}
th {
background:#f0f0f0;
}
</style>
</head>
<body>
<h1>ページナビのオブジェクトのサンプル</h1>
<script type="text/javascript">
var PageNaviClass = function (_total) {
/// <summary>
/// ページナビのオブジェクト
///
/// _total: ページ総数
///
/// ex. 総ページ数が9ページのとき
/// - カレントページが「1」のとき：「 [1] 2 3 4 5 >」
/// - カレントページが「2」のとき：「 1 [2] 3 4 5 >」
/// - カレントページが「3」のとき：「 1 2 [3] 4 5 >」
/// - カレントページが「4」のとき：「< 2 3 [4] 5 6 >」
/// - カレントページが「5」のとき：「< 3 4 [5] 6 7 >」
/// - カレントページが「6」のとき：「< 4 5 [6] 7 8 >」
/// - カレントページが「7」のとき：「< 5 6 [7] 8 9 」
/// - カレントページが「8」のとき：「< 5 6 7 [8] 9 」
/// - カレントページが「9」のとき：「< 5 6 7 8 [9] 」
/// ※ 前・次があるときは、カレントページの前後、無ければ「0」
/// </summary>
var self = this;
var navView = 5; // 表示したいページナビゲーション数
var navTotal = 0; // 総ページ数
self.setNaviView = function (_view) {
/// <summary>
/// 表示したいページ数の変更
///
/// _view: 表示したいページ数
/// </summary>
navView = _view || navView;
}
self.getNaviObj = function (_cur) {
/// <summary>
/// ページナビで使う各種データオブジェクトの取得
///
/// _cur: 表示したいページ番号
/// </summary>
_cur = parseFloat(_cur) || 1;
if(_cur <= 0){
_cur = 1;
}
if (navTotal < _cur) { // 総ページ数を上回るページを表示しようとした場合
_cur = navTotal;
}
var _result = ({});
_result.All = navTotal; // 総ページ数
_result.Pre = _cur - 1; // 前ページ
_result.Nxt = _cur + 1; // 次ページ
_result.Cur = _cur; // 現在のページ
_result.Vie = new Array(); // 表示するページ
var _bgn = 1; // 表示するページナビの最初
var _end = _bgn + navView; // 表示するページナビの最後
var _center = Math.floor(navView / 2);
if (navTotal <= navView) { // 表示するページ数がページ総数より少ないとき
// 前・次ページは不要
_result.Pre = 0;
_result.Nxt = 0;
// 総ページ数がページの最後
_end = navTotal + 1;
}
else {
if (navTotal <= _cur) { // カレントページがページ総数より多いとき
// 次ページは不要
_result.Nxt = 0;
// ページ総数が最後になるようにページナビの最初を設定
_bgn = navTotal - (navView - 1);
// 最後のページをカレントページに設定
_cur = navTotal;
}
else if (_cur <= _center) { // カレントページが最初の方
// 前ページは不要
_result.Pre = 0;
}
else if (navTotal - _center <= _cur) { // カレントページが最後の方
// 次ページは不要
_result.Nxt = 0;
// ページ総数が最後になるようにページナビの最初を設定
_bgn = navTotal - (navView - 1);
}
else {
_bgn = _cur - _center;
}
// 最後のページを再設定
_end = _bgn + navView;
}
for (var i = _bgn; i < _end; i++) {
_result.Vie.push(i);
}
return _result;
}
self.initialize = function (_total) {
/// <summary>
/// コンストラクタ
///
/// _total: 総ページ数
/// </summary>
navTotal = parseFloat(_total) || navTotal;
}
self.initialize(_total);
}
var ViewModel = function () {
var self = this;
self.pageNavi = ko.observable(null);
self.all = ko.observable(90);
self.cur = ko.observable(1);
self.movePage = function(data) {
var all = parseFloat(self.all());
var pnObj = new PageNaviClass(all);
var cur = parseFloat(self.cur());
var pageNavi = pnObj.getNaviObj(cur);
self.pageNavi(pageNavi);
}
self.movePage();
}
$(document).ready(function () {
ko.applyBindings(new ViewModel());
});
</script>
<table data-bind="with: pageNavi">
<tr><th>総ページ数</th><td><input type="text" data-bind="value: $root.all" style="width:100px;" /></td></tr>
<tr><th>表示するページ</th><td><input type="text" data-bind="value: $root.cur" style="width:100px;" /></td></tr>
<tr><th colspan="2"><button data-bind="click: $root.movePage">↓変更↓</button></th></tr>
</table>
<table data-bind="with: pageNavi" style="margin-top:10px;">
<thead>
<tr>
<th>項目名</th>
<th>要素名？</th>
<th>値</th>
</tr>
</thead>
<tbody>
<tr><th>総ページ数</th><th>All</th><td data-bind="text: All"></td></tr>
<tr><th>カレントページ</th><th>Cur</th><td data-bind="text: Cur"></td></tr>
<tr><th>前</th><th>Pre</th><td data-bind="text: Pre"></td></tr>
<tr><th>表示するページナビゲーション</th><th>Vie（配列）</th><td data-bind="foreach: Vie"><span data-bind="text: $data + ' | '"></span></td></tr>
<tr><th>次</th><th>Nxt</th><td data-bind="text: Nxt"></td></tr>
</tbody>
</table>
<p>前・次の値が「0」のときは「何もない」という扱い</p>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>