前の関連記事：Blogger:ページ番号付ページナビ(6)モジュール化してグローバル関数を除去する
インデックスページの上部にもページナビを表示させる
複数のページナビを表示させるには同じidのdiv要素をHTMLのテンプレートに挿入すればよいと考えましたが、やってみたら最初に読み込まれる1つだけにしかページナビが表示されませんでした。
idは1ページに1つしか存在できないのでした。
idをclassにしてしまおうかと思いましたが、上部に表示させるページナビは少しデザインを変えたいと思ったのでページナビを表示させるidを追加できるようにしました。
<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' version='1' visible='true'>
<b:includable id='main' var='top'>
<div class='blog-pager' id='blog-pager2'/> <!-- 投稿上部のページナビ -->
<b:if cond='!data:mobile'>
Blog1ウィジェットのmainインクルードの先頭にblog-pager2というidのdiv要素を挿入しました。しかし、これだとアイテムページにもdiv要素が表示されこのブログのモバイルサイトのデザインでは背景のみ表示されてしまうのでアイテムページではこの要素は表示させないようにしました。
<b:widget id='Blog1' locked='false' title='ブログの投稿' type='Blog' version='1' visible='true'>
<b:includable id='main' var='top'>
<b:if cond='data:blog.pageType != "item"'> <!-- アイテムページには表示させない。 -->
<div class='blog-pager' id='blog-pager2'/> <!-- 投稿上部のページナビ -->
</b:if>
<b:if cond='data:mobile == "false"'>
pagenavi.js （モバイルサイトへの対応も済んだものです。）これでできると思ったら2つのページナビが1か所に二重に表示されてしまいました。
デバッグしてみるとフィードを受け取るコールバック関数は2回目のPageNavi_Blogger.all()の呼び出し後に実行されることが原因とわかりました。
なので後で実行したPageNavi_Blogger.all("blog-pager2")のid="blog-pager2"の要素に先に実行したはずのid="blog-pager"の分のページナビも表示されてしまうのでした。
jQuery.Deferred学習メモ(1)$.DeferredでPromiseを操作するで学習したPromiseを使えばなんとかなるような気もしましたが、ちょっと考えても解決できそうな案が思いつきませんでした。
そこでidを配列に保存しておいてあとでまとめて実行することにしました。
pagenavi.js
これでうまくいきました。
PageNavi_Blogger.all(["blog-pager","blog-pager2"]); // ページナビの起動。引き数にHTMLの要素のidを配列で入れる。呼び出すときにページナビを表示させるHTMLの要素のidを配列で引数に渡します。
モバイルサイトの表示を工夫する
Blogger:ページ番号付ページナビ(4)投稿数が150個を超えても使えるように修正するでやったようにモバイルサイトでは横幅が足りないためにこのように変な表示になってしまいます。
var left = vars.left_html.join(''); // 左ジャンプボタンとその左側のボタンのhtml。
var center = vars.center_html.join(''); // 左右ジャンプボタンの間のボタンのhtml。
var right = vars.right_html.join(''); // 右ジャンプボタンとその右側のボタンのhtml。
var html;
if ( window.parent.screen.width > 650 || (vars.pageEnd < 11) || (vars.pageStart > vars.lastPageNo - pg.defaults.numPages)) { // すべてのボタンを1行で表示する場合。
html = left + center + right; // 配列の要素をすべて結合する。
} else { // スクリーン幅がせまく、かつ、（表示の終わりのページ番号が10より大きい時、または、表示の始まりのページ番号が最終ページ番号とページナビに表示するページ数の差以下の時)
if (vars.right_html.length < 2) { // 右のジャンプボタンがないときは右のみ次行に表示させない。
center += right;
right = null;
}
html = '<div style="text-align: center;line-height:3;">' + center + '</div>';
if (left || right){
html += '<div>'
if (left) {html += '<span style="text-align: left;float: left;">' + left + '</span>';}
if (right) {html += '<span style="float: right;">' + right + '</span>';}
html += '</div>'
} // ジャンプボタンより外側は2行目に表示する。
}
vars.elements.forEach(function(e){e.innerHTML = html;}) // 要素を書き換え。
スクリーン幅が指定ピクセル未満の場合は左右のジャンプボタンより端にあるボタンは下の行に表示させるようにしました。具体的にはiPod touch 6世代で縦長にした時への対応です。
通常はこのようになります。
最後の表示ページ番号が10ページ目までは1行で収まるので1行で表示するようにしています。
右のジャンプボタンが表示されないときは最終ページ番号も同じ行に表示させるようにしています。
2行目が重なってくるので1行目のスタイルにline-height:3を設定しています。
しかしそのために上に間延びした空間ができてしまいました。
1行目にline-height:2.2、2行目にline-height:2.4と分けて設定すると程よくなりました。
このとき上部に設定したページナビが背景からはみ出ています。
これはoverflow:hiddenを設定すると解決することがわかりましたが、CSSで設定することにします。
iPod touchで正しくスクリーンサイズが取得できない
画面サイズを取得する
スクリーンサイズはここを参考にwindow.parent.screen.widthで取得するようにしていました。
ところがiPod touch 6でやってみると画面を縦から横にしておスクリーンサイズの横幅は320pxのままで切り替わりません。
ChromeのデベロッパーツールでiPhone5にしてRotateさせてみるとちゃんと幅と高さが入れ替わっていますが、同じ画面サイズのiPod touch 6の実機でやると画面が縦でも横でも320x568で変わりません。
仕方ないので window.innerWidthでウィンドウサイズで幅を判断してモバイルサイトのページナビのレイアウトを変更することにしました。
if ( window.innerWidth > 400 || (vars.pageEnd < 11) || (vars.pageStart > vars.lastPageNo - pg.defaults.numPages)) { // すべてのボタンを1行で表示する場合。
ウィンドウサイズが400pxより大きいかどうかで判断することにしました。これでiPod touch 6では狙い通りに動くようになりました。
pagenavi.js
インデックスページの上部に表示したページナビにCSSを設定する
ウェブバージョンではインデックスページの上部に表示したページナビは左寄せになっています。
モバイルサイトで背景からはみ出す問題も含めてCSSを設定します。
id='blog-pager'と同様にid='blog-pager2'にもCSSを追加します。
#blog-pager2{clear:both;text-align: center;padding: 7px;overflow: hidden;}
overflow: hidden;でモバイルサイトで背景がはみ出る問題が解決します。しかしそうするとウェブバージョンでボタンが削られて小さくなってしまうのでpadding: 7px;を設定しています。
これでモバイルサイトもウェブバージョンも程よい感じになりました。
参考にしたサイト
画面サイズを取得する
iPod touchの実機では画面のサイズの縦横サイズが回転させても変わりませんでした。
0 件のコメント:
コメントを投稿