Heim > Web-Frontend > js-Tutorial > select标记美化--JS式插件、后期加载_表单特效

select标记美化--JS式插件、后期加载_表单特效

WBOY
Freigeben: 2016-05-16 17:38:38
Original
970 Leute haben es durchsucht

在这将本人对,仅改变外观,不改变不干预Form行为,后期加载JS。(注:本脚本依赖jQuery)

啥也不说了,都在代码里。
效果图在底部。

复制代码 代码如下:

$(document).ready(function () {

    // 找出需要美化的则将被忽略
    var selects = $("select.beautify");
    if (selects.length > 0) {

        //先在代码底部增加一个

,用来承载和显示下拉框选项
        $("body").append("");

        //挨个美化呗
        selects.each(function () {

            //给本函数下的 this (也就是

            //创建一个 ,  .dummy 将用于我们对此类 进行专门样式定义
            //同时将 插入 dom, 紧跟原 ")
                .attr("disabled", this.disabled)
                .css("width", parseInt(this.style.width) + "px")
                .css("display", this.style.display)
                .insertAfter(this)
                .val(this.options[this.selectedIndex].text);

            //将

            // 当 被点击时
            input.click(function () {
                //调出前面创建的

,并清空内容
                //将 一致
                $(select).hasClass("extend")
                    ? div.css("width", "")
                    : div.css("width", $(this).innerWidth());

                //将

里面,一个

Verwandte Etiketten:
Quelle:php.cn
Vorheriger Artikel:jQuery弹出层始终垂直居中相对于屏幕或当前窗口_jquery Nächster Artikel:js关闭父窗口时关闭子窗口_javascript技巧
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage