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

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

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

コードをコピーします コードは次のとおりです 無題ドキュメント $(document).ready(function(){ $( "select").selectCss(); オプション 1

="" 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 画像:

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

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