WEBプログラム覚書::jQuery プラグイン Slide boxメモ

2009年06月04日 03:35

jQuery プラグイン Slide boxメモ

パーマリンク | http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/465

ちょうどこういうのやりたかったのでどんな感じで実装されてるか調べてみた。

クライアント


$("#testZone").slideBox({width: "100%", height: "200px", position: "top"});

slideBox.js


/**
 * Slide Box : a jQuery Plug-in
 * Samuel Garneau <samgarneau@gmail.com>
 * http://samgarneau.com
 * 
 * Released under no license, just use it where you want and when you want.
 */
(function($){
    
    /** 
     * プラグインの書式
     * jQueryオブジェクトにslideBoxという
     * メソッドを追加してる感じかと思われる。
     *
     * 引数 params はオブジェクト
     * default と同じプロパティが設定される。
     */
    $.fn.slideBox = function(params){
        
        // thisは$("#testZone")
        // id=testZone 内のHTMLを取得
        var content = $(this).html();
        
        // デフォルトのパラメータ
        var defaults = {
            width: "100%",
            height: "200px",
            position: "bottom"          // Possible values : "top", "bottom"
        }
        
        /**
         * 引数あった場合は
         * デフォルトのパラメータを上書き
         *
         */
         
        // extending the fuction
        if(params) $.extend(defaults, params);
        
        var divPanel = $("<div class='slide-panel'>");
        var divContent = $("<div class='content'>");
        
        /**
         * $(divContent)の中身は
         *
         * <div class='content'>
         *   id=testZone 内のHTML
         * </div>
         *
         * って感じになる。
         */
        $(divContent).html(content);
        
        /**
         * $(divPanel)にクラスの追加
         *
         * <div class='slide-panel bottom or top'>
         * </div>
         *
         * って感じになる。
         */
        $(divPanel).addClass(defaults.position);
                
        // $(divPanel)の横幅を設定
        $(divPanel).css("width", defaults.width);
        
        
        // $(divPanel)のセンタリング
        // centering the slide panel
        $(divPanel).css("left", (100 - parseInt(defaults.width))/2 + "%");
    
        /**
         * topが指定された場合の処理
         *
         * <div class='slide-panel bottom or top'>
         * </div>
         *
         * って感じになる。
         */
         
        // if position is top we're adding 
        if(defaults.position == "top")
            $(divPanel).append($(divContent));
        
        // adding buttons
        $(divPanel).append("<div class='slide-button'>Ouvrir</div>");
        $(divPanel).append("<div style='display: none' id='close-button' class='slide-button'>Fermer</div>");
        
        if(defaults.position == "bottom")
            $(divPanel).append($(divContent));
        
        
        /**
         * DOMの置換
         *
         * <div id="testZone">
         *     <p>TestZone</p>
         * </div>
         *
         * ↓
         * ↓ HTMLは下記のように変更される
         * ↓
         *
         * <div class='content'>
         *
         *     <div class='slide-button'>Ouvrir</div> <= position=bottom の場合
         *     <div style='display: none' id='close-button' class='slide-button'>Fermer</div> <= position=bottom の場合
         *
         *     <div class='slide-panel bottom or top'>
         *         <p>TestZone</p>
         *     </div>
         *
         *     <div class='slide-button'>Ouvrir</div> <= position=top の場合
         *     <div style='display: none' id='close-button' class='slide-button'>Fermer</div> <= position=top の場合
         *
         * </div>
         *
         * これに対してCSSとイベントを追加していく。
         */
        $(this).replaceWith($(divPanel));
        
        // 設置したボタンにイベントを設定
        // 動きは高さを変更しています。
        
        // Buttons action
        $(".slide-button").click(function(){
            if($(this).attr("id") == "close-button")
                $(divContent).animate({height: "0px"}, 1000);
            else
                $(divContent).animate({height: defaults.height}, 1000);
            
            $(".slide-button").toggle();
        });
    };
    
})(jQuery);

何となくわかった気がする。ついでにjQueryのプラグインの作り方もなんとなくわかった気がする。

気になったのは