会社の仕事で、ページャーのデザイン変更の依頼がきました。
現在ページャーは
前へ 1 2 3 4 5 6 次へ
という形です。これをスマートフォンページ用に
前へ 1/6 次へ
という形に変更したいそうです。
スマートフォンで小さなボタンは押しにくいし、不要なボタンは邪魔ですもんね。
これがwordpressで構築されたページなら大した作業じゃないんですが…
CMSではあるんですがwordpressとは全く異なるシステムで、ソースは自動的にはき出されるものでした。こちら側でソースを変更することは出来ず、ページャーデザインのパターンもこれ以外に無いみたい。
そうなってしまうと残る手段は、
- 先方にデザイン変更をあきらめてもらう
- システム提供会社に機能追加要望を出す
- JavaScriptで無理矢理デザインを変更する
の3つです。
「スマートフォンページ用に」という理由があっての要望なのであきらめてもらうのは避けたいところ…
システム提供会社に要望を出してもすぐに反映されないだろうし、取り入れられるかもわからない…
となるとJavaScriptを使うのが一番現実的。
このシステムはそれなりに有名だけど一般的じゃない（何のシステムかは直接聞いてください）ので、同じような話は検索しても出てきません。そうなると自分で記述しなきゃいけませんねぇ…
JavaScriptとjQueryはまだまだ勉強中なのですが、頑張って書いてみます。
ちなみにソースはこんな感じ。
<div class="pagenav"> <a href="#">前へ</a> <span class="number"> <a href="#" class="current">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> </span> <a href="#">次へ</a> </div>
今いるページには自動的に「class=”current”」が付加されます。
「前へ」と「次へ」はそのままなので触れずに、間の1〜6を変形させる必要があります。
今いるページはclassが付くので、そのタグ内の文字を取得すれば良いですね。
$('a.current').text();
最後のページは必ず最後に出るので、class=”number”内の最後の文字を取得します。
$('.number a:last-child').text();
んで、さっき取得した文字を「●/●」という形に並べてあげます。
ついでにここで上記の記述を変数にしておきます。
そういえば、今ある1〜6は邪魔なので消さないとですね。
var now = $('a.current').text();
var max = $('.number > a:last-child').text();
$('.number').append(now + '/' + max);
$('.number > a').remove();
とりあえず書けました。こんな感じか？
プレビューしてみると、
前へ 1/6 次へ
という風に、希望としていた形に変わってくれました！やったー
…と思ったのも束の間、すぐに新しい問題に気付いたのでした。たぶんつづく。
コメント