select标签模拟/美化方法采用JS外挂式插件_jquery 程序员文章站 2022-04-22 19:49:09 ... 标签的外观问题很恼人，各个浏览器都不一致，单单就IE，一个版本就一个长相，还不能用CSS修饰。 在这将本人对的美化方法共享出来。优点： 仍保留使用，仅改变外观，不改变不干预Form行为，后期加载JS。（注：本脚本依赖jQuery） 啥也不说了，都在代码里。 复制代码 代码如下: $(document).ready(function () { // 找出需要美化的标记，我们用一个class名称 "beautify" 来确定，没有这个样式的则将被忽略 var selects = $("select.beautify"); if (selects.length > 0) { //先在代码底部增加一个，用来承载和显示下拉框选项 $("body").append(""); //挨个美化呗 selects.each(function () { //给本函数下的 this (也就是 ) 设置一个别名，在下面的匿名函数中将会被用到 var select = this; //创建一个 ， .dummy 将用于我们对此类 进行专门样式定义 //同时将 的部分属性和样式复制给这个 dummy input //创建完后，将这个 插入 dom， 紧跟原 var input = $("") .attr("disabled", this.disabled) .css("width", parseInt(this.style.width) + "px") .css("display", this.style.display) .insertAfter(this) .val(this.options[this.selectedIndex].text); //将 藏掉，不要在 .beautify 中去定义 display:none， 因为js加载失败时，我们还得用上它 this.style.display = "none"; // 当 被点击时 input.click(function () { //调出前面创建的 ，并清空内容 //将 的样式表传递给它，当需要对这个 进行修饰时，就靠这些样式定义 var div = $("#dummydata") .empty() .attr("class", select.className); //设置 的宽度 //在这里我们判断一个特殊的class名 "extend" //如果带有 .extend，表示宽度将受额外自定义控制；否则，宽度将默认与 一致 $(select).hasClass("extend") ? div.css("width", "") : div.css("width", $(this).innerWidth()); //将 复制到 里面，一个 对应一个 标记 for (var i = 0; i var item = select.options[i]; var a = $("") .css("color", item.style.color) .addClass(item.className) .html(item.text) .appendTo(div); if (i == select.selectedIndex) { a.addClass("selected"); } //当选项被点击时， 内容显示为对应 ，关闭 层，同时将事件冒泡给原来的 a.click(function () { var n = $(this).index(); select.selectedIndex = n; input.val(select.options[n].text); div.hide(); $(select).change(); }); } //在这里我们判断一个特殊的class名 "noscroll" //当选项过多时，默认会让选项列表出现滚动条；但如果有 .noscroll 修饰，则强制不出现滚动条 var noscroll = (select.options.length if (/msie 6/i.test(window.navigator.userAgent)) { div.css("height", noscroll ? "auto" : "215px").css("overflow-y", noscroll ? "hidden" : "scroll"); } else { div.css("max-height", noscroll ? "10000px" : "215px"); } //在这里我们判断一个特殊的class名 "onside" //如果有 .onside 修饰，弹出的选项层将在侧面，否则是在下面 //注： 此处用到2个函数 locateBeside 和 locateBelow 是本人js库中的方法，稍等另外给出 $(select).hasClass("onside") ? div.locateBeside(this, -2) : div.locateBelow(this, -4); //对反复点击 之类的事情，做一些智能调节 if (window.activeDummySelect == select) { div.slideToggle(100); } else { div.hide().slideDown(100); window.activeDummySelect = select; } //在有滚动条的情况下，我们需要将滚动条滚动到当前选中项的位置 if (!select.selectedIndex > 6 && div[0].scrollHeight > div.height()) { div.scrollTop((select.selectedIndex - 3) * div[0].firstChild.offsetHeight); } }); }); //最后别忘了：点击网页上的游离区域时，应该隐藏 $(document).click(function (e) { if (!$(e.target).is(".dummy") && !$(e.target).is("#dummydata")) { $("#dummydata").hide(); } }); } }); 上面代码里说用到了2个方法： locateBeside 和 locateBelow， 是本人js库中对 jQuery 的扩展，顺便多赠送2个方法 locate 和 locateCenter :-) 代码如下： 复制代码 代码如下: $.fn.extend({ locate: function (x, y) { if (this.css("position") == "fixed") { y -= $(document).scrollTop(); } return this.css({ left: x, top: y }); }, locateBeside: function (el, adjustX) { var p = $(el).offset(), w1 = $(el).outerWidth(), w2 = this.outerWidth(), h2 = this.outerHeight(), x = p.left + w1 + 5 + (adjustX || 0), y = p.top; if ($(document).width() x = p.left - w2 - 5 - (adjustX || 0); } if ($(document).height() y = p.top - (y + h2 + 15 - $(document).height()); } return this.locate(x, y); }, locateBelow: function (el, adjustY) { var p = $(el).offset(); return this.locate(p.left, p.top + $(el).outerHeight() + 3 + (adjustY || 0)); }, locateCenter: function () { return this.locate( ($(window).width() - this.width()) / 2, ($(window).height() - this.height()) / 2 + $(document).scrollTop() ); } }); 最后给出一些样式表定义的例子，以及演示效果： 复制代码 代码如下: input.dummy { background-image: url(/static/images/combo.gif); background-position: right 12px; background-repeat: no-repeat; cursor: pointer !important; } input.dummy:hover, input.dummy:focus { background-image: url(/static/images/combo_hover.gif); } #dummydata { position: absolute; z-index: 20; border: 1px solid #a4601e; background-color: #393939; max-height: 200px; overflow: auto; } #dummydata a { display: block; color: #ddd; line-height: 25px; text-indent: 3px; text-overflow: ellipsis; } #dummydata a:hover { color: #198cef; text-decoration: none; } #dummydata.matrix { width: 208px; padding: 5px; } /* matrix 效果 */ #dummydata.matrix a { float: left; width: 33%; } #dummydata.matrix-large { width: 640px; padding: 5px; } /* matrix-large 效果 */ #dummydata.matrix-large a { float: left; width: 25%; } #dummydata a.fullwidth { float: none; } #dummydata a.delimiter { float: none; width: 100%; height: 10px; visibility: hidden; } #dummydata a.selected { color: yellow; } 上面样式定义的效果图 html中要做的，只是加几个class修饰 声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。 相关文章 相关视频 javascript怎么将值类型强制转为字符串 javascript中什么是位运算符 总结分享： 6 种JavaScript的打断点的方... javascript怎么判断字符串是否是数字 select标签模拟/美化方法采用JS外挂式插件_... SQL INSERT INTO SELECT AngularJS Select ionic select 简单select ThinkPHP-RBAC角色和权限数据模拟 网友评论 文明上网理性发言，请遵守 新闻评论服务协议我要评论 立即提交 专题推荐 独孤九贱-php全栈开发教程全栈 170W+ 主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门 玉女心经-web前端开发教程入门 80W+ 主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门 天龙八部-实战开发教程实战 120W+ 主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习 作者信息 认证0级讲师 发布技术文章 最新文章 热门排行 javascript中什么是位运算符 javascript怎么将值类型强制转为字符串 javascript怎么判断字符串是否是数字 JavaScript怎么求多个数的平均值 聊聊Angular中父子组件间怎么传递数据 总结分享： 6 种JavaScript的打断点的方式（收藏学习） Node项目中用images+imageinfo库给图片批量添加水印 javascript怎么去掉小数点后两位 JS 是什么意思 json格式是什么？json格式文件怎么打开？ RN布局的实例详解 sqrt函数怎么使用 js数组如何删除指定位置的元素？删除指定位置元素的2种方法 2021年前端vue面试题大汇总（附答案） echarts柱状图颜色设置：echarts柱状图如何设置不同颜色？（代码） 如何理解vue数据双向绑定原理 推荐视频教程 javascript初级视频教程 jquery 基础视频教程 视频教程分类 php视频教程 html视频教程 css视频教程 JS视频教程 jQuery视频教程 mysql视频教程 Linux视频教程 Python视频教程 相关标签： select 模拟 美化 插件 上一篇： 积木云加强CMS系统0.7.22版本 下一篇： 关于html中 标签的作用及使用介绍 推荐阅读 select标签模拟/美化方法采用JS外挂式插件_jquery select标签模拟/美化方法采用JS外挂式插件_jquery