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脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

<🎜>：种植花园 - 完整的突变指南

3 周前 By DDD

<🎜>：泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙

3 周前 By 尊渡假赌尊渡假赌尊渡假赌

如何修复KB5055612无法在Windows 10中安装？

3 周前 By DDD

北端：融合系统，解释

3 周前 By 尊渡假赌尊渡假赌尊渡假赌

蓝王子：如何到达地下室

1 个月前 By DDD

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

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

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程

1664

14

CakePHP 教程

1423

52

Laravel 教程

1318

25

PHP教程

1268

29

C# 教程

1248

24

显示更多

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时收到“加载插件时出错”的错误消息，您可以使用以下用途：以管理员身

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

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

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

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

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

详解如何安装和设置EclipseSVN插件 Jan 28, 2024 am 08:42 AM

EclipseSVN插件的安装和设置方法详解Eclipse是一个广泛使用的集成开发环境（IDE），它支持许多不同的插件来扩展其功能。其中之一是EclipseSVN插件，它使开发人员能够与Subversion版本控制系统进行交互。本文将详细介绍如何安装和设置EclipseSVN插件，并提供具体的代码示例。第一步：安装EclipseSVN插件打开Eclipse

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

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

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

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

See all articles