Select mark beautification--JS plug-in, post-loading_form effects

The appearance of the

tag is very annoying. Each browser is inconsistent. For IE alone, one version has a different appearance, and it cannot be modified with CSS.

Here I will share my method of beautifying

.
Advantages: Still using , only changes the appearance, does not change or interfere with the Form behavior, and loads JS later. (Note: This script relies on jQuery)

Nothing to say, it’s all in the code.
The rendering is at the bottom.

Copy code The code is as follows:

$(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 < select.options.length; 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 < 10 || $(select).hasClass("noscroll"));
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");
}

                                                                                                                                                                                                                                      The two functions locateBeside and locateBelow are methods in my js library. I will give them later
$(select).hasClass("onside")
? div.locateBeside(this, -2)
: div.locateBelow(this, -4);

// For things like repeatedly & lt; input & gt; do some intelligent adjustment

if (window.activedummyselect == select) {

div.slidetoggle (100);
} else {
div.hide().slideDown(100);
window.activeDummySelect = select;
}

// In the case of rolling strips, we need to roll the rolling bar to the position of the current selected item. )) {

div.scrollTop((select.selectedIndex - 3) * div[0].firstChild.offsetHeight);

}
});
});

//Finally don’t forget: when clicking on a free area on the web page, the

should be hidden $(document).click(function (e) {

if (!$(e .target).is(".dummy") && !$(e.target).is("#dummydata")) {

                                                                                                   > });
}
});



The above code says that two methods are used: locateBeside and locateBelow, which are extensions of jQuery in my js library. By the way, I will give you two more methods, locate and locateCenter
:-) The code is as follows:

Copy code

The code is as follows:

$.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 w2) {
            x = p.left - w2 - 5 - (adjustX || 0);
        }
        if ($(document).height() < y h2) {
            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: no-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; line-height: 25px; text-indent: 3px; text-overflow: ellipsis; }
#dummydata a:hover { color: #198cef; text-decoration: none; }
#dummydata.matrix { width: 208px; 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.delimiter { float: none; width: 100%; height: 10px; visibility: hidden; }
#dummydata a.selected { color: yellow; }

 

上面样式定义的效果图

 

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery popup layer is always vertically centered relative to the screen or current window_jqueryNext article：jQuery popup layer is always vertically centered relative to the screen or current window_jquery

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved