jquery_jquery に基づく Web ページの SELECT ドロップダウン ボックスの美化コード

1. 一部の選択美化コードが元の選択コントロールの onchange イベントをトリガーできない問題を解決しました。
2. 選択オプションが更新後に同期できない問題を解決するために、$("...").selectCss() への複数の呼び出しを許可します。

使用方法は次のとおりです。

コードをコピーします コードは次のとおりです

="" id= "select2">
オプション 31

オプション 32 > 33 を選択 メイン ファイル selectCss.css と selectCss.js を含む

selectCss.js ファイル コード: コードをコピー コードは次のとおりです:

(function($){
function HideOptions(speed){
if(speed.data){speed=speed.data}
if($(document).data(" nowselectoptions"))
{
$($(document).data("nowselectoptions")).slideUp(speed);
$($(document).data("nowselectoptions")).prev ("div").removeClass("tag_select_open");
$(document).data("nowselectoptions",null);
$(document).unbind("click",hideOptions); $(document).unbind("keyup",hideOptionsOnEscKey);
}
}
function hideOptionsOnEscKey(e){
var myEvent = e ||
var keyCode = myEvent.keyCode;
if(keyCode==27)hideOptions(e.data);
}
function showOptions(speed){
$(document).bind("click",speed, HideOptions);
$(document).bind("keyup",speed,hideOptionsOnEscKey);
$($(document).data("nowselectoptions")).slideDown(speed); $(document).data("nowselectoptions")).prev("div").addClass("tag_select_open");
}

$.fn.selectCss=function(_speed){
$(this).each(function(){
varspeed=_speed||"fast";
if($(this).data("cssobj")){
$($( this).data("cssobj")).remove();
}
$(this).hide();
var divselect = $("

gt;

").insertAfter(this).addClass("tag_select");
$(this).data("cssobj",divselect);
var divoptions = $("

").insertAfter(divselect).addClass("tag_options").hide();
divselect.click(function(e){
if($($(document).data("nowselectoptions")).get(0) != $(this).next("ul")。 get(0)){
hideOptions(speed);
}
if(!$(this).next("ul").is(":visible"))
{
e.stopPropagation();
$(document).data("nowselectoptions",$(this).next("ul"));
showOptions(speed); );
divselect.hover(function(){
$(this).addClass("tag_select_hover");
}
,
function(){
$(this).removeClass ("tag_select_hover")
});
$(this).change(function(){
$(this).nextAll("ul").children("li:eq(" $(this)[0].selectedIndex ")") .addClass("open_selected").siblings().removeClass("open_selected");
$(this).next("div").html($(this).children("option:eq(" $ (this)[0].selectedIndex ")").text());
$(this).children("option").each(function(i){
var lioption= $("

").html($(this). text()).attr("タイトル",$(this).attr("タイトル")).appendTo(divoptions);
if($(this).attr("選択済み")){
lioption.addClass("open_selected");
divselect.html($(this).text());
lioption.data("option",this); (function(){
lioption.data("オプション").selected=true;
$(lioption.data("オプション")).trigger("変更",true)
});
lioption.hover(
function(){$(this).addClass("open_hover");},
function(){ $(this).removeClass("open_hover"); }
);
});
});
}
})(jQuery);



selectCss.Css 文件代码:

复制代
代码如下:

.tag_select{display:block;color:#000;width:179px;height:23px;background:transparent url("images/index_22.jpg") no-repeat 0 0;padding: 0 10px;行の高さ:23px;色:#7D7D7D;フォントサイズ:12px;カーソル:ポインター} .tag_select_hover{ color:#ff0000;背景:透明 url("selectbg.jpg") 繰り返しなし 0 0; } .tag_select_open{ color:#0000ff;背景:透明 url("selectbg.jpg") 繰り返しなし 0 0;} ul.tag_options{位置:絶対;マージン:0;リスト スタイル:なし;背景:#fff;パディング:0 0 1px;マージン:0;幅:162px ;高さ:100ピクセル;オーバーフロー:非表示;オーバーフロー-y:自動;フォントサイズ:12px;マージン左:10px;カーソル:ポインタ; z-index:1000 } ul.tag_options li{background:#fff;表示:ブロック;幅:140ピクセル;パディング:0 10ピクセル;高さ:20ピクセル;テキスト装飾:なし;行の高さ:20ピクセル;色:#000;フォントの太さ:標準; font-size:12px}

ul.tag_options li.open_hover{背景:#0000ff;色:#000;フォントの太さ:標準; font-size:12px}

ul.tag_options li.open_selected{background:#ccc;フォントサイズ:12px;フォントの太さ:太字;


selectbg.jpg 画像: