Select mark beautification--JS plug-in, post-loading

The appearance of the tag is very annoying. Each browser is inconsistent. For IE alone, one version has a different appearance, and it cannot be modified with CSS.

Here I will share my method of beautifying . Advantages: Still using , only changes the appearance, does not change or interfere with the Form behavior, and loads JS later. (Note: This script relies on jQuery)

Nothing to say, it’s all in the code. The rendering is at the bottom.

Copy code The code is as follows: $(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"); }

The two functions locateBeside and locateBelow are methods in my js library. I will give them later $(select).hasClass("onside") ? div.locateBeside(this, -2) : div.locateBelow(this, -4);

// For things like repeatedly & lt; input & gt; do some intelligent adjustment

if (window.activedummyselect == select) { div.slidetoggle (100); } else { div.hide().slideDown(100); window.activeDummySelect = select; }

// In the case of rolling strips, we need to roll the rolling bar to the position of the current selected item. )) {

div.scrollTop((select.selectedIndex - 3) * div[0].firstChild.offsetHeight); } }); });

//Finally don’t forget: when clicking on a free area on the web page, the should be hidden $(document).click(function (e) {

if (!$(e .target).is(".dummy") && !$(e.target).is("#dummydata")) { > }); } });

The above code says that two methods are used: locateBeside and locateBelow, which are extensions of jQuery in my js library. By the way, I will give you two more methods, locate and locateCenter :-) The code is as follows:

Copy code

The code is as follows: $.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修饰

Select mark beautification--JS plug-in, post-loading_form effects