jquery实现弹出层

最新推荐文章于 2023-03-05 00:29:20 发布

原创最新推荐文章于 2023-03-05 00:29:20 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #jquery插件 #float #border #div

jQuery 专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一个基于jQuery的自定义下拉选择插件，该插件可以在文本框下方弹出一个包含多个选项的层，用户可以从中选择。文章提供了完整的实现代码，包括jQuery插件代码、HTML结构、CSS样式及JavaScript调用方式。

在项目中遇到一个问题，本来以为是使用dropdownlist的效果的，仔细一看，其实是在点击文本框以后，在其正下方弹出一个层，里边有多个选项进行选择。很像jQuery.datepicker 的效果。

经过分析，网上的参考，终于搞定了~~

jQuery插件代码：

jQuery.fn.selectItem = function(targetId) { var _seft = this; var targetId = $(targetId); this.toggle( function() { var A_top = $(this).offset().top + $(this).outerHeight(true); // 1 var A_left = $(this).offset().left; targetId.bgiframe(); targetId.show().css({ "position": "absolute", "top": A_top + "px", "left": A_left + "px" }); } , function() { targetId.hide(); } ); targetId.find("#selectItemClose").click(function() { targetId.hide(); }); targetId.find("#selectSub :checkbox").click(function() { targetId.find(":checkbox").attr("checked", false); $(this).attr("checked", true); _seft.val($(this).val()); targetId.hide(); }); $(document).click(function(event) { if (event.target.id != _seft.selector.substring(1)) { targetId.hide(); } }); targetId.click(function(e) { e.stopPropagation(); }); return this; }

HTML代码：

<input type="text" id="txtCompetencies" value="All" readonly="readonly"/> <div id="selectCompetencies"> <table> <tbody> <tr><td><input type="checkbox" />All</td></tr> <tr><td><input type="checkbox" />Confidence</td></tr> </tbody> </table> </div>

css样式：

/* pop div begin */ .selectItemcont{padding:8px;} .selectItemtit{line-height:20px;height:20px;margin:1px;padding-left:12px;} .bgc_ccc{background:#E88E22;} .selectItemleft{float:left;margin:0px;padding:0px;font-size:12px;font-weight:bold;color:#fff;} .selectItemright{float:right;cursor:pointer;color:#fff;} .selectItemcls{clear:both;font-size:0px;height:0px;overflow:hidden;} .selectItemhidden{display:none;} #selectCompetencies { display:none; background:#FFF; position:absolute; top:0px; left:center; border:1px solid #000; overflow-x:hidden; overflow-y:auto; width:250px; z-index:1000; max-height:200px; } /* pop div end */

JavaScript代码：

$("#txtCompetencies").selectItem("#selectCompetencies");

实现点击文本框，在其正下方弹出一个新的层，再次点击的时候，隐藏层。

后面的话，我会把这个插件继续完善的~~~ O(∩_∩)O...