TOOL更新_「kaz PHPプログラム自動作成◎自動生成お助けツール」をjQuery Mobileでスマートフォン対応にする。その２。ページングボタン。
TOOL更新_「kaz PHPプログラム自動作成◎自動生成お助けツール」をjQuery Mobileでスマートフォン対応にする。その２。 ページングボタン。
2011/06/20 09:00-01:30 見本にするため。まず、「ログイン情報」をスマートフォン対応にする。ページングのところ「最初」、「前」、「セレクト1から10」、「次」、「最後」とうまく並ばないので「<div data-role="navbar"> <ul>、<li>」使った。すると横一列に並んだ。でも<a>タグは四角いのに、「セレクト1から10」は丸みがある。
2011/06/21 09:00-18：00 ページングのところのロジック案。この方法でいけそう。
「PageNavi」クラスの「getHTML()」メソッドを「getHTML($mode_suma='no')」にする。 $mode_suma=='yes'のとき、以下のロジックでスマーフォン用のページングHTMLを戻す。 （現在のロジックをそのまま使い、最後に変換する） １．スマーフォン用「最初、前、次、最終」ボタン作成。 （１）変数$links['・・・']内容をチェックし「<a」タグがあればボタンを作る。 ・最初：変数$links['first']からhrefを抽出しボタンを作る。 例： 抽出：<a href="/kaz01u/admin/logininfo/logininfo.php?mode=list_back&pageID=1" 作成：<li><a href="/kaz01u/admin/logininfo/logininfo.php?mode=list_back&pageID=1" rel="external" data-role="button">最初</a></li> ・前：変数$links['back']からhrefを抽出しボタンを作る。 ・次：変数$links['next']からhrefを抽出しボタンを作る。 ・最終：変数$links['last']からhrefを抽出しボタンを作る。 （２）変数$links['・・・']内容をチェックし「<a」タグがなければボタンを作らない。 ２．スマーフォン用ページプルダウン（select option）を変数$pagesから作る。 ・$pagesの各配列値を後ろから見て、最初に出てきた数字が続く間（ページ番号）を抽出。 ・$pagesの各配列値に「<a」タグが入っていないとき、カレントページとする。
2011/06/21 11:00-18:00 「PageNavi」クラスの「getHTML()」メソッドを「getHTML($mode_suma='no')」にした。スマートフォンでは上下にページングメニュー作るので「selectPageID1」「selectPageID2」の２つに分けた。
■PageNavi.class.php 修正
＜＜修正後＞＞
function getHTML($mode_suma='no')
・・・
if ($mode_suma == 'no') {
$result = $links['prevPageNavi']
. $this->_prevPageNaviSpace
. $links['first']
. $this->_firstPageSpace
. $links['back']
. $this->_prevImgSpace
. join(' ', $pages)
. $this->_nextImgSpace
. $links['next']
. $this->_lastPageSpace
. $links['last']
. $this->_nextPageNaviSpace
. $links['nextPageNavi'];
} else {
$result = array();
$result[1] = PageNavi::getHTMLsuma($links, $pages, '1');
$result[2] = PageNavi::getHTMLsuma($links, $pages, '2');
}
return $result;
}
function getHTMLsuma(&$links, &$pages, $selectPageIDNo)
{
$result = "<div data-role=\"navbar\">\n<ul>\n";
if (preg_match("/href=\"([^\"]+)\" /i", $links['first'], $matches) ) { // $links['first']にhrefがあるとき
$result .= '<li><a href="' .$matches[1] . '" rel="external" data-role="button" target="_self">最初</a></li>' ."\n";
}
if (preg_match("/href=\"([^\"]+)\" /i", $links['back'], $matches) ) { // $links['back']にhrefがあるとき
$result .= '<li><a href="' .$matches[1] . '" rel="external" data-role="button" target="_self">前</a></li>' ."\n";
}
$result .= "<li><div>\n<select name=\"selectPageID" . $selectPageIDNo . "\" id=\"selectPageID" . $selectPageIDNo . "\">\n";
foreach ($pages as $key => $val) {
$wk_str = '';
if (!preg_match("/<a/i", $val) ) { // 「<a」タグなし
$wk_str = ' selected="selected"';
}
if (preg_match("/(\d+)[^\d]+$/i", $val, $matches) ) { // ページ番号取得
$result .= '<option' . $wk_str . ' value="' .$matches[1] . '">' .$matches[1] . '</option>' ."\n";
}
}
$result .= "</select>\n</div></li>\n";
if (preg_match("/href=\"([^\"]+)\" /i", $links['next'], $matches) ) { // $links['next']にhrefがあるとき
$result .= '<li><a href="' .$matches[1] . '" rel="external" data-role="button" target="_self">次</a></li>' ."\n";
}
if (preg_match("/href=\"([^\"]+)\" /i", $links['last'], $matches) ) { // $links['last']にhrefがあるとき
$result .= '<li><a href="' .$matches[1] . '" rel="external" data-role="button" target="_self">最終</a></li>' ."\n";
}
$result .= "</ul>\n</div>\n";
return $result;
}2011/06/23 10:30-17:30 「PageNavi」クラスの「getHTML()」メソッドを「getHTML($mode_suma='no')」にして、できたページングのPCとスマートフォン比較
2011/06/26 5:30-6:00 target="_self"を最初、前、次、最終に追加した。
■PC ＜＝ 既存ロジック
・HTML内容 <p class="text-center"> <a href="/kaz01u/admin/logininfo/logininfo.php?mode=list_back&pageID=1" title=""> <img src="/kaz01u/img/icon_page_1.gif" alt="" width="8" height="10" /></a> <a href="/kaz01u/admin/logininfo/logininfo.php?mode=list_back&pageID=1" title=""> <img src="/kaz01u/img/icon_page_2.gif" alt=" width="7" height="10" /></a> 【<a href="logininfo.php?pageID=1&mode=list_back&mode_suma=no">1</a>】 <strong><font color="#FF6600">【2】</font></strong> 【<a href="logininfo.php?pageID=3&mode=list_back&mode_suma=no">3</a>】 【<a href="logininfo.php?pageID=4&mode=list_back&mode_suma=no">4</a>】 【<a href="logininfo.php?pageID=5&mode=list_back&mode_suma=no">5</a>】 <a href="/kaz01u/admin/logininfo/logininfo.php?mode=list_back&pageID=3" title=""> <img src="/kaz01u/img/icon_page_3.gif" alt="" width="7" height="10" /></a> <a href="/kaz01u/admin/logininfo/logininfo.php?mode=list_back&pageID=5" title=""> <img src="/kaz01u/img/icon_page_4.gif" alt="" width="8" height="10" /></a> </p>
■スマートフォン ＜＝ 作成追加したロジック
2011/06/26 21:00-21:30 「<form name="fmPageID" id="fmPageID" method="GET" action="logininfo.php" rel="external" target="_self">」の「rel="external"」は間違いでした。「data-ajax="false"」にしないといけない。「<form name="fmPageID" id="fmPageID" method="GET" action="logininfo.php" data-ajax="false" target="_self">」が正しい。(formにrelは使えない)
・「最初」「前」「次」「最終」はaタグでリンクする。（PCと同じやり方）
・ページ番号指定の（select option）はjqueryでchangeイベントのメソッドを作りGETでpageID、modeをサーバーにsubmit。（PCはaタグだが、スマートフォンでは文字が小さすぎて押せないらしいので。これが定番らしい）
注意１：formタブに「 data-ajax="false" target="_self"」をつけないとうまくいかない。つければ「http://localhost/kaz01u/admin/logininfo/logininfo.php?pageID=3&mode=list_back」となるものに、つけなかった場合「http://localhost/kaz01u/admin/logininfo/logininfo.php?pageID=2&mode=list_back#logininfo.php?pageID=3&mode=list_back」になってしまうのでうまく動かない。
注意２： method="GET"を="get"にしてしまうと「.php\Pager」の中で作るaタグ内容が違ってくるので「最初」「前」「次」「最後」のボタンが出なくなります。気をつけてください。
注意３：「$("#pageID").val($(this).children(':selected').text());」と「$("#pageID").val($(this).val());」は同じ意味です。・・・ちなみに「$(this).val()」を「$(this).text()」にすると動きません。
<form name="fmPageID" id="fmPageID" method="GET" action="logininfo.php" data-ajax="false" target="_self">
<input type="hidden" name="pageID" id="pageID" value="" />
<input type="hidden" name="mode" id="mode" value="list_back" />
</form>
<script>
$(function(){
$("#selectPageID1").change(function () {
$("#pageID").val($(this).val());
//$("#pageID").val($(this).children(':selected').text());
$("#fmPageID").submit();
});
$("#selectPageID2").change(function () {
$("#pageID").val($(this).val());
//$("#pageID").val($(this).children(':selected').text());
$("#fmPageID").submit();
});
});
</script>
・上のページングメニューのHTML内容。（下は「selectPageID1を「selectPageID2」に変更したものとなります。）
<div data-role="navbar">
<ul>
<li><a href="/kaz01u/admin/logininfo/logininfo.php?mode=list_back&pageID=1" rel="external" data-role="button" target="_self">最初</a></li>
<li><a href="/kaz01u/admin/logininfo/logininfo.php?mode=list_back&pageID=1" rel="external" data-role="button" target="_self">前</a></li>
<li><div>
<select name="selectPageID1" id="selectPageID1">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div></li>
<li><a href="/kaz01u/admin/logininfo/logininfo.php?mode=list_back&pageID=3" rel="external" data-role="button" target="_self">次</a></li>
<li><a href="/kaz01u/admin/logininfo/logininfo.php?mode=list_back&pageID=5" rel="external" data-role="button" target="_self">最終</a></li>
</ul>
</div>
