您现在的位置:首页 --> JavaScript --> 用 Jquery 模拟 select
用 Jquery 模拟 select
浏览:2737次 出处信息
查看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表格呈现 (阅读:46520)
- 分享一个JQUERY颜色选择插件 (阅读:12650)
- jQuery插件---轻量级的弹出窗口wBox. (阅读:9688)
- 10个强大的Ajax jQuery文件上传程序 (阅读:7757)
- jQuery的data()方法 (阅读:7585)
- jQuery性能优化指南 (阅读:7325)
- jQuery Color Animations颜色动画插件 (阅读:7088)
- 精于图片处理的10款jQuery插件 (阅读:6220)
- jQuery中getJSON跨域原理详解 (阅读:5620)
- 配合jquery实现异步加载页面元素 (阅读:5375)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:JavaScript程序执行顺序问题总结
后一篇:都是转义惹的祸 >>
文章信息
- 作者:SpawN 来源: SpawN
- 标签: Jquery select 模拟
- 发布时间:2009-11-27 22:37:14
建议继续学习
近3天十大热文
- [53] IOS安全–浅谈关于IOS加固的几种方法
- [52] 如何拿下简短的域名
- [51] android 开发入门
- [51] 图书馆的世界纪录
- [50] Oracle MTS模式下 进程地址与会话信
- [49] Go Reflect 性能
- [46] 【社会化设计】自我(self)部分――欢迎区
- [46] 读书笔记-壹百度:百度十年千倍的29条法则
- [36] 程序员技术练级攻略
- [29] 视觉调整-设计师 vs. 逻辑