您现在的位置:首页 --> JavaScript --> 用 Jquery 模拟 select
用 Jquery 模拟 select
浏览:3514次 出处信息
查看demo
直接上代码:
(function($) { $.fn.combox = function(options) { var opts = $.extend({}, $.fn.combox.defaults, options); return this.each(function() { var self = $(this); $(this).attr("visibility",false); var j = self[0].selectedIndex; if(self.css("width") == "auto") var w = opts.sel_min_width; else if(parseInt(self.css("width")) != 0) var w = self.css("width"); else var w = opts.sel_min_width; var pid = opts.prefix_id+self.attr("name"); $('<div>'+self.children().eq(j).text()+'</div>').css({ "position":"absolute", "width":w, "height":self.css("height"), "top":self.offset().top, "left":self.offset().left, "background":"url(down.gif) no-repeat right -1px", "border":"1px solid #bbb", "fontSize":"12px", "lineHeight":self.css("height"), "textIndent":"5px" }).appendTo("body").show(); $("#"+pid).click(function(){ var cid = "child_"+self.attr("id"); if($("#"+cid).length > 0){ $("#"+cid).css({"border":"1px solid #bbb"}).show(); $("#"+cid).children().show(); }else{ var t = parseInt($("#"+pid).css("top")) + parseInt($("#"+pid).css("height")) + 1 + "px"; var w = parseInt($("#"+pid).css("width")) + "px"; $('<div></div>').css({ "position":"absolute", "width":self.css("width"), "top":t, "left":$("#"+pid).css("left"), "width":w, "background-color":opts.div_bg_color, "border":"1px solid #bbb", "z-Index":opts.over_div_index+1 }).appendTo("body"); $('<ul></ul>').css({ "listStyle":"none", "margin":0, "padding":0, "fontSize":opts.font_size }).mouseover(function(){ $(this).show(); $("#"+cid).css({"border":"1px solid #bbb"}); }).mouseout(function(){ $(this).hide(); $("#"+cid).css({"border":"0px","z-ndex":opts.over_div_index-1}); }).appendTo($("#"+cid)); self.children().each(function(i){ $("<li>"+$(this).text()+"</li>").css({ "height":"20px", "lineHeight":"20px", "textIndent":"5px" }).mouseover(function(){ $(this).css({"background-color":opts.over_bg_color,"color":"#fff"}); }).mouseout(function(){ $(this).css({"background-color":"#FFFFFF","color":"#000"}); }).click(function(){ $("#"+pid).html($(this).text()); self[0].selectedIndex = i; $("#"+cid).hide(); }).appendTo($("#ul_"+cid)); }); } }); $(this).css("display","none"); }); }; $.fn.combox.defaults = { prefix_id:"div_", sel_min_width:"150px", div_bg_color:"#fff", over_bg_color:"#999966", over_div_index:10, font_size:"12px" } })(jQuery);
调用方式:
建议继续学习:
- JQuery实现Excel表格呈现 (阅读:47657)
- 分享一个JQUERY颜色选择插件 (阅读:13628)
- jQuery插件---轻量级的弹出窗口wBox. (阅读:10300)
- 10个强大的Ajax jQuery文件上传程序 (阅读:8354)
- jQuery的data()方法 (阅读:8209)
- jQuery性能优化指南 (阅读:8237)
- jQuery Color Animations颜色动画插件 (阅读:7915)
- 精于图片处理的10款jQuery插件 (阅读:6898)
- jQuery中getJSON跨域原理详解 (阅读:6023)
- 配合jquery实现异步加载页面元素 (阅读:5932)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:JavaScript程序执行顺序问题总结
后一篇:都是转义惹的祸 >>
文章信息
- 作者:SpawN 来源: SpawN
- 标签: Jquery select 模拟
- 发布时间:2009-11-27 22:37:14
建议继续学习
近3天十大热文
-
[961] WordPress插件开发 -- 在插件使用 -
[109] 解决 nginx 反向代理网页首尾出现神秘字 -
[50] 如何保证一个程序在单台服务器上只有唯一实例( -
[47] Innodb分表太多或者表分区太多,会导致内 -
[46] 用 Jquery 模拟 select -
[46] 海量小文件存储 -
[46] ps 命令常见用法 -
[46] 整理了一份招PHP高级工程师的面试题 -
[45] 全站换域名时利用nginx和javascri -
[44] CloudSMS:免费匿名的云短信
