jQuery Bookletでhash tag controlが動かない時の対処法：メモ

jQuery BookletはiPhoneでも動くので意外と利用の幅が広いかもしれません。

オプションも豊富で、痒いところに手が届く作り込み。こういうものがFlashなしで簡単に実装できるのはありがたいですね。

今回jQuery Bookletを使用した際に少々つまずいたのでメモとして記事に残します。

jQuery Booklet

jQuery Bookletは本をめくるような動作で画像やテキストを見せることができます。

オプションによりドラッグやクリックといったアクションでのページめくり方法変更や、「次へ」「前へ」などのナビゲーション、チャプターの設定によるリンクも設置可能です。

詳細は下記のリンク先でご確認ください。demosのところをご覧頂ければどういったことができるかがおわかりになるはずです。

• jQuery Booklet

hash tag controlの動作

jQuery Bookletのオプションの一つにhash tag controlというものがあります。

これはjQuery Booklet内の各ページに、ハッシュタグを用いた形のアンカーを持たせることができる設定です。これを利用してページ内リンクのように特定ページへの移動が可能になります。

ところが、１ページ目へのリンクを張ると動作が不安定になります。状態としては数回動いてそれ以降は動かなくなりました。リロードするとリンクの反応が戻りますが、数回動かすとまたリンクが動作しなくなります。URLを見るとハッシュタグは切り替わっているので、移動の方に問題があるようです。

対処法

hash tag controlがうまく動作しない状況をいくつか確認していくと、奇数ページで症状がでるのだと分かりました。

そこで、目的の見開きページの内の偶数ページを指定するとうまく動作しました。例えば、見開きで1ページ目と2ページ目が表示されている部分へのリンクには、

<a href="#/page/1">page1</a>

ではなく

<a href="#/page/2">page1</a>

と記述します。

結び

対処療法ではありますが、とりあえずうまくいきました。

ちなみに本家でも同様に動作が不安定なため、こういうものなのかもしれません。とはいえ動かないナビゲーションは恐いですし、この程度の対処で動いて胸を撫で下ろしています。

おまけ1

jQuery Bookletでchapter selectorやpage selectorを表示させる場合には、

$(function() {
                  $('#mybook').booklet({
  menu: '#任意の名称',
  chapterSelector: true,
  pageSelector: true
});
              });

と追加するだけではなく、設定した任意の名称で以下のようなタグを作る必要があります。

<div id="任意の名称"></div>

おまけ2

このjQuery Bookletは便利なのですが、初見で使い方が分からない方は多いかもしれません。

jQuery Bookletを利用する場合には操作説明を併記することをお勧めします。

おまけ3[2012.9.4追記]

Bookletを使用したページを印刷しようとすると、中に組み込んだページが縦一列にズラッと並びます。

配布元サイトでも同種の状態になりましたので、印刷時のこの問題に対応する必要がある場合には検討の必要があるかもしれません。残念ながら私では、いくつか方法を試してみたリファレンスを参照してみましたが解決法が見つけられませんでした。

とりうる手段は、放置かCSSによって印刷時のみBookletを非表示にするかかなと考えています。