菜单

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

2019年8月3日 - jQuery

<select>标签的外观难题很可恶,各类浏览器都分裂,单单就IE,多少个本子就三个长相,还不能够用CSS修饰。

在这将本身对<select>的美化方法分享出来。
优点:
仍保存使用<select>,仅改换外观,不转移不干涉Form行为,早先时期加载JS。(注:本脚本注重jQuery)

啥也不说了,都在代码里。

复制代码 代码如下:

 
$(document).ready(function () {
// 寻找须要美化的<select>标志,大家用三个class名称 “beautify”
来显著,未有这一个样式的<select>则将被忽视
var selects = $(“select.beautify”);
if (selects.length > 0) {
//先在代码后面部分扩充三个<div>,用来承载和显示下拉框选项
$(“body”).append(“<div id=’dummydata’ style=’position:absolute;
display:none’></div>”);
//挨个美化呗
selects.each(function () {
//给本函数下的 this (也正是 <select>)
设置三个小名,在底下的佚名函数中校会被用到
var select = this;
//创立贰个 <input> , .dummy 将用以大家对此类 <input>
进行特别样式定义
//同一时候将 <select> 的一对属性和样式复制给那些 dummy input
//创设完后,将以此 <input> 插入 dom, 紧跟原 <select>
var input = $(“<input type=’text’ readonly=’readonly’ class=’input
dummy’ />”)
.attr(“disabled”, this.disabled)
.css(“width”, parseInt(this.style.width) + “px”)
.css(“display”, this.style.display)
.insertAfter(this)
.val(this.options[this.selectedIndex].text);
//将 <select> 藏掉,不要在 .beautify 中去定义 display:none,
因为js加载战败时,我们还得用上它
this.style.display = “none”;
// 当 <input class=’dummy’> 被点击时
input.click(function () {
//调出前面创造的 <div id=’dummydata’>,并清空内容
manbetx2.0手机版,//将 <select> 的样式表传递给它,当需求对那个 <div>
进行修饰时,就靠那一个样式定义
var div = $(“#dummydata”)
.empty()
.attr(“class”, select.className);
//设置 <div> 的宽度
//在那边大家看清叁个特出的class名 “extend”
//若是带有 .extend,表示宽度将受额外自定义调控;不然,宽度将暗许与
<input> 一致
$(select).hasClass(“extend”)
? div.css(“width”, “”)
: div.css(“width”, $(this).innerWidth());
//将 <option> 复制到 <div id=’dummydata’> 里面,五个<option> 对应二个 <a> 标识
for (var i = 0; i < select.options.length; i++) {
var item = select.options[i];
var a = $(“<a href=’javascript:void(0);’
class=’nowrap’></a>”)
.css(“color”, item.style.color)
.addClass(item.className)
.html(item.text)
.appendTo(div);
if (i == select.selectedIndex) {
a.addClass(“selected”);
}
//当选项被点击时,<input> 内容展现为相应 <option>,关闭
<div> 层,同一时间将事件冒泡给原本的 <select>
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);
//对频频点击 <input> 之类的事情,做一些智能调治
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);
}
});
});
//最终别忘了:点击网页上的游离区域时,应该遮掩<div #dummydata>
$(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; }

上面样式定义的意义图

manbetx2.0手机版 1 manbetx2.0手机版 2manbetx2.0手机版 3
html中要做的,只是加多少个class修饰

manbetx2.0手机版 4

您恐怕感兴趣的小说:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图