suchen

Heim >Web-Frontend >js-Tutorial >Schreiben Sie Ihr eigenes jQuery-Eingabeaufforderungsfeld (Tipp) plug-in_jquery

Schreiben Sie Ihr eigenes jQuery-Eingabeaufforderungsfeld (Tipp) plug-in_jquery

WBOY
WBOYOriginal
2016-05-16 16:15:571583Durchsuche

Ich glaube, dass viele Studenten, wie ich, jQuery für ihre eigenen Zwecke verwenden. Der einzige Grund, warum man dafür verantwortlich ist, ist, dass jQuery im Grunde zu beliebt ist. Aber das ist doch keine langfristige Lösung. Die Alten sagten: „Es ist besser, jemandem das Fischen beizubringen, als jemandem das Fischen beizubringen.“

Zur Erleichterung für Schüler, die noch nie damit in Berührung gekommen sind, werfen wir zunächst einen Blick auf den Plug-in-Mechanismus von jQuery.

Code kopieren Der Code lautet wie folgt:

//Plug-Ins mit Häkchen hinzufügen und Häkchen entfernen
jQuery.fn.extend({
prüfen: function() {
Geben Sie this.each(function() { this.checked = true; });
zurück },
Deaktivieren Sie: function() {
Geben Sie this.each(function() { this.checked = false; });
zurück }
});
//Verwendung von Plug-in
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

Tatsächlich sind jQuery-Plugins sehr einfach. Ich dachte immer, dass das Schreiben von Plug-ins eine sehr komplizierte Angelegenheit sei Ich frage mich, ob es Studenten gibt, denen es genauso geht.

Lassen Sie uns eine Bedarfsanalyse durchführen, bevor wir Maßnahmen ergreifen (ps: Ich wurde für das Studium von Software-Engineering geboren und die Studiengebühren sind sehr betrügerisch. Wenn Sie die Bedarfsanalyse nicht durchführen, tut mir die Studiengebühr leid, haha ).

Tatsächlich gibt es nichts, was leicht zu analysieren ist. Machen Sie einfach den folgenden Effekt:

Wenn Sie die Maus darauf legen, wird WeChat angezeigt und gescannt. WeChat ist so beliebt, dass der Chef mich gebeten hat, eines auf die Website zu stellen, also habe ich ein Plug-In geschrieben, um ihn zufriedenzustellen Wer zahlt mir das Geld, um zu arbeiten, und verhandelt nicht mit mir? Das sind alles Menschen mit einer völlig ruinierten Lebenseinstellung und überhaupt keiner Integrität. Das ist zu weit. Schauen Sie sich die Renderings an.

Die Verwendungsmethode unterscheidet sich nicht von anderen jQuery:

Code kopieren Der Code lautet wie folgt:

$(function(){
var t = $(".weixin").Tip({
          title:'Scan on WeChat',
Inhalt:'',
         html:true,
Richtung:'unten'
        });
t.bind({
mouseover:function(){
              t.Tip("show");                         },
           mouseout:function() {
            t.Tip("hide");
}
});
});

Sehen Sie sich die konfigurierbaren Optionen an

Code kopieren Der Code lautet wie folgt:
defaultOptions :{
              title: '',//Title
              Inhalt: '',//Inhalt
             Richtung: 'unten', // Pop-up umgekehrt, relativ zum ausgewählten Element
                                                                                                                                                                                                             // ob Inhalte als HTML-Elemente zulässig sind
Vorlage: '

'//Popup-Box-Vorlage
}

Schauen Sie sich abschließend den hochauflösenden, unzensierten Quellcode an, wenn Sie nicht interessiert sind, drücken Sie einfach Strg C oder Strg V

Code kopieren Der Code lautet wie folgt:

!function($){
    var Tip = function(element, options){
        this.init(element, Optionen);
    }
    Tip.prototype = {
        Konstruktor: Tipp,
        init: Funktion(Element, Optionen){
            this.element = $(element);
            this.options = $.extend({},this.defaultOptions,options);
        },
        show: function() {
            if (!this.tip) {
                this.tip = this.getTip();
                var title = this.tip.find("h3"),
                    container = this.tip.find(".tip-container");
                //设置标题
                title.text(this.options.title);
                //设置内容
                if (this.options.html) {
                    container.html(this.options.content);
                } sonst {
                    container.text(this.options.content);
                }
                //添加tip到body
                $("body").append(this.tip);
                //计算tip的位置
                var eLeft = this.element.offset().left,
                    eTop = this.element.offset().top,
                    eWidth = this.element.innerWidth(),
                    eHeight = this.element.innerHeight(),
                    tipw = this.tip[0].offsetWidth,
                    tiph = this.tip[0].offsetHeight,
                    oben,
                    links;
                switch(this.options.direction) {
                Fall 'oben' :
                    top = eTop - tiph;
                    left = (eLeft - tipw/2) eWidth/2;
                    this.tip.css({top: top, left: left});
                    Pause;
                Fall 'links' :
                    top = (eTop - tiph/2) eHeight/2;
                    left = eLeft - tipw;
                    this.tip.css({top: top, left: left});
                    Pause;
                Fall 'unten' :
                    top = eTop eHeight;
                    left = (eLeft - tipw/2) eWidth/2;
                    this.tip.css({top: top, left: left});
                    Pause;
                Fall 'richtig' :
                    top = (eTop - tiph/2) eHeight/2;
                    left = eLeft eWidth;
                    this.tip.css({top: top, left: left});
                    Pause;
                Standard:
                    Pause;
                }
            } sonst {
                this.tip.css({display:'block'});
            }
        },
        verstecken: function() {
            this.getTip().css({display:"none"});
        },
        getTip: function() {
            this.tip zurückgeben? this.tip : $(this.options.template);
        },
        abtrennen: function() {
        },
        defaultOptions :{
            Titel: '',
            Inhalt: '',
            Richtung: 'unten',
            html: falsch,
            Vorlage: '

'
        }
    }
    $.fn.Tip = Funktion(Option) {
        gib this.each(function(){
zurück             var e = $(this),
                data = e.data('tip'),
                Optionen = Typ der Option == "Objekt" && Option;
            if (!data) e.data("tip", new Tip(this,options));
            if (typeof option == 'string') data[option]();
        });
    }
}(window.jQuery);

css样式

复制代码 代码如下:

.tip {
position : absolue ;
remplissage : 3 px ;
fond : #efefef;
rayon de bordure : 2 px ;
haut : 0px;
gauche : 0px;
>
.tip .tip-intérieur {
fond : #fafafb;
bordure : 1px solide #d8d8d8;
>
.tip .tip-intérieur h3 {
taille de police : 14 px ;
remplissage : 5 px ;
border-bottom : 1px solide #eee;
>
.tip .tip-inner .tip-container {
remplissage : 5 px ;
>

C'est tout le contenu de cet article. Avez-vous une nouvelle compréhension de la façon d'écrire des plug-ins jQuery ?

Stellungnahme：
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
Vorheriger Artikel：Helloworld von jQueryMobile und Seitenwechselmethoden_jqueryNächster Artikel：Helloworld von jQueryMobile und Seitenwechselmethoden_jquery

In Verbindung stehende Artikel

Mehr sehen