Posted in Javascript onOctober 30, 2009
经过分析,网上的参考,终于搞定了~~
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...
jquery 弹出层实现代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@