我的第一个JQuery插件

这是第一次自己动手写jquery插件,首先要感谢这篇博客的博主http://www.cnblogs.com/xcj26/p/3345556.html。

这个插件主要是接收一个树形数据,来生成<select>

/**
 * Created by wangdong(315033844) on 13-12-23.
 */
(function(){
    /**
     * 默认属性
     * */
    var defaults  = {
        myClass:‘input_select‘,
        defaultOption:‘请选择‘,
        nodeValue:‘value‘,
        nodeText:‘text‘,
        parent:‘parent_id‘,
        children:‘children‘,
        afterOnChange:null
    };

    /**
     * 选中的值
     * */
    var select_value = 0;

    /**
     * option标签构造器
     * */
    var option = function(value,text){
        return  $(‘<option value="‘+value+‘">‘).text(text);
    }

    /**
     * select标签change时间
     * */
    var onChange = function(obj,data,options){
        $(obj).nextAll().remove();
        select_value = $(obj).val();
        if(select_value != data[0][options.parent]){//检测是否选择了默认option
            for(var i=0;i<data.length;i++){
                if(data[i][options.nodeValue] == select_value){
                    var children = data[i][options.children];
                    if(children == "" || $.isEmptyObject(children)){
                        break;
                    }
                    var select = buildSelect(select_value,children,options);
                    $(obj).after(select);
                }
            }
        }
        if(options.afterOnChange){
            options.afterOnChange();
        }
    }
    /**
     * 构建select元素
     * */
    var buildSelect = function(slt_opt,data,options,obj){
        var parent_id = data[0][options.parent];
        obj = obj || $("<select>");
        $(obj).addClass(options.myClass).attr("parent_id",parent_id);
        $(obj).append(option(parent_id,options.defaultOption));
        for(var i=0;i<data.length;i++){
            $(obj).append(option(data[i][options.nodeValue],data[i][options.nodeText]));
        }
        $(obj).change(function(){
            onChange(obj,data,options);
        });
        return obj;
    }

    $.fn.sTree = function(data,options){

        var options = $.extend(defaults,options);

        return $(this).each(function(){
            buildSelect(0,data,options,this);
        });
    }

    $.fn.getSelectValue = function(){
        return select_value;
    }
})(jQuery);

 

我的第一个JQuery插件,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。