Question

我写了一个简单的jQuery插件，它将UL列表转换为HTML选择框。

HTML

<label for="reason">
<input name="reason" type="text" id="reason" /><a class="kd" href="javascript:;">select</a>
<div class="dataForReason">
    <ul>
        <li>Michael</li>
        <li>Joe</li>
        <li>Micah</li>
    </ul>
</div>
</label>

JS

   $('#reason').kreeDropdown();

jQuery功能：

(function ($) {
$.fn.kreeDropdown = function (options) {

//default vars for the plugin
    var defaults = {
        triggerClass: 'kd', // class name of link to trigger dropdown
        dataContainer: 'dataForReason'  //class of DIV containing <li> options
    };

    options = $.extend(defaults, options);

    //var ic = $('input#reason');
    var o  = options;
    var mi = '#'+$(this).attr('id');  // ID of destination input field
    var tc = 'a.'+o.triggerClass+''; // class name of link to trigger dropdown
    var dc = $('.'+o.dataContainer+''); //class of DIV containing <li> options
    var dl = $('.'+o.dataContainer+' li'); //li lists

//action starts here
    dc.hide();
    dc.addClass('kreeDropdownDC');

    $(this).next(tc).click(function() {
        dc.toggle();        
        dl.click(function() {
            //console.log($(this).prevUntil('input'));
            $(mi).val($(this).text());
            dc.hide();
        });                             

        return false;
    });
};
})(jQuery);

我怎样才能更熟练地编写这个插件？

Answer 1

像这样：http://harvesthq.github.com/chosen/

Answer 2

我写了一个简单的插件，正是这样做的。它非常简单和简约。 http://westoque.github.com/bigbadselect

jQuery自定义选择插件

2 个答案: