;(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
web标准常见问题(BUG),大家来了解吧
上个版本bug非常严重,重新上传一份 // aurl 文件夹路径 // divname div的id , (必传参数) // inputname 会为你生成input :text;设置input id 默认div id; // starnum 星星的个数;默认五个; // startnum ...
Jupiter是一个管理代码走查中bug的插件,类似mantis中对bug的管理。不同的是mantis管理的是黑盒测试中的bug,Jupiter管理的是白盒测试中的bug。Jupiter并不负责查找bug,只是管理bug。走查人员建立走查任务,发现bug...
最近看回以前改的flash版头像裁剪,譬如,浮士德头像裁剪,发现了一些...于是重新修改了一部分,然后打包源代码,接着做了一个小插件给大家方便使用。 请查看: http://blog.csdn.net/cdnight/article/details/51729407
Bug Bounty Hunting for Web Security Bug Bounty Hunting for Web Security Bug Bounty Hunting for Web Security Bug Bounty Hunting for Web Security
我写的一些bug,这些bug都是些小bug,大家不用再意
400个插件,下面的详细列表: mxp/ColdFusion中的Include mxp/80多个国家的一个下拉菜单,在某些时候的确挺方便的 mxp/检查当前文件的兼容性和可能包含的错误,并会给出详细的检测报告 mxp/在代码编辑框中选择一段...
Buglife 一个用于iOS App的Bug报告SDK和Web平台
教你如何写BUG票 Bug Report Techniques
不是很完善讲究着用吧,不想花资源点,上http://www.cnblogs.com/yahle/p/3554481.html 去下吧
纯 JavaScript 写的 Web 录像插件,可以用来实现网页在线游戏回放、反馈网站 bug、演示用途等,实用举例
web页面完美调用大华摄像头demo,可实现对摄像头视频采集、显示、操作,demo支持ie,完美运行无bug,非其他无法运行ocx插件可比。
大家想切换高亮样式可以改源码的theme变量,将插件仿discuz安装程序页面做成了向导式,减少了preview的次数,只有动态生成下拉菜单时和到第四步时才ajax请求生成预览代码,改变了表单验证的错误返回方式可以体现多个...
无需解压,直接在idea---->file---->settings---->plugins---->Install plugin from disk 选中压缩包,点击apply---->ok,重启idea即可。
下拉选菜单bootstrap风格,好用,屏蔽了切换时影响其他组件的bug
findbug插件,自动排查简单的代码bug
Buglife - 一个很棒的iOS应用bug报告SDK和Web平台
和平之翼代码生成器SMEU 1.6版,一键支持下拉列表和多对多 本版是和平之翼代码生成器SMEU 1.6版。SMEU技术栈支持JQuery Easy UI,Spring MVC4, spring4, MyBatis 3。 1.6版支持下拉列表,使用者只需要在域对象相应的...
phpweb图库不能上传图片的BUG补丁;解压缩后,直接上传替换photo/admin文件夹内的所有文件。备注:本BUG修复,只适用于2.05版本,,其他版本是否适用,尚未验证。上传替换文件前,请做好备份。