jQueryでシンプルにExpanderを作る

morimotoです。

「もっと画面をすっきりとしたいな・・・」と思う時に良く使われるのが、閉じたり開いたりするExpand機能かと思います。 そのExpandをするために毎回javascriptを書くのは面倒くさい。

そこで簡単にExpandさせれるようにjQueryでPluginを書いてみました。 (完成しているとはいえませんが。。。)

(function($){
  $.fn.simpleExpander = function(options){
    var target = options.target || undefined;
    var trigger = options.trigger || 'click';
    var collapsedClass = options.collapsedClass || 'collapsed';
    if (typeof(options) == 'string') target = options;
    if (target) {
      $(this).addClass('expander');
      targetToggle(this, target, collapsedClass);
      $(this).bind(trigger, function(){
        $(this).toggleClass(collapsedClass);
        targetToggle(this, target, collapsedClass);
      });
    }
    return this;
  };

  function targetToggle(el, target, collapsedClass) {
    if ($(el).hasClass(collapsedClass)) { 
      $(target).hide(); 
    } else { 
      $(target).show(); 
    }
  }
})(jQuery);

使い方


<button id="trigger1">button 1</button>
<button id="trigger2">button 2</button>

<div class="target apple">window 1</div>
<div class="target banana">window 2</div>
<div class="target grape">window 3</div>

<script type="text/javascript">
$('#trigger1').simpleExpander('div.target');
$('#trigger2').simpleExpander('div.target.banana');
$('div.apple').simpleExpander({target: 'div.target.grape', trigger: 'mouseover'});
</script>

demo

target apple
target banana
target grape

ボタン1はdiv全てがtoggleします。 ボタン2は真ん中のdivのみtoggleします。 一番上のdivをマウスオーバーすると一番下のdivがtoggleします。

もっとシンプルに作れるのかもしれないですが、こんなのもあるんだなという程度で見ていただくとありがたいです。

以上、morimotoでした。。。

コメントを残す

メールアドレスが公開されることはありません。