jQuery options pop

jquery-pop-options.js

$.extend({
  popOptions: function(params) {
        var defaults = {
            title: "标题",
            options: [{
                    name: "选项一",
                    onClick: function() {}
                },
                {
                    name: "选项二",
                    onClick: function() {}
                },
            ],
            active: 0,
            onCancle: function() {
                console.log('cancle')
            }
        }

        params = $.extend(defaults, params);

        optionsHtml = params.options.map(function(obj, index) {
            if (index == params.active) {
                return "<li class='option active'>" + obj.name + "<span class='right'></span></li>"
            } else {
                return "<li class='option'>" + obj.name + "</li>"
            }
        })
        optionsHtml = optionsHtml.join('');

        var tpl = [
            "<div class='m-pop-options'>",
            "<div class='mask'></div>",
            "<div class='content'>",
            "<div class='title'>" + params.title + "</div>",
            "<ul class='options'>" + optionsHtml + "<li class='cancle'>取消</li>",
            "</ul>",
            "</div>",
            "</div>"
        ].join('')

        var el = $(tpl).appendTo('body');
        $(el).find('.option').each(function(index) {
            $(this).click(function(e) {
                e.preventDefault();
                $(el).remove();
                (typeof params.options[index].onClick == 'function') && params.options[index].onClick(params.options[index].name)
            })
        })
        $(el).find('.cancle').click(function(e) {
            e.preventDefault();
            $(el).remove();
            (typeof params.onCancle == 'function') && params.onCancle();

        })

    }
})