マークの美化を選択 -- JS プラグイン、post-loading_form エフェクト

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

ここでは私の美化方法を共有します。
利点: を引き続き使用し、外観を変更するだけで、フォームの動作は変更または干渉せず、後で 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");
                }

2つの関数locateBesideとlocateBelow私のjsライブラリのメソッドです。後で与えます
$(select).hasClass("onside")
? div.locateBeside(this, -2)
: div.locateBelow(this, -4);

// 繰り返し & lt; input & gt; の場合は、インテリジェントな調整を行います

if (window.activedummyselect == select) {

div.slidetoggle (100)
; 🎜> div.hide().slideDown(100);
window.activeDummySelect = select;
}

// ローリング ストリップの場合、ローリング バーを現在選択されている項目の位置までローリングする必要があります。 )) {
div.scrollTop((select.selectedIndex - 3) * div[0] .firstChild.offsetHeight);

}

});
});

//最後に忘れないでください。Web ページ上の空き領域をクリックすると、

が非表示になるはずです $(document).click(function (e) {
if (!$(e .target).is(".dummy") && !$(e.target).is("#dummydata")) { > });

}
} );



上記のコードでは、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());
}
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);背景位置: 右 12 ピクセル;背景リピート: リピートなし;カーソル: ポインタ !重要; }
input.dummy:hover, input.dummy:focus {background-image: url(/static/images/combo_hover.gif); }
#dummydata {位置: 絶対; z インデックス: 20;ボーダー: 1px ソリッド #a4601e;背景色: #393939;最大高さ: 200ピクセル;オーバーフロー: 自動; }
#dummydata { 表示: ブロック;色: #ddd;行の高さ: 25px;テキストインデント: 3px;テキストオーバーフロー: 省略記号; }
#dummydata a:hover { color: #198cef;テキスト装飾: なし。 }
#dummydata.matrix {幅: 208px;パディング: 5px; } /* 行列效果 */
#dummydata.matrix a { float: left;幅: 33%; }
#dummydata.matrix-large {幅: 640px;パディング: 5px; } /* 行列-大 效果 */
#dummydata.matrix-large a { float: left; }幅: 25%; }
#dummydata a.fullwidth { float: none; }
#dummydata a.delimiter { float: none;幅: 100%;高さ: 10ピクセル;可視性: 非表示; }
#dummydata a.selected { color: yellow; }

上面样式定义的効果图

html中要，只是加几个class修饰