select标签模拟/美化方法采用JS外挂式插件_jquery

标签的外观问题很恼人，各个浏览器都不一致，单单就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 < select.options.length; 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 < 10 || $(select).hasClass("noscroll"));
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 w2) {
x = p.left - w2 - 5 - (adjustX || 0);
}
if ($(document).height() < y h2) {
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

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

仓库：如何复兴队友

1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.能量晶体解释及其做什么（黄色晶体）

2 周前 By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island冒险：如何获得巨型种子

1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

击败分裂小说需要多长时间？

4 周前 By DDD

R.E.P.O.保存文件位置：在哪里以及如何保护它？

4 周前 By DDD

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7364

15

Java教程

1628

14

CakePHP 教程

1353

52

Laravel 教程

1265

25

PHP教程

1214

29

显示更多

Related knowledge

PyCharm新手指南：全面了解插件安装！ Feb 25, 2024 pm 11:57 PM

PyCharm是一款功能强大且受欢迎的Python集成开发环境（IDE），提供了丰富的功能和工具，使得开发者们可以更加高效地编写代码。而PyCharm的插件机制更是其功能扩展的利器，通过安装不同的插件，可以为PyCharm增加各种功能和定制化的特性。因此，对于PyCharm新手来说，了解并熟练安装插件是至关重要的。本文将为你详细介绍PyCharm插件安装的全

在Illustrator中加载插件时出错[修复] Feb 19, 2024 pm 12:00 PM

启动AdobeIllustrator时是否会弹出加载插件时出错的消息？一些Illustrator用户在打开该应用程序时遇到了此错误。消息后面紧跟着一系列有问题的插件。该错误提示表明已安装的插件存在问题，但也可能是由于VisualC++DLL文件损坏或首选项文件受损等其他原因引起。如果遇到此错误，我们将在本文中指导您修复问题，请继续阅读以下内容。在Illustrator中加载插件时出错如果您在尝试启动AdobeIllustrator时收到“加载插件时出错”的错误消息，您可以使用以下用途：以管理员身

Chrome的插件扩展程序安装目录是什么 Mar 08, 2024 am 08:55 AM

Chrome的插件扩展程序安装目录是什么？正常情况下，Chrome插件扩展程序的默认安装目录如下：1、windowsxp中chrome插件默认安装目录位置:C:\DocumentsandSettings\用户名\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2、windows7中chrome插件默认安装目录位置:C:\Users\用户名\AppData\Local\Google\Chrome\User

分享Edge浏览器不支持此插件的三种解决办法 Mar 13, 2024 pm 04:34 PM

　　用户使用Edge浏览器的过程中可能会添加一些插件来满足自己更多的使用需求。但是在添加插件时显示不支持此插件，这该如何解决？今日小编就来给大家分享三种解决办法，快来试试吧。　　方法一：尝试用其他的浏览器。　　方法二：浏览器上的FlashPlayer可能过时或者丢失，导致此插件不受支持状态，可在官网下载最新版本。　　方法三：同时按下“Ctrl+Shift+Delete”键。　　点击“清除数据”，重新打开浏览器即可。

PyCharm社区版支持的插件足够吗？ Feb 20, 2024 pm 04:42 PM

PyCharm社区版支持的插件足够吗？需要具体代码示例随着Python语言在软件开发领域的应用越来越广泛，PyCharm作为一款专业的Python集成开发环境（IDE），备受开发者青睐。PyCharm分为专业版和社区版两个版本，其中社区版是免费提供的，但其插件支持相对专业版有所限制。那么问题来了，PyCharm社区版支持的插件足够吗？本文将通过具体的代码示例

pycharm插件在哪 Dec 04, 2023 pm 03:39 PM

安装步骤：1、打开PyCharm，并点击顶部菜单栏中的“File”选项；2、选择“Settings”；3、在设置窗口中，选择“Plugins”选项；4、点击“Browse repositories…”按钮，将看到所有可用的插件；5、在搜索框中输入要安装的插件的名称，然后点击“搜索按钮”；6、找到要安装的插件，点击插件名称的右侧的“Install”按钮；7、安装完成重启即可。

PyCharm插件安装技巧分享，让你事半功倍！ Feb 21, 2024 pm 06:36 PM

PyCharm是一款功能强大的Python集成开发环境，通过安装插件可以进一步提高开发效率和方便开发者的工作。本文将分享一些PyCharm插件安装的技巧，让你事半功倍，同时提供具体的代码示例来演示插件的使用方法。第一步：打开PyCharm，点击菜单栏中的“File”（文件），然后选择“Settings”（设置）。第二步：在Settings窗口中，点击左侧的“

使用golang进行Select Channels Go并发式编程的异步处理方法 Sep 28, 2023 pm 05:27 PM

使用golang进行SelectChannelsGo并发式编程的异步处理方法引言：并发式编程是现代软件开发中的一个重要领域，它可以有效地提高应用程序的性能和响应能力。在Go语言中，使用Channels和Select语句可以简单而高效地实现并发编程。本文将介绍如何使用golang进行SelectChannelsGo并发式编程的异步处理方法，并提供具体的

See all articles