about 6 years ago

練習一下寫 JQuery Plugin

/*
 * clone 物件
 *  範例
 *  <input type="button" id="add" value="增加" />
 *  <div id="tempId" style="display:none">
 *          <div>
 *          <input type="text" id="text" value="新增" />
 *          <input type="button" id="delete" value="刪除" />
 *          </div>
 *  </div>
 *  <div id="cloneId">
 *  </div>
 *  
 *      $('#add').myClone({cloneId:"tempId",insertId:"cloneId", deleteObject:function () {
 *          $(this).prev().remove();
 *          $(this).remove();
 *      }});
 *
 *      $('#add2').myClone({cloneId:"tempId",insertId:"cloneId"}); 
 *  說明
 * bind 為主物件綁定的事件 預設 click
 * cloneId 要執行clone 的 id
 * insertId 要塞入的容器 id
 * deleteId 要執行刪除的 id
 * temp 計數器的起始數字
 * deleteObject 自訂刪除函數
 */
$.fn.myClone = function(settings) {
    // 預設屬性
    var _defaultSettings = {
            
            bind: "click",
            cloneId: "cloneId",
            insertId: "insertId",
            deleteId: "delete",
            temp:"0",
            deleteObject: function () {
                $(this).parent().remove();
            }
    };
    
    var _settings = $.extend(_defaultSettings, settings);
    
    var _cloneMethods = {
        cloneChildrenObject : function () {
            var temp_sum = parseInt($("#" + _settings.temp_id).val());
            temp_sum++;
            
            var clone_object = $("#" + _settings.cloneId).clone();
            
            // 檢查是否有要綁定刪除按鈕
            clone_object.find("#" + _settings.deleteId).bind("click", _cloneMethods.deleteObject);
            clone_object.find("#" + _settings.deleteId).bind("click", _cloneMethods.resizeObject);
            
            clone_object.find("[id]").each(function () {
                this.id = this.id + temp_sum;
                $(this).attr("id", this.id).attr("name", this.id);
            });
            $("#" + _settings.insertId).append(clone_object.children());
            $("#" + _settings.temp_id).val(temp_sum);
        },  
        
        resizeObject: function () {
            var temp_sum = parseInt($("#" + _settings.temp_id).val());
            temp_sum--;
            
            var clone_object = $("#" + _settings.cloneId).clone();
            var insert_object = $("#" + _settings.insertId).clone();
            
            var num = 0;
            
            clone_object.find("[id]").each(function () {
                var clone_id = this.id;
                var num = 0;
                
                insert_object.find("[id^='" + clone_id + "']").each(function () {
                    num++;
                    $("#" + this.id).attr("id", clone_id + num).attr("name", clone_id + num);
                });
            });
            
            $("#" + _settings.temp_id).val(temp_sum);
        },
        
        deleteObject:_settings.deleteObject
    };
    
    var _handler = function () {
        
        var temp_hidden_id = _settings.cloneId + "_clone_num";
        _settings.temp_id = temp_hidden_id;
        // 加入計數器
        if ($("#" + temp_hidden_id).length <= 0) {
            $("body").append('<input type="hidden" id="' + temp_hidden_id + '" value="' + _settings.temp + '" />');
        }
        
        $(this).bind(_settings.bind, _cloneMethods.cloneChildrenObject);
        
    }
    
    return this.each(_handler);
}
← outlook css padding 問題 resize img Plugin →
 
comments powered by Disqus