アコーディオンのjQueryプラグインを作りました

みなさんはjQueryをよく使いますか？僕はよく使います。jQueryはプラグインが豊富で、手軽にWebページを使いやすくしたり派手にしたりできるので、適切に使えば凄く有益なライブラリだと思います。

ただ、期待する機能を全て揃えているプラグインがあるか否かは使ってみないと分からなかったりするし、カスタマイズもしやすいか否かはそのプラグインによりますよね。

なので、僕はjavascript力をつける意味合いも込めて、基本自分で作ってたりしてます。果たしてちゃんとjavascript力はついているのか。

そんな中、良い感じのアコーディオンがこないだ作れたので、調子に乗ってプラグイン化してみようかと思い立って、プラグインデビューしちゃいました！いやっほー(/’□’)/

何を作ったか

見出し的な要素をタップすると詳細がアニメーションでにゅーんって表示されるUIです。いわゆるアコーディオンですね。

デモを作ってみました。こちらです

アコーディオンデモ

どんななの？

自然な感じのアコーディオンです！

アコーディオンのプラグインを何個か探したんですが、表示される要素がすげー縦に長い場合にですね、タップした箇所が画面の遙か上に行ってしまい、わざわざスクロールしないとタップした箇所の詳細部分が見られないプラグインが多かったんですね。全然自然じゃない。

なので、自然な感じのがほしくて作りました。

具体的には、

「タップした場所が画面の一番上に来る」感じ

わかりにくいね。

デモ見て下さい

使い方

ホントは作り方を解説しようと思ったんだけどそれはまた別の機会にしますね。

まず、プラグインファイルをDLします。

アコーディオンプラグインダウンロード

htmlに読み込みの記述を追記します。

html
<javascript src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<javascript src="/js/jq-acodon.js"></script>
</body>

次に、アコーディオンにしたいセレクタに対して .acodon() を記述します。

html
<dl id="accordion">
  <dt>title1</dt>
  <dd>text.text.text.text.text.</dd>
  <dt>title1</dt>
  <dd>text.text.text.text.text.</dd>
  <dt>title1</dt>
  <dd>text.text.text.text.text.</dd>
</dl>

JS
$(function(){
  $("#accordion").acodon();
});

これで一応動作します。

動作しますが、デフォルトではdlタグで作ることを想定していますので、それ以外のタグで作成している場合はオプションでタップする要素を指定してください。

html
<ul id="accordion">
  <li>
    <a href="#">title1</a>
    <p>text.text.text.text.text.text.</p>
  </li>
  <!-- 中略 -->
</ul>

JS
$(function(){
  $("#accordion").acodon({"header":"li a"});
});

多分これで動くはずです。…多分。

条件的なこと

タップする要素はデフォルトでは dt ですが、オプションで変更することも可能です。

ただし、今のところ開閉する要素の指定は特にできないです。出来るように作っておりませぬ。

開閉する要素は「タップする要素の次にある要素」です。

覚えておいて下さいね。ここ試験出るからな−！

おわりに

始めてjQueryのプラグインなるものを作ってみました。

まず必要な機能を作ってしまえば、後でそれをプラグイン化するのはさほどハードルが高いものではないように感じます。jQueryで動きがつけられるならプラグインは作れると言っても過言ではないです。

もちろん、プラグインを使ってオプションの設定をして、って意味ではなく、自分で動作を書いている場合のおはなしですけどね。

あと、最近よく思うんですが、受託でお仕事をやらせてもらっていて嬉しいな、と思うことの一つに、今の自分は出来ない、というかやったことがない、そしてやる必要がないと思うような事を要求される、と言う点があると思います。

別に良い子ちゃんする気はないので、「なんでそんなのが必要なの？」とは思いますが、でもそれでもやっぱり対応するでしょ？すると、もちろん自分には必要ないと思っていたことなので、そういう対応をする事で、今までやれなかったことが出来るようになるって事なんですよね。

そういうことの積み重ねもあり、自分の力を底上げできる要因になったりすると思うんです。

だって受託でやってないと僕はおそらくこのプラグイン作ってないですもん。

なので、自分で好きな物を作ることも良いけど、受託は受託で自分の幅を広げたり深みを増したりができる良い機会をもらえる物でもあるだなぁと思う事が多いので、お金を頂くことと共にありがたいことだなぁと思いますね。

あ、あと、プラグイン名は acodon なんですが、何かアコーディオンっぽい名前にしたかっただけだドン！もう一回遊ぶドン！