select标记美化--JS式插件、后期加载_表单特效

来源：懂视网责编：小采时间：2020-11-27 21:08:07

select标记美化--JS式插件、后期加载_表单特效

select标记美化--JS式插件、后期加载_表单特效: 标签的外观问题很恼人，各个浏览器都不一致，单单就IE，一个版本就一个长相，还不能用CSS修饰。在这将本人对的美化方法共享出来。优点：仍保留使用，仅改变外观，不改变不干预Form行为，后期加载JS。（注：本脚本依赖jQuery）啥也不说了，都在代码里。

推荐度：

点击下载本文 文档为doc格式

导读select标记美化--JS式插件、后期加载_表单特效: 标签的外观问题很恼人，各个浏览器都不一致，单单就IE，一个版本就一个长相，还不能用CSS修饰。在这将本人对的美化方法共享出来。优点：仍保留使用，仅改变外观，不改变不干预Form行为，后期加载JS。（注：本脚本依赖jQuery）啥也不说了，都在代码里。

的美化方法共享出来。
优点：仍保留使用标记，我们用一个class名称 "beautify" 来确定，没有这个样式的) 设置一个别名，在下面的匿名函数中将会被用到
var select = this;

//创建一个， .dummy 将用于我们对此类进行专门样式定义
//同时将插入 dom，紧跟原 ")
.attr("disabled", this.disabled)
.css("width", parseInt(this.style.width) + "px")
.css("display", this.style.display)
.insertAfter(this)
.val(this.options[this.selectedIndex].text);

//将被点击时
input.click(function () {
//调出前面创建的，并清空内容
//将一致
$(select).hasClass("extend")
? div.css("width", "")
: div.css("width", $(this).innerWidth());

//将

//在有滚动条的情况下，我们需要将滚动条滚动到当前选中项的位置
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; }

上面样式定义的效果图