剛接觸Web，寫了個下拉式清單外掛程式，有BUG，請教大家指點

標籤：style   blog   http   color   os   使用   io   for   ar   

;(function ($) {    $.fn.DrowDowEditor = function (opts) {        opts = jQuery.extend({         panel:$(this),         data: null }, opts || {});        return this.each(function() {         var panelID = opts.panel[0].id;        //--------下拉容器--------------        var dropdownPanelHtml = ‘<div id="drop_down_editor_panel‘ + panelID + ‘" style="border:1px solid #3471b0;  min-width:100px;  position:absolute;"></div>‘;        $(dropdownPanelHtml).insertAfter(opts.panel);        var dropdownPanel = $("#drop_down_editor_panel" + panelID);        //------------------------------        //使用DIV相對定位包著textbox和下拉容器        var container = ‘<div style="position:reletive; background-color:red;" id="drop_down_editor_container‘ + panelID + ‘"></div>‘;        $(container).insertBefore(opts.panel);        var editorContainer = $("#drop_down_editor_container" + panelID);        opts.panel.appendTo(editorContainer);        dropdownPanel.appendTo(editorContainer);        opts.panel.css("float", "left");        //--------添加下拉按鈕-------------        var button = ‘<div style=" border: solid 1px #3471b0;border-left: none;padding: 4px;overflow: hidden; outline: none;width:12px; background-image:url(../../images/arr_right_blue.png); background-repeat:no-repeat; background-position:center;float:left; height:15px;"></div>‘;        $(button).insertAfter(opts.panel);        //---------------------------------        dropdownPanel.css("top", "30px");        dropdownPanel.css("left", "6px");        dropdownPanel.hide();        for (var i = 0; i < opts.data.length; i++) {            var dataItem = ‘<div class="drop_item">‘ + opts.data[i].key + ‘</div>‘;            dropdownPanel.append(dataItem);        }        dropdownPanel.find(".drop_item").click(function () {            alert(opts.panel[0].id);            opts.panel.val($(this).html());        });        $(".drop_item:odd").mouseenter(function () {            $(this).css("background-color", "#3471b0");        });        $(".drop_item:odd").mouseleave(function () {            $(this).css("background-color", "white");        });        $(".drop_item:odd").css("background-color", "white");       opts. panel.click(function (e) {            e.stopPropagation();                      dropdownPanel.width(opts.panel.width() + 15 + 14);            dropdownPanel.slideDown(300);        });        $(document).click(function () {            dropdownPanel.slideUp(300);        });          opts.panel.css("clear","both");        });    }})(jQuery);

<div><input type="text" id="dropdown1" class="dropdownEditor" /><div>123123</div><input type="text" id="dropdown" class="dropdownEditor" /></div>

$("#dropdown").DrowDowEditor({data: [{"key":"百度","value":"www.baidu.com"},{"key":"新浪","value":"www.sina.com.cn"},{"key":"測試","value":"test.com"},{"key":"部落格園","value":"cnblog.cn"}]});$("#dropdown1").DrowDowEditor({data: [{"key":"百度1","value":"www.baidu.com"},{"key":"新浪1","value":"www.sina.com.cn"},{"key":"test","value":"test.com"},{"key":"部落格園1","value":"cnblog.cn"}]});

 

效果：

 

 

如果只是渲染一個基本可以呈現出來，如果是多個，就產生覆蓋問題了，剛接觸web，知識淺薄，希望大家多加指點。

剛接觸Web，寫了個下拉式清單外掛程式，有BUG，請教大家指點