jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

横からスライドして現れるヘルプパネル

2015年5月29日
この記事は掲載から635日経過しています。
情報が古い可能性が有りますのでご了承下さい

ちょっと凝ったメールフォームを作っていると、テキストフォームなどの下に説明文を書きたくなるときが有ります。パソコンのみであれば領域が多く取れるので、ある程度の文章量でも大丈夫でしょうが、レスポンシブデザインが当たり前の昨今、無駄に長いヘルプを書くのはあまり宜しく有りません。また、より細かく記載されているページへブランクでリンクさせるような手抜き仕様もよく見かけます。

パソコンなら外部ページへのリンクも良いのでしょうが、パソコンですら外部ページを開いてまで見る事は無いものを、スマートフォンなら尚見ないと思われます。

そこで、ある程度の文章量があるヘルプであっても、同じ画面内にスライドして展開させる事で利便性を上げる方法を考えました。といっても、割と多く紹介されている手法だと思いますので、ご参考程度に。

サンプル

該当のHTML内にヘルプ用のHTMLを書き加えるものではなく、ヘルプ用に用意したシンプルなHTMLをスライド内にロードしますので、ヘルプの書き変えが容易です。

CSS

パネルは後ろのページの高さ・位置に関係なく上部に固定させるだけのスタイルを書いています。デフォルトで左-2000pxにして隠す形です。

Javascript

jQueryで書いていますので、jQueryも読み込んでおいて下さい。あと、サンプルはeasing使っていますので、jQueryUIも読み込んでいます。easing使わないのであればjQueryだけで。

スライドの開閉は割と単純で、クリックしたらパネルの位置を左ピッタリまでアニメーションさせます。閉じる時は逆にアニメーションさせるだけですね。

ただ、ブラウザというのはデバイスによって幅にかなり差が出ます。例えば数行程度のヘルプを画面全体にスライドするスライドに展開するのは微妙です。そこで、ブラウザ幅(デバイス幅)959pxを境目とし、それ以上なら30%、それ以下なら95%と、スライドの幅を可変させています。

これにより、パソコンだと右へ帯のように展開され、スマートフォンだと後ろのページが少し見える形で展開される事になります。

jQueryとPHPの処理

前述した通り、ページにヘルプの内容をいちいち書いていたら更新が面倒なので、HTMLファイルをPHPで読み込んでいます。

data-tpl=”XXXXX” この部分へ読み込ませたいファイル名を指定しています。

後はPHPでそのファイルを取得し、内容をキックバックし、スライドの中に差し込むだけ。

これはファイルと同じディレクトリにhelp_template/ というディレクトリを作り、その中にヘルプページを入れています。
http://studio-key.com/Sample2/jquery/slide-help/help_template/help1.html

ホームページによっては階層が違う場合もあると思うので、絶対URLで読み込むようにカスタムしても良いかもしれません。

あと、上からみょーんと出したり、左から出したり下からなど、色々と試してみると面白いかもです。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP