選択タグのシミュレーション/美化方法はJS plug-in_jqueryを使用します

タグの外観は、ブラウザごとに一貫性がなく、CSS で変更することはできません。

ここでは私の美化方法を共有します。
利点: を引き続き使用し、外観を変更するだけで、フォームの動作は変更または干渉せず、後で JS を読み込みます。 (注: このスクリプトは jQuery に依存しています)

何も言うことはありません。すべてはコード内にあります。

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

$(document).ready(function () {
// 整形する必要がある タグを見つけます。それを決定するためにクラス名 "beautify" を使用します。
if (selects.length > 0);
//最初に

$("body").append("

");
// 1 つずつ美しくします
selects.each(function () {
// これにエイリアスを設定します (つまり、

)この関数の下では、次の匿名関数で使用されます。
var select = this;
// を作成します。このタイプの
//同時に、いくつかの属性とスタイルをこのダミー入力にコピーします
// 作成後、この を元の に挿入します。 ;
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);
// js の読み込みに失敗した場合でも、
this を使用する必要があるため、
を非表示にし、.beautify で display:none を定義しません。 .style.display = "none";
/ / をクリックしたとき
input.click(function () {
// 前に作成した コンテンツをクリアします
// この

を変更する必要がある場合は、
var div のスタイル シートを渡します。 = $("#dummydata")
.empty()
.attr("class", select.className);
//
の幅を設定します。特別なクラス名 "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);
$(select).change();
});
}
//ここでは特殊なクラス名「noscroll」を判定します。
//オプションが多すぎる場合、デフォルトでオプションリストにスクロールバーが表示されます。 .noscroll の変更がある場合、スクロール バーは強制的に表示されません
var noscroll = (select.options.length < ; 10 || $(select).hasClass("noscroll")); /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");
}
//ここで、特別なクラス名 "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);
}
});
}); 最後に、Web ページ上の空き領域をクリックするときは、

$(document).click(function (e) {
if (!$(e.target).is (".dummy") && !$(e.target).is(" #dummydata")) {
$("#dummydata").hide();
}
});
}
});


上記のコードでは、locateBeside とlocateBelow という 2 つのメソッドが使用されていることがわかります。これらは、私の 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() );
}
これを返します。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); 背景の位置: 右 12 ピクセル; 背景の繰り返し: カーソル: ポインター !重要; }

input.dummy:hover, input.dummy:focus { 背景画像: url(/static) /images/combo_hover.gif); }

#dummydata { 位置: 絶対値; 境界線: 1px 背景色: #393939; }
#dummydata { 表示: ブロック; カラー: #ddd; テキスト-インデント: 3px; テキスト-オーバーフロー: 省略記号; } -装飾: なし; }
#dummydata.matrix { width : 208px; } /* マトリックス効果 */
#dummydata.matrix a { float: left; } >#dummydata.matrix-large { width: 640px; パディング: 5px ; } /* 行列-large 効果 */
#dummydata.matrix-large a { float: left; }
# dummydata a.fullwidth { float: none; }
#dummydata a.delimiter { float: なし; 高さ: 10px; 可視性: hidden;


上記のスタイル定義の効果 Picture

HTML で行う必要があるのは、クラスの変更をいくつか追加することだけです