写了个下拉列表插件,有BUG,请教大家指点

前端UI分享

;(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,知识浅薄,希望大家多加指点。前端分享

时间: 2024-10-11 12:31:01

写了个下拉列表插件,有BUG,请教大家指点的相关文章

刚接触Web,写了个下拉列表插件,有BUG,请教大家指点

;(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="d

手写js面向对象选项卡插件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>无缝滚动</title>    <style type="text/css">        body,ul{margin: 0;padding: 0;}        li{list-style: none;}  

基于Twitter Bootstrap 3的jQuery下拉列表插件

metisMenu是一款基于Twitter Bootstrap 3的炫酷jQuery下拉列表插件.该下拉列表插件在原生bootstrup下拉列表的基础上进行了美化,使其支持多级下拉菜单.列表树和鼠标滑过展开等特效. 在线演示:http://www.htmleaf.com/Demo/201502281435.html 下载地址:http://www.htmleaf.com/jQuery/Menu-Navigation/201502281434.html

wg_pagenation 1.0 自己写的一个分页插件_基于Jquery

前言: 现在这个分页插件也不少,感觉缺点什么,所以自己就写了一个,喜欢的人就拿去用......有bug和建议可以回复,我有空就修改和答复..... 感谢我的基友,刘总...他主要给本插件写配套主题css; 特点: 整合ajax可以异步和后台交互数据,定制化选项多.和Jquery的pagenation比较类似,但是功能更多,选择性更多. 当前版本:1.0 完成日期:20150815 效果图: White.css的效果图: default.css效果图: 上图上向下的箭头表示的是每一个可选择和更改的

完整中英文世界国家级联下拉列表插件【前端版】

这个小东西是之前小项目上临时增加功能的产物,那时候在网上找了很久都没有能用的插件,要么是数据残缺少得可怜,还有就是实现手段非常低效不可维护那种,各种奇拔问题!反正就没有逞心如意!那时候又急需要这样一个功能,百般无奈后灵机一动,想起某企鹅功能选项不是有这样的世界国家级联功能嚒!那肯定有地方存着这数据的哇!嘿嘿!心里突然暗喜,终于有方向,然后就是向这企鹅开刀找!在某个i18n国际化文件夹中找到了!立马放下心头大石!   这样子中英文版本的数据都有了!但是问题又来了!该怎么开始做呢? 怎么去调用这个数

程序员奇谈之我写的程序不可能有bug篇

程序员在普通人的印象里是一份严(ku)谨(bi)的职业,也是一个被搞怪吐槽乐此不疲的职业,程序员们面对复杂的代码敲打电脑时连眉头都不会皱一下,但是有一个词却是他们痛苦的根源,它就是Bug. 有不少的新手程序员,刚开始都是从修BUG开始做起的. 修bug有助于熟悉项目,了解大概哪些类参与了执行线路,相互调用关系又是如何,结构设计上有什么特点. 以前猿姐就听过这样一个故事 有三个程序员需要穿过一片田地,到达对岸的房子. 初级程序员看了一眼笑着说道:不远,只需要十分钟就行. 资深级程序员想了一下说道:

自写原生jq滚轮插件

自己仿bootStarp插件写的,思路局限,仅供交流,有好的建议还请不吝赐教//使用方法:                //html:需要ul>li>a的模式,a需要类名,需要设置page-scroll属性,page-scroll属性需要1以数字结尾,容器为所变化的最大页面                //js:请传入一个事件对象,对象需要传入属性:pageAnchorName(锚点id)及contianer(容器类)                //下标jq对象传入$navIndex属

OSChina 周三乱弹 —— 不是你写的代码,修什么BUG

各位 OSCer 大家壕,今天是星期三!上班没商量的日子. @动弹办主任:编码一天下来,为什么这么累啊, @不是小白:日写代码三千行,不知不觉双眼盲!!! @开源中国首席骨科主任:应该明天就发布我个人的第三款开源作品 #PESCMS LOGIN# ,第三款作品要视我今天能否写完开发文档,否则就要延期了.最近一下子发布了两款开源作品,根本停不下来. 静候主任的作品!人民永远会记得你为开源作出的贡献! 当程序员难,在中国当程序员难上加难 @开源中国首席骨科主任:南京法官逻辑:不是你写的代码 修什么B

最近写的一个弹窗插件

最近因为项目需要,写了一个模拟弹窗的插件,代码不是很优雅,有时间改一下,欢迎拍砖 js代码: 1 /* 2 *selfWindow组建,主要是用于模拟移动网站的alert(),confirm()窗口点解某一按钮跳转到某一个页面的效果, 3 *因为给予移动web,所以没有兼容低版本ie 4 *调用方法:var win = new SelfWinsow({ 5 * types : "confirm",//这里可以选择的参数有,alert,confirm,confirm2,link 6 *