Come creare un plugin di descrizione comando jQuery di base
Pubblicato: 2016-10-22Se negli ultimi tempi hai avuto a che fare con lo sviluppo web, non hai quasi bisogno di un'introduzione ai plugin jQuery o jQuery. In effetti, i plugin jQuery sono diventati così popolari che quasi il 70% di Internet li utilizza in un modo o nell'altro.
Principiante o professionista, qualunque sia il tuo livello di esperienza nello sviluppo web, jQuery dovrebbe essere sicuramente nella tua lista di cose da imparare e padroneggiare. Con questo in mente, in questo tutorial, ti insegneremo come creare un plugin base di jQuery Tooltip.
Quindi, questo è ciò che creeremo:
Senza perdere altro tempo, sporchiamoci le mani con un po' di codice fantastico e padroneggiamo la creazione di un plugin jQuery.
La struttura dei file
- jqueryToolTip.css – Foglio di stile della descrizione comando.
- jqueryToolTip.js – Il file del plug-in jQuery effettivo.
Dobbiamo assicurarci che il nostro plug-in sia sufficientemente flessibile da poter servire una varietà di utenti e configurazioni di dispositivi senza problemi. Prima di andare oltre, daremo un'occhiata ad alcune regole o concetti che ci aiuteranno a raggiungere questo obiettivo.
Regole per la creazione di un plugin jQuery
- Mantieni le identità uniche : è molto importante avere
idunivoci e nomiclassin modo che al momento dello stile degli elementi del plug-in, non si stia sovrascrivendo gli stili di pagina correnti. - Lascia commenti di riga : lasciare commenti di riga è sempre una buona pratica. Questo è essenziale quando si ha a che fare con i plugin jQuery, perché utenti e programmatori potrebbero avere difficoltà a capire cosa significa ogni riga di codice scritta da qualcun altro, e cercare di decifrare il codice senza commenti può richiedere molto tempo.
- Minimizza il codice sorgente - Poiché il tuo plug-in non è l'unica cosa necessaria per creare un sito Web, è importante utilizzare il minor spazio e larghezza di banda possibile per l'utente finale.
Sebbene non ci siano regole rigide per questo, durante la codifica mi occupo personalmente della parte di progettazione prima di rendere funzionale il mio codice. Seguiremo lo stesso modello in questo tutorial: scriveremo l'HTML e il CSS richiesti prima di arrivare a scrivere il codice per l'attuale jQuery Tooltip Plugin .
Crea un file .html di esempio e aggiungi il codice seguente.
<div id="jqueryToolTip_wrapper">
<span class="jqueryToolTip_text">Il testo della descrizione comando va qui </span>
<span class="jqueryToolTip_arrow"></span>
</div><!-- end jqueryToolTip -->
Ora apri il file jqueryToolTip.css e incolla il CSS sottostante al suo interno.
#jqueryToolTip_wrapper{
sfondo: nessuno ripetizione scroll 0 0 rgba(0, 0, 0, 0.8);
raggio di confine: 4px 4px 4px 4px;
-webkit-raggio-bordo: 4px 4px 4px 4px;
-moz-raggio-bordo: 4px 4px 4px 4px;
colore: #FFFFFF;
dimensione del carattere: 12px;
font-weight: grassetto;
altezza della linea: normale;
imbottitura: 5px;
posizione: assoluta;
indice z: 999;
famiglia di caratteri: Arial, "MS Trebuchet", sans-serif;
}
#jqueryToolTip_wrapper .jqueryToolTip_arrow{
in alto: automatico;
blocco di visualizzazione;
larghezza:0;
altezza:0;
bordo: solido 5px;
bordo-colore:trasparente trasparente rgb(0,0,0) trasparente;
bordo-colore: trasparente trasparente rgba (0,0,0,0.8) trasparente;
posizione:assoluta;
in alto:-10px;
a sinistra: 10px
}
#jqueryToolTip_wrapper .jqueryToolTip_arrow.arrow_down{
border-color:rgb(0,0,0) trasparente trasparente trasparente;
border-color:rgba(0,0,0,0.8) trasparente trasparente trasparente;
in alto: automatico;
in basso:-10px;
}
Assicurati di includere il file .css all'interno del file .html di esempio, quindi apri il file .html utilizzando un browser. Se tutto va bene, sarai in grado di vedere un bel suggerimento con una freccia su abbastanza simile all'immagine data di seguito.
Descrizione comando con freccia giù
Per aggiungere una freccia giù allo stesso suggerimento, tutto ciò che devi fare è aggiungere la classe .arrow_down all'intervallo con la classe esistente .jqueryToolTip_arrow
Prima:
<span class="jqueryToolTip_arrow"></span>
Dopo:
<span class="jqueryToolTip_arrow arrow_down"></span>
Requisiti
Ora che abbiamo finito con la parte HTML e CSS, possiamo prenderci del tempo per comprendere i requisiti prima di immergerci effettivamente nella scrittura del codice per il plugin.
- Dobbiamo scoprire quale elemento scegliere come target (perché non possiamo mostrare il suggerimento su ogni singolo collegamento di ancoraggio).
- Abbiamo bisogno di afferrare l'asse X e Y sul collegamento di ancoraggio corrente in stato hover.
- Infine, dobbiamo riposizionare il nostro tooltip
divsul collegamento di ancoraggio corrente in stato hover.
Potrebbe sembrare complicato, ma i filtri jQuery e gli elementi di targeting CSS renderanno il nostro lavoro molto più semplice.
Nozioni di base sui plugin jQuery
Codice di avvolgimento:
(funzione($){
$.fn.jqueryToolTip = funzione(toolTipOptions){
}
}
})(jQuery);
Il codice sopra indicato è quello che devi usare ogni volta che inizi a creare un plugin da zero. Qui jqueryToolTip è il nome del plugin e può essere sostituito da qualsiasi cosa tu voglia. Cerca di mantenerlo unico poiché due plugin con lo stesso nome possono creare un enorme pasticcio.
Impostazioni predefinite:
var toolTipDefaults = {
posizione: "in basso"
},
A seconda del plug-in, potrebbe essere necessario disporre di alcune impostazioni predefinite. Ad esempio, nel nostro tutorial, la posizione è qualcosa di cui dobbiamo occuparci (ovvero, se vogliamo mostrare il suggerimento sopra l'elemento o sotto di esso).
Predefiniti sostitutivi:
toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);
È sempre buona norma consentire agli utenti finali di ignorare le impostazioni predefinite, se lo desiderano. Nel nostro caso, abbiamo impostato la descrizione comando in basso per impostazione predefinita. Ora, se l'utente finale desidera che sia in primo piano, il codice sopra sovrascriverà le impostazioni predefinite con le opzioni specificate dall'utente finale.
A parte ciò che abbiamo discusso sopra, tutto il resto è un semplice codice jQuery. Quindi, ora possiamo iniziare! Basta aprire il file jqueryToolTip.js e inserire il codice seguente al suo interno.
(funzione($){
$.fn.jqueryToolTip = funzione(toolTipOptions){
var toolTipDefaults = {
posizione: "in basso"
},
toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);
var toolTipTemplate = '<div id="jqueryToolTip_wrapper"><span class="jqueryToolTip_text"></span><span class="jqueryToolTip_arrow"></span></div><!-- end jqueryToolTip -->' ;
$('body').append(toolTipTemplate);
}
})(jQuery);
Abbiamo creato una variabile chiamata toolTipTemplate che conterrà il markup HTML per il nostro jQuery ToolTip Plugin . Successivamente, aggiungeremo il markup HTML al corpo di una pagina web.
$(questo).ogni(funzione(){
$(questo).hover(funzione(){
// ecco il codice per le azioni che si verificano dopo aver passato il mouse sopra il collegamento
});
});
$(this) è il riferimento all'elemento che avvierà il nostro plugin. Ogni volta che il cursore dell'utente finale passa sopra l'elemento richiesto, mostreremo il suggerimento e cambieremo il testo al suo interno con il titolo attr del collegamento.
$(questo).ogni(funzione(){
// in funzione al passaggio del mouse
$(questo).hover(funzione(){
var toolTipTitle = $(questo).attr("titolo"); // ottenere il titolo del collegamento corrente
var toTop = $(questo).offset().top; // recupero dell'asse Y del collegamento corrente
var toLeft = $(questo).offset().left; // recupero dell'asse X del collegamento corrente
var toolTipHeight = $('#jqueryToolTip_wrapper').css("altezza"); // ottenere l'altezza del suggerimento
var itemHeight = $(questo).css("altezza"); // ottenere l'altezza del collegamento
if(toolTipSettings.position == 'top')
{
$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').addClass('arrow_down');
var topFinal = parseInt(toTop) - parseInt(toolTipHeight) - 10;
}
altro
{
var topFinal = parseInt(toTop) + parseInt(itemHeight) + 10;
}
$('.jqueryToolTip_text').html(toolTipTitle); // modifica del testo della descrizione comando nel titolo del collegamento corrente
$('#jqueryToolTip_wrapper').css("display","block"); // impostazione della visualizzazione dei suggerimenti per il blocco
$('#jqueryToolTip_wrapper').css({ // impostazione della descrizione comando a sinistra e in alto alla posizione del collegamento corrente
in alto: in altoFinale,
sinistra: a sinistra
});
},funzione(){
$('#jqueryToolTip_wrapper').css("display","none"); // nascondere il suggerimento al passaggio del mouse
});
});
Nel codice sopra, ho commentato ogni singola riga per darti una migliore comprensione di ciò che il codice fornito sta cercando di fare.
Mettere tutto insieme
(funzione($){
$.fn.jqueryToolTip = funzione(toolTipOptions){
// impostazioni predefinite per il plugin
var toolTipDefaults = {
posizione: "in basso"
},
// estensione delle impostazioni predefinite
toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);
// Markup HTML per il plugin di descrizione comando
var toolTipTemplate = '<div id="jqueryToolTip_wrapper"><span class="jqueryToolTip_text"></span><span class="jqueryToolTip_arrow"></span></div><!-- end jqueryToolTip -->' ;
// aggiungendo il markup
$('body').append(toolTipTemplate);
$(questo).ogni(funzione(){
// in funzione al passaggio del mouse
$(questo).hover(funzione(){
var toolTipTitle = $(questo).attr("titolo"); // ottenere il titolo del collegamento corrente
var toTop = $(questo).offset().top; // recupero dell'asse Y del collegamento corrente
var toLeft = $(questo).offset().left; // recupero dell'asse X del collegamento corrente
var toolTipHeight = $('#jqueryToolTip_wrapper').css("altezza"); // ottenere l'altezza del suggerimento
var itemHeight = $(questo).css("altezza"); // ottenere l'altezza del collegamento
if(toolTipSettings.position == 'top')
{
$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').addClass('arrow_down');
var topFinal = parseInt(toTop) - parseInt(toolTipHeight) - 10;
}
altro
{
var topFinal = parseInt(toTop) + parseInt(itemHeight) + 10;
$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').removeClass('arrow_down');
}
$('.jqueryToolTip_text').html(toolTipTitle); // modifica del testo della descrizione comando nel titolo del collegamento corrente
$('#jqueryToolTip_wrapper').css("display","block"); // impostazione della visualizzazione dei suggerimenti per il blocco
$('#jqueryToolTip_wrapper').css({ // impostazione della descrizione comando a sinistra e in alto alla posizione del collegamento corrente
in alto: in altoFinale,
sinistra: a sinistra
});
},funzione(){
$('#jqueryToolTip_wrapper').css("display","none"); // nascondere il suggerimento al passaggio del mouse
});
});
}
})(jQuery);
Come chiamare il plugin
Chiamare il nostro plugin jqueryToolTip è semplice come qualsiasi altro plugin jQuery.
Includi file JS:
[tipo html=”testo/javascript” lingua=”<script”]
<p>Includi foglio di stile:</p>
<link rel="stylesheet" href="../Documents/Unzipped/jqueryToolTipPluginTutorial/jqueryToolTipPluginTutorial/jqueryToolTip.css" />
Crea un link di ancoraggio con l'attributo title:
<a href="#" title="ToolTip Demo">Demo ToolTip</a>
Chiamare il plug-in (Base):
<tipo di script="testo/javascript">
$(funzione(){
$('a').jqueryToolTip();
})
</script>
Chiamare il plug-in (opzioni di passaggio):
<tipo di script="testo/javascript">
$(funzione(){
$('a').jqueryToolTip({
posizione: "in alto"
});
})
</script>
Finito!