您现在的位置:首页 --> JavaScript --> 用 Jquery 模拟 select
用 Jquery 模拟 select
浏览:2788次 出处信息
查看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表格呈现 (阅读:46675)
- 分享一个JQUERY颜色选择插件 (阅读:12820)
- jQuery插件---轻量级的弹出窗口wBox. (阅读:9753)
- 10个强大的Ajax jQuery文件上传程序 (阅读:7816)
- jQuery的data()方法 (阅读:7696)
- jQuery性能优化指南 (阅读:7459)
- jQuery Color Animations颜色动画插件 (阅读:7226)
- 精于图片处理的10款jQuery插件 (阅读:6371)
- jQuery中getJSON跨域原理详解 (阅读:5694)
- 配合jquery实现异步加载页面元素 (阅读:5454)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:JavaScript程序执行顺序问题总结
后一篇:都是转义惹的祸 >>
文章信息
- 作者:SpawN 来源: SpawN
- 标签: Jquery select 模拟
- 发布时间:2009-11-27 22:37:14
建议继续学习
近3天十大热文
-
[77] memory prefetch浅析
-
[51] find命令的一点注意事项
-
[37] 基本排序算法的PHP实现
-
[33] 卡诺模型―设计品质与设计价值的思考
-
[32] Oracle bbed工具的编译
-
[26] 8大实用又重要Mac使用技巧
-
[26] 程序员技术练级攻略
-
[25] 两行 JavaScript 代码
-
[24] 读书笔记-壹百度:百度十年千倍的29条法则
-
[21] 小屏幕移动设备网页设计注意事项