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 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");
}
//在這裡我們判斷一個特殊的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 = 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: nogif); background-position: right 12px; background-repeat: nogif -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; -height: 25px; text-indent: 3px; text-overflow: ellipsis; }
#dummydata a:hover { color: #198cef; text-decoration: none; }
#dummydata.matrix { width: 2088 ; 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.fullwidth { float: none; }
#dummydata a. delimiter { float: none; width: 100%; height: 10px; visibility: hidden; }
#dummydata a.selected { color: yellow; }

 

html中要做的，只是再加幾個class修飾