MooTools - Guida rapida
MooTools è un framework JavaScript leggero e orientato agli oggetti. La forma completa di MooTools è I miei strumenti orientati agli oggetti. È rilasciato con la licenza MIT gratuita e open source. È una delle librerie JavaScript più popolari.
MooTools è una libreria JavaScript potente e leggera. Crea una facile interazione di JavaScript nello sviluppo web. Può anche fare molte cose come estensioni CSS. MooTools ha tutti i tipi di estensioni eleganti, che ti danno la possibilità di creare effetti animati.
Componenti di MooTools
MooTools include una serie di componenti. Le seguenti sono le diverse categorie di componenti:
Core - Una raccolta di funzioni di utilità richieste da tutti gli altri componenti.
More - Una raccolta ufficiale di componenti aggiuntivi che estendono il nucleo e forniscono funzionalità avanzate.
Class - La libreria di base per l'istanza di oggetti di classe.
Natives- Una raccolta di miglioramenti agli oggetti nativi di JavaScript. I nativi aggiungono funzionalità, compatibilità e nuovi metodi che semplificano la codifica.
Element - Contiene un gran numero di miglioramenti e standardizzazione di compatibilità per l'HTML Element Object.
FX - Un'API per effetti avanzata che aiuta ad animare gli elementi della pagina.
Request - Include l'interfaccia XHR, Cookie JSON e strumenti specifici per il recupero HTML che gli sviluppatori possono sfruttare.
Window - Fornisce un'interfaccia cross-browser per informazioni specifiche del client, come le dimensioni della finestra.
MooTools - Vantaggi
MooTools offre una serie di vantaggi rispetto a JavaScript nativo. Questi vantaggi includono quanto segue:
MooTools è un framework ampio e modulare che consente agli sviluppatori di creare la propria combinazione personalizzata di componenti.
MooTools segue il paradigma orientato agli oggetti e il principio DRY (Don't Repeat Yourself).
MooTools fornisce effetti componenti avanzati, con transizioni ottimizzate. Viene utilizzato principalmente per gli sviluppatori flash.
MooTools fornisce diversi miglioramenti al DOM. Questo aiuta gli sviluppatori ad aggiungere, modificare, selezionare ed eliminare elementi DOM. Inoltre, supporta anche l'archiviazione e il recupero dell'archiviazione degli elementi.
MooTools è una potente libreria JavaScript per progettare oggetti DOM utilizzando il paradigma orientato agli oggetti. Questo capitolo spiega come installare e utilizzare la libreria MooTools insieme a JavaScript.
Per installare la libreria MooTools, segui i passaggi indicati di seguito:
Passaggio 1: scarica la libreria MooTools Core e MooTools More
È possibile scaricare l'ultima versione delle librerie MooTools Core e MooTools More dal seguente collegamento MooTools-Core e MooTools-More . Quando fai clic sui link, verrai indirizzato alle seguenti schermate nel tuo browser:
E,
Fare clic sui pulsanti di download, otterrai l'ultima versione delle librerie MooTools. Per questo tutorial, stiamo usandoMooTools-Core-1.6.0.js e MooTools-More-1.6.0.js biblioteche.
Passaggio 2: carica le librerie MooTools Core e More nel server
Ora hai le librerie MooTools nel tuo file system. Dobbiamo copiare queste librerie nel server (lo spazio di lavoro) dove sono disponibili le pagine web dell'applicazione. Per questo tutorial, stiamo usandoC:\MooTools\workspace\ posizione della directory.
Pertanto, copia il file MooTools-Core-1.6.0.js e MooTools-More-1.6.0.js file nella posizione della directory specificata.
Passaggio 3: collega le librerie MooTools Core e More nel tag script
La libreria JavaScript è un file .jsfile. Se includi questa libreria nel codice JavaScript, includila con il tag script come segue. Dai un'occhiata al seguente frammento di codice.
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>MooTools è uno strumento che può essere utilizzato per progettare modelli orientati agli oggetti. Parliamo in questo capitolo di un semplice esempio della libreria MooTools.
Esempio
Qui progetteremo un modello chiamato Rectangle usando Class. Per questo, dobbiamo dichiarare le proprietà: Larghezza e Altezza.
Dai un'occhiata al codice seguente e salvalo in sample.html.
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javaScript">
var Rectangle = new Class({
//properties
width: 0,
height: 0,
//methods
initialize: function(widthVal, heightVal) {
this.width = widthVal;
this.height = heightVal;
},
details: function() {
document.write("Welcome to MooTools demo program");
document.write("Width: "+this.width+" Height: "+this.height);
},
});
var rec = new Rectangle(5,4);
rec.details();
</script>
</head>
<body>
</body>
</html>Riceverai il seguente output:
Produzione
I selettori vengono utilizzati per selezionare gli elementi HTML. Ogni volta che si desidera creare pagine Web interattive, è necessario selezionare alcuni dati o un'azione da quella pagina Web. I selettori ci aiutano a ricevere i dati tramite la richiesta HTML dagli elementi.
Selettore di base ($)
Il $è il selettore di base in MooTools. Usando questo, puoi selezionare l'elemento DOM in base al suo ID. Ad esempio, supponi di avere un elemento HTML (come div) denominatobody_id.
<div id = "body_id">
</div>Se vuoi selezionare questo div, usa la seguente sintassi:
Sintassi
//selects the element with the ID 'body_id'
$('body_id');getElement ()
getElement () è un metodo che estende il selettore di base ($). Ti consente di affinare la selezione utilizzando l'ID elemento. getElement () seleziona solo il singolo elemento e restituirà il primo se ci sono più opzioni. È inoltre possibile utilizzare il nome della classe per ottenere la prima occorrenza di un elemento. Ma non otterrà una serie di elementi.
Selettore multiplo ($$)
$$ viene utilizzato per selezionare più elementi e posizionare questi più elementi in un array. Da quell'array possiamo manipolare, recuperare e riordinare l'elenco in modi diversi. Dai un'occhiata alla seguente sintassi. Definisce come selezionare tutti gli elementi div da una raccolta di elementi HTML su una pagina web.
Sintassi
<div>
<div>a div</div>
<span id = "id_name">a span</span>
</div>Se desideri selezionare tutti i div, utilizza la seguente sintassi:
Sintassi
//all divs in the page
$$('div');Se desideri selezionare più div con lo stesso nome di ID, utilizza la seguente sintassi:
Sintassi
//selects the element with the id 'id_name' and all divs
$$('#id_name', 'div');getElements ()
Il metodo getElements () è simile al metodo getElement (). Questo metodo restituisce tutti gli elementi in base ai criteri. Puoi usare entrambielement name (a, div, input) per selezionare quelle raccolte o un particolare elemento class name per selezionare la raccolta di elementi della stessa classe.
Includere ed escludere i risultati con gli operatori
MooTools supporta diversi operatori utilizzati per perfezionare le selezioni. Puoi usare tutti questi operatori nel metodo getElements (). Ciascuno di questi operatori può essere utilizzato per selezionare un elemento di input in base al nome.
Dai un'occhiata alla seguente tabella. Definisce i diversi operatori supportati da MooTools.
| Operatore | Descrizione | Esempio |
|---|---|---|
| = (uguale a) | Seleziona l'elemento di input in base al nome. | $ ('body_wrap'). getElements ('input [name = phone_number]'); |
| ^ = (inizia con) | Seleziona l'elemento di input confrontando le sue lettere iniziali del nome. | $ ('body_wrap'). getElements ('input [nome ^ = telefono]'); |
| $ = (termina con) | Seleziona l'elemento di input confrontando le lettere finali del nome. | $ ('body_wrap'). getElements ('input [nome $ = numero]'); |
| ! = (non è uguale a) | Deseleziona l'elemento di input in base al nome. | $ ('body_wrap'). getElements ('input [nome! = indirizzo]'); |
| * = (Contiene) | Selezionare l'elemento di input che contiene un particolare modello di lettera. | $ ('body_wrap'). getElements ('input [nome * = telefono]'); |
Selettori basati sull'ordine degli elementi
I selettori MooTools seguono un ordine particolare nella selezione degli elementi. I selezionatori seguono principalmente due ordini; uno è pari e l'altro è dispari.
Note - Questo selettore parte da 0, quindi il primo elemento è pari.
Anche ordine
In questo ordine, il selettore seleziona gli elementi che vengono inseriti in un ordine uniforme. Utilizza la seguente sintassi per selezionare tutti i div pari nella tua pagina HTML.
Syntax
// selects all even divs
$$('div:even');Ordine strano
In questo ordine, il selettore seleziona l'elemento posizionato in un ordine dispari. Usa la seguente sintassi per selezionare tutti i div dispari nella tua pagina HTML.
Syntax
// selects all odd divs
$$('div:odd');Example
L'esempio seguente mostra come funziona un selettore. Supponiamo che ci sia una casella di testo e un elenco di tecnologie su una pagina web. Se scegli una tecnologia dall'elenco inserendo quel nome nella casella di testo, l'elenco mostra i risultati filtrati in base al tuo input. Ciò è possibile utilizzando il selettore MooTools. Usando il selettore, possiamo aggiungere un evento alla casella di testo. Il listener di eventi sceglierà i dati dalla casella di testo e li controllerà dall'elenco. Se è presente nell'elenco, l'elenco mostra i risultati filtrati. Dai un'occhiata al seguente codice.
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready',function(){
var input = $('filter');
// set the title attribute of every element
// to it's text in lowercase
$$('ul > li').each(function(item){ item.set('title', item.get('text').toLowerCase()); }); // the function we'll call when the user types var filterList = function(){ var value = input.value.toLowerCase(); $$('li').setStyle('display','none');
// check the title attribute if it contains whatever the user is typing
$$('ul > li[title*=' + value + ']').setStyle('display','');
};
// make it happen
input.addEvent('keyup', filterList);
});
</script>
</head>
<body>
<p><input id = "filter" type = "text" /></p>
<ul>
<li>C</li>
<li>Cpp</li>
<li>Java</li>
<li>JavaScript</li>
<li>Hadoop</li>
<li>Hive</li>
<li>CouchDB</li>
</ul>
</body>
</html>Riceverai il seguente output:
Output
MooTools è una libreria JavaScript leggera che aiuta a creare pagine web dinamiche. Durante la gestione dell'elemento DOM, dobbiamo selezionare tutti gli elementi DOM di una pagina web. Questa raccolta può essere gestita utilizzando gli array.
Questo capitolo spiega come utilizzare gli array per gestire gli elementi DOM.
metodo each ()
Questo è il metodo di base per gestire gli array. Itera tutti gli elementi attraverso un elenco. È possibile utilizzare questo metodo in base al requisito. Ad esempio, se desideri selezionare tutti gli elementi div di una pagina, segui lo script fornito di seguito. Dai un'occhiata alla seguente pagina html che contiene più div.
<div>One</div>
<div>Two</div>È possibile utilizzare il seguente script per selezionare each individual divda una raccolta di div nella pagina. Lo script selezionerà ogni div e trasmetterà un avviso. Dai un'occhiata al seguente script.
Script
$$('div').each(function() {
alert('a div');
});È possibile utilizzare la seguente sintassi per gestire l'esempio sopra indicato. Dai un'occhiata alla pagina HTML.
Script
<div id = "body_div">
<div>One</div>
<div>Two</div>
</div>Qui, i due div sono racchiusi con un altro div - body_div. Durante la progettazione di uno script, dobbiamo selezionare solo un div esterno. Successivamente, utilizzando il metodo getElements (), possiamo selezionare i due div interni. Dai un'occhiata al seguente script.
Script
$('body_wrap').getElements('div').each(function() {
alert('a div');
});È possibile utilizzare un metodo diverso per scrivere lo script precedente come segue. Qui, stiamo usando una variabile separata per selezionare il filebody_div.
Script
var myArray = $('body_div').getElements('div');
myArray.each(function() {
alert('a div');
});Seleziona elementi specifici da un array
Durante la manipolazione di un array di elementi, possiamo selezionare un elemento specifico da un array di elementi. Di seguito sono riportati alcuni metodi importanti utilizzati per manipolare gli elementi DOM:
getLast ()
Questo metodo restituisce l'ultimo elemento di un array. Impostiamo un array per comprendere questo metodo.
var myArray = $('body_div').getElements('div');Ora possiamo prendere l'ultimo elemento all'interno dell'array.
var lastElement = myArray.getLast();La variabile lastElement ora rappresenta l'ultimo elemento all'interno di myArray.
getRandom ()
Il metodo getRandom () funziona in modo simile al metodo getLast (), ma otterrà un elemento casuale dall'array.
Syntax
var randomElement = myArray.getRandom();La variabile randomElement ora rappresenta un elemento scelto a caso all'interno myArray.
Copia di un array
MooTools fornisce un modo per copiare un array utilizzando la funzione $ A (). La seguente è la sintassi per la funzione $ A ().
Sintassi
var <variable-name> = $A ( <array-variable>);Aggiungi un elemento a un array
Esistono due metodi diversi per aggiungere elementi a un array. Il primo metodo ti consente di aggiungere elementi uno per uno oppure puoi unire due array diversi in uno.
includere()
Il metodo include () viene utilizzato per aggiungere un elemento in un array di elementi DOM. Ad esempio, considera il seguente codice HTML che contiene due elementi div e un elemento span sotto un div singolo e racchiuso:body_div.
Syntax
<div id = "body_div">
<div>one</div>
<div>two</div>
<span id = "add_to_array">add to array</span>
</div>Nel codice precedente, se chiamiamo il metodo getElements ('div') sul file body_divelement, otteniamo uno e due div ma l'elemento span non è incluso nell'array. Se vuoi aggiungerlo all'array che chiamiinclude()metodo sulla variabile array. Dai un'occhiata al seguente script.
Script
//creating array variable by selecting div elements
var myArray = $('body_wrap').getElements('div'); //first add your element to a var var newToArray = $('add_to_array');
//then include the var in the array
myArray.include(newToArray);Ora, myArray contiene sia divs che elemento span.
combinare ()
Questo metodo viene utilizzato per combinare gli elementi di un array con gli elementi di un altro array. Questo si prende cura anche dei contenuti duplicati. Ad esempio, considera il seguente codice HTML che contiene due elementi div e due elementi span sotto un div singolo e racchiuso:body_div.
Syntax
<div id = "body_div">
<div>one</div>
<div>two</div>
<span class = "class_name">add to array</span>
<span class = "class_name">add to array, also</span>
<span class = "class_name">add to array, too</span>
</div>Nel codice precedente, chiama il metodo getElements ('div') sul file body_divelemento. Ottieni uno e due div. La chiamata al metodo $$ ('. Class_name') seleziona i due elementi span. Ora hai un array di elementi div e un altro array di elementi span. Se vuoi unire questi due array, puoi usare il metodo di combinazione (). Dai un'occhiata al seguente script.
Script
//create your array just like we did before
var myArray= $('body_wrap').getElements('div'); //then create an array from all elements with .class_name var newArrayToArray = $$('.class_name');
//then combine newArrayToArray with myArray
myArray.combine(newArrayToArray );Ora, myArray contiene tutti gli elementi della variabile newArrayToArray.
Example
Questo ti aiuterà a capire gli array in MooTools. Supponiamo di applicare il colore di sfondo all'array di elementi che contiene div e span. Dai un'occhiata al seguente codice. Qui, il secondo array di elementi non appartiene a nessun id o gruppo di classi ed è per questo che non riflette alcun colore di sfondo. Dai un'occhiata al seguente codice.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var myArray = $('body_wrap').getElements('.class_name'); var addSpan = $('addtoarray');
var addMany = $$('.addMany');
myArray.include(addSpan);
myArray.combine(addMany);
var myArrayFunction = function(item) {
item.setStyle('background-color', '#F7DC6F');
}
myArray.each(myArrayFunction);
});
</script>
</head>
<body>
<div id = "body_wrap">
<div class = "class_name">one</div>
<div>two</div>
<div class = "class_name">three</div>
<span id = "addtoarray">add to array</span>
<br /><span class = "addMany">one of many</span>
<br /><span class = "addMany">two of many</span>
</div>
</body>
</html>Riceverai il seguente output:
Output
Le funzioni in MooTools sono un concetto di JavaScript. Sappiamo già come utilizzare le funzioni in JavaScript. In generale, è meglio mantenere la funzione fuori dal corpo della pagina nel tag dello script. In MooTools, seguiamo lo stesso schema. Qui è possibile progettare la propria funzione in base alle esigenze. Ora dobbiamo chiamare tutte le funzioni definite dall'utente nel filedomready funzione.
Dai un'occhiata alla seguente sintassi per capire come usare la funzione generalizzata in MooTools.
Sintassi
<script type = "text/javascript">
/*
Function definitions go here
*/
window.addEvent('domready', function() {
/* Calls to functions go here */
});
</script>Struttura basilare
Ci sono alcuni modi di base per definire una funzione in MooTools. Non c'è differenza tra le sintassi delle funzioni di JavaScript e MooTools, ma la differenza sta nel chiamare una funzione. Prendiamo un piccolo esempio che definisce una funzione chiamata demo_function. Dai un'occhiata al seguente codice.
Esempio
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
//Define simple_function as a function
var simple_function = function(){
document.write('This is a simple function');
}
window.addEvent('domready', function() {
//Call simple_function when the dom(page) is ready
simple_function();
});
</script>
</head>
<body>
</body>
</html>Riceverai il seguente output:
Produzione
Funzione parametro singolo
È inoltre possibile creare una funzione che accetti un parametro. Per utilizzare i parametri con le funzioni, è necessario aggiungere un nome di variabile tra parentesi. Una volta fornita, la variabile è disponibile all'interno per l'uso. Prendiamo un esempio che definisce una funzione che accetta un singolo parametro e stampa un messaggio insieme al parametro.
Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var single_parameter_function = function(parameter){
document.write('The parameter is : ' + parameter);
}
window.addEvent('domready', function(){
single_parameter_function('DEMO PARAMETER');
});
</script>
</head>
<body>
</body>
</html>Riceverai il seguente output:
Produzione
Restituzione di un valore
Ogni volta che si desidera utilizzare il risultato di una funzione come input per un'altra variabile, è necessario utilizzare il valore restituito per quella funzione. È possibile utilizzare la parola chiave return per restituire un valore dalla funzione. Prendiamo un esempio che definisce una funzione che accetterà due valori di parametro e restituirà la somma di questi due parametri. Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var two_parameter_returning_function = function(first_number, second_number){
var third_number = first_number + second_number;
return third_number;
}
window.addEvent('domready', function(){
var return_value = two_parameter_returning_function(10, 5);
document.write("Return value is : " + return_value);
});
</script>
</head>
<body>
</body>
</html>Riceverai il seguente output:
Produzione
Come i selettori, anche la gestione degli eventi è un concetto essenziale di MooTools. Questo concetto viene utilizzato per creare eventi e azioni per eventi. Dobbiamo anche avere una comprensione delle azioni e dei loro effetti. Proviamo alcuni eventi in questo capitolo.
Singolo clic sinistro
L'evento più comune nello sviluppo web è il singolo clic sinistro. Ad esempio, Hyperlink riconosce un singolo evento di clic e ti porta a un altro elemento DOM. Il primo passaggio consiste nell'aggiungere un evento clic all'elemento DOM. Prendiamo un esempio che aggiunge un evento clic al pulsante. Quando fai clic su quel pulsante, verrà visualizzato un messaggio.
Esempio
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var clickFunction = function(){
//put whatever you want to happen in here
document.write('This button element recognizes the click event');
}
window.addEvent('domready', function() {
$('id_name').addEvent('click', clickFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "click here"/>
</body>
</html>Riceverai il seguente output:
Produzione
Quando fai clic sul pulsante, riceverai il seguente messaggio:
This button element recognizes the click eventMouse entra e mouse lascia
Mouse Enter e Mouse Leave sono gli eventi più comuni nella gestione degli eventi. L'azione viene applicata in base alla posizione del mouse. Se la posizione del mouse è INVIO nell'elemento DOM, verrà applicata un'azione. Se lascia l'area dell'elemento DOM, applicherà un'altra azione.
Facciamo un esempio che spieghi come funziona l'evento Enter del mouse. Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var mouseEnterFunction = function(){
//put whatever you want to happen in here
$('result').set('html', "Recognizes the mouse enter event"); } window.addEvent('domready', function() { $('id_name').addEvent('mouseenter', mouseEnterFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "Mouse Enter"/> <br/><br/>
<lable id = "result"></lable>
</body>
</html>Riceverai il seguente output:
Produzione
Se mantieni il puntatore del mouse sul pulsante, riceverai il seguente messaggio.
Recognizes the mouse enter eventFacciamo un esempio che spieghi come funziona l'evento Mouse Leave. Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var mouseLeaveFunction = function(){
//put whatever you want to happen in here
$('result').set('html', "Recognizes the mouse leave event"); } window.addEvent('domready', function() { $('id_name').addEvent('mouseleave', mouseLeaveFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "Mouse Leave"/><br/>
<lable id = "result"></lable>
</body>
</html>Riceverai il seguente output:
Produzione
Se mantieni il puntatore del mouse sul pulsante, riceverai il seguente messaggio.
Recognizes the mouse leave eventRimuovi un evento
Questo metodo viene utilizzato per rimuovere un evento. Rimuovere un evento è facile come aggiungere un evento e segue la stessa struttura. Dai un'occhiata alla seguente sintassi.
Sintassi
//works just like the previous examplesuse .removeEvent method
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);Sequenze di tasti come input
MooTools è in grado di riconoscere le tue azioni, il tipo di input che hai fornito tramite l'elemento DOM. Utilizzando ilkeydown funzione, puoi leggere ogni singola chiave dall'elemento DOM di tipo di input.
Facciamo un esempio in cui è presente un elemento dell'area di testo. Aggiungiamo ora un evento keydown all'area di testo che ogni volta che l'area di testo riconosce un keystore, risponderà immediatamente con un messaggio di avviso. Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var keydownEventFunction = function () {
alert('This textarea can now recognize keystroke value');
};
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keydownEventFunction);
});
</script>
</head>
<body>
Write Something: <textarea id = "myTextarea"> </textarea>
</body>
</html>Riceverai il seguente output:
Produzione
Prova a inserire qualcosa nell'area di testo. Troverai una casella di avviso insieme al seguente messaggio.
This textarea can now recognize keystroke valueProva ad aggiungere del testo allo stesso esempio che legge il valore dalla textarea quando l'hai inserito. È possibile utilizzandoevent.keyfunzione con l'evento. Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
//notice the parameter "event" within the function parenthesis
var keyStrokeEvent = function(event){
var x = event.key;
alert("The enter value is: "+x)
}
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keyStrokeEvent);
});
</script>
</head>
<body>
<lable>Write Something:</lable> <br/>
<textarea id = "myTextarea"> </textarea>
</body>
</html>Riceverai il seguente output:
Produzione
Prova a inserire del testo nell'area di testo. Verrai indirizzato a una casella di avviso insieme al valore immesso nell'area di testo.
Sappiamo già che ogni pagina HTML è progettata utilizzando elementi DOM. Usando MooTools puoi manipolare gli elementi DOM, il che significa che puoi creare, rimuovere e cambiare lo stile degli elementi DOM.
Metodi di base
I seguenti sono i metodi di base che acquisiscono e aiutano a modificare le proprietà degli elementi DOM.
ottenere()
Questo metodo viene utilizzato per recuperare le proprietà dell'elemento come src, value, name, ecc. La seguente istruzione è la sintassi del metodo get.
Syntax
//this will return the html tag (div, a, span...) of the element
$('id_name').get('tag');Riceverai il seguente elenco di proprietà durante il recupero dell'elemento utilizzando il metodo get ().
- id
- name
- value
- href
- src
- class (restituirà tutte le classi se l'elemento)
- testo (il contenuto testuale di un elemento)
impostato()
Questo metodo viene utilizzato per impostare un valore su una variabile. Ciò è utile se combinato con eventi e consente di modificare i valori. La seguente dichiarazione è la sintassi del metodo set.
Syntax
//this will set the href of #id_name to "http://www.google.com"
$('id_name').set('href', 'http://www.google.com');cancellare()
Questo metodo ti aiuta a cancellare il valore di una proprietà degli elementi. Devi scegliere quale proprietà vuoi cancellare dall'elemento. La seguente dichiarazione è la sintassi del metodo erase ().
Syntax
//this will erase the href value of #id_name
$('id_name').erase('href');Elementi in movimento
Spostare un elemento significa spostare un elemento esistente da una posizione a un'altra nella pagina. Puoi usare il metodo inject () per spostare un elemento all'interno della pagina. Prendiamo un esempio in cui una pagina HTML contiene tre elementi div che contengono rispettivamente il contenuto A, B e C in un ordine. Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var elementA = $('elemA'); var elementB = $('elemB');
var elementC = $('elemC');
})
</script>
</head>
<body>
<div id = "body_wrap">
<div id = "elemA">A</div>
<div id = "elemB">B</div>
<div id = "elemC">C</div>
</div>
</body>
</html>Riceverai il seguente output:
Produzione
Ora, usando il metodo inject () in MooTools, possiamo cambiare l'ordine da ABC ad ACB. Ciò significa che dobbiamo posizionare elementB dopo elementC e inserire elementC prima elementB. Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var elementA = $('elemA');
var elementB = $('elemB'); var elementC = $('elemC');
//translates to: inject element C before element B
elementC.inject(elementB, 'before');
//translates to: inject element B after element C
elementB.inject(elementC, 'after');
});
</script>
</head>
<body>
<div id = "body_wrap">
<div id = "elemA">A</div>
<div id = "elemB">B</div>
<div id = "elemC">C</div>
</div>
</body>
</html>Riceverai il seguente output:
Produzione
Crea nuovo elemento
MooTools fornisce un'opzione per creare qualsiasi tipo di elemento DOM e inserirlo nella pagina HTML. Tuttavia, dobbiamo mantenere una sintassi adeguata per ogni elemento. Facciamo un esempio in cui, il seguente frammento di codice è la sintassi per creare un elemento (ancoraggio).
Sintassi
var el = new Element('a', {
id: 'Awesome',
title: 'Really?',
text: 'I\'m awesome',
href: 'http://MooTools.net',
events: {
'click': function(e) {
e.preventDefault();
alert('Yes, really.');
}
},
styles: {
color: '#f00'
}
});Prendiamo un esempio che creerà un elemento di ancoraggio utilizzando la libreria MooTools. Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var el = new Element('a', {
id: 'Awesome',
title: 'Really?',
text: 'I\'m awesome',
href: 'http://www.tutorialspoint.com',
events: {
'click': function(e) {
e.preventDefault();
alert('Yes, really.');
}
},
styles: {
color: '#f00'
}
});
el.inject(document.body);
});
</script>
</head>
<body>
</body>
</html>Riceverai il seguente output:
Produzione
MooTools fornisce alcuni metodi speciali per impostare e ottenere i valori delle proprietà di stile per gli elementi DOM. Usiamo diverse proprietà di stile come larghezza, altezza, colore di sfondo, spessore del carattere, colore del carattere, bordo, ecc. Impostando e ottenendo valori diversi per queste proprietà di stile, possiamo presentare elementi HTML in stili diversi.
Imposta e ottieni proprietà di stile
La libreria MooTools contiene diversi metodi che vengono utilizzati per impostare o ottenere il valore di una particolare proprietà di stile o più proprietà di stile.
setStyle ()
Questo metodo consente di impostare il valore per una singola proprietà dell'elemento DOM. Questo metodo funzionerà sull'oggetto selettore di un particolare elemento DOM. Prendiamo un esempio che fornisce il colore di sfondo per l'elemento div. Dai un'occhiata al seguente codice.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
$('body_wrap').setStyle('background-color', '#6B8E23'); $$('.class_name').setStyle('background-color', '#FAEBD7');
});
</script>
</head>
<body>
<div id = "body_wrap">A</div>
<div class = "class_name">B</div>
<div class = "class_name">C</div>
<div class = "class_name">D</div>
<div class = "class_name">E</div>
</body>
</html>Riceverai il seguente output:
Output
getStyle ()
Il metodo getStyle () consiste nel recuperare il valore di una proprietà di stile di un elemento. Prendiamo un esempio che recupera il colore di sfondo di un div denominato body_wrap. Dai un'occhiata alla seguente sintassi.
Syntax
//first, set up your variable to hold the style value
var styleValue = $('body_wrap').getStyle('background-color');Più proprietà di stile
La libreria MooTools contiene diversi metodi utilizzati per impostare o ottenere il valore di una particolare proprietà di stile o più proprietà di stile.
setStyle ()
Se vuoi impostare più proprietà di stile su un singolo elemento o un array di elementi, devi usare il metodo setStyle (). Dai un'occhiata alla seguente sintassi del metodo setStyle ().
Syntax
$('<element-id>').setStyles({
//use different style properties such as width, height, background-color, etc.
});Example
<!DOCTYPE html>
<html>
<head>
<style>
#body_div {
width: 200px;
height: 200px;
background-color: #eeeeee;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var setWidth = function(){
$('body_div').setStyles({ 'width': 100 }); } var setHeight = function(){ $('body_div').setStyles({
'height': 100
});
}
var reset = function(){
$('body_div').setStyles({ 'width': 200, 'height': 200 }); } window.addEvent('domready', function() { $('set_width').addEvent('click', setWidth);
$('set_height').addEvent('click', setHeight); $('reset').addEvent('click', reset);
});
</script>
</head>
<body>
<div id = "body_div"> </div><br/>
<input type = "button" id = "set_width" value = "Set Width to 100 px"/>
<input type = "button" id = "set_height" value = "Set Height to 100 px"/>
<input type = "button" id = "reset" value = "Reset"/>
</body>
</html>Riceverai il seguente output:
Output
Prova questi pulsanti sulla pagina web, puoi vedere la differenza con la dimensione del div.
MooTools può filtrare l'input dell'utente e può riconoscere facilmente il tipo di input. I tipi di input di base sono Numero e Stringa.
Funzioni numeriche
Parliamo di alcuni metodi che controlleranno se un valore di input è un numero o meno. Questi metodi ti aiuteranno anche a manipolare l'immissione del numero.
toInt ()
Questo metodo converte qualsiasi valore di input nel numero intero. Puoi chiamarlo su una variabile e proverà a dare il numero intero regolare da qualunque cosa la variabile contenga.
Prendiamo un esempio che progetta una pagina web che contiene una casella di testo e un pulsante denominato TO INT. Il pulsante controllerà e restituirà il valore immesso nella casella di testo come numero intero reale. Se il valore non è un numero intero, restituirà ilNaNsimbolo. Dai un'occhiata al seguente codice.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var toIntDemo = function(){
var input = $('input').get('value'); var number = input.toInt(); alert ('Value is : ' + number); } window.addEvent('domready', function() { $('toint').addEvent('click', toIntDemo);
});
</script>
</head>
<body>
Enter some value: <input type = "text" id = "input" />
<input type = "button" id = "toint" value = "TO INT"/>
</body>
</html>Riceverai il seguente output:
Output
Prova diversi valori e convertili in numeri interi reali.
tipo di()
Questo metodo esamina il valore di una variabile che passi e restituisce il tipo di quel valore.
Facciamo un esempio in cui progettiamo una pagina web e controlliamo se il valore di input è Number, String o Boolean. Dai un'occhiata al seguente codice.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var checkType = function(){
var input = $('input').get('value'); var int_input = input.toInt(); if(typeOf(int_input) != 'number'){ if(input == 'false' || input == 'true'){ alert("Variable type is : Boolean"+" - and value is: "+input); } else{ alert("Variable type is : "+typeof(input)+" - and value is: "+input); } } else{ alert("Variable type is : "+typeof(int_input)+" - and value is:"+int_input); } } window.addEvent('domready', function() { $('checktype').addEvent('click', checkType);
});
</script>
</head>
<body>
Enter some value: <input type = "text" id = "input" />
<input type = "button" id = "checktype" value = "CHECK TYPE"/>
</body>
</html>Riceverai il seguente output:
Output
Prova i diversi valori e controlla il tipo.
limite()
Il metodo limit () viene utilizzato per impostare i valori del limite inferiore e del limite superiore per un numero particolare. Il numero non deve superare il valore limite superiore. Se supera, il numero viene modificato nel valore del limite superiore. Questo processo è lo stesso anche per il limite inferiore.
Prendiamo un esempio che fornisce una casella di testo per l'immissione di un valore, forniamo un pulsante per controllare il limite di quel valore. Il limite predefinito che abbiamo utilizzato nell'esempio è compreso tra 0 e 255. Dai un'occhiata al codice seguente.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var checkLimit = function(){
var input = $('input').get('value'); var number = input.toInt(); var limited_number = number.limit(0, 255); alert("Number is : " + limited_number); } window.addEvent('domready', function() { $('check_limit').addEvent('click', checkLimit);
});
</script>
</head>
<body>
Enter some value: <input type = "text" id = "input" />
<input type = "button" id = "check_limit" value = "Check Limit (0 to 255)"/>
</body>
</html>Riceverai il seguente output:
Output
Prova numeri diversi per controllare il limite.
rgbToHex ()
Il metodo rgbToHex () consiste nel convertire dai valori rosso, verde e blu al valore esadecimale. Questa funzione si occupa dei numeri e appartiene alla collezione Array. Facciamo un esempio in cui progetteremo una pagina web per inserire i singoli valori per Rosso, Verde e Blu. Fornisci un pulsante per convertire tutti e tre i valori in valori esadecimali. Dai un'occhiata al seguente codice.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var rgbToHexa_Demo = function(){
var red = $('red').get('value'); var red_value = red.toInt(); var green = $('green').get('value');
var green_value = green.toInt();
var blue = $('blue').get('value'); var blue_value = blue.toInt(); var color = [red_value, green_value, blue_value].rgbToHex(); alert(" Hexa color is : " + color); } window.addEvent('domready', function() { $('rgbtohex').addEvent('click', rgbToHexa_Demo);
});
</script>
</head>
<body>
Red Value: <input type = "text" id = "red" /><br/><br/>
Green Value: <input type = "text" id = "green" /><br/><br/>
Blue Value: <input type = "text" id = "blue" /><br/><br/>
<input type = "button" id = "rgbtohex" value = "RGB To HEX"/>
</body>
</html>Riceverai il seguente output:
Output
Prova diversi valori di rosso, verde e blu e trova i valori esadecimali.
Funzioni stringa
Parliamo di alcuni metodi della classe String che possono manipolare il valore String di input. Prima di procedere, diamo un'occhiata alla seguente sintassi di come chiamare una funzione stringa.
Corda
var my_variable = "Heres some text";
var result_of_function = my_variable.someStringFunction();O,
var result_of_function = "Heres some text".someStringFunction();trim ()
Questo metodo viene utilizzato per rimuovere gli spazi bianchi della posizione anteriore e la posizione finale di una determinata stringa. Non tocca gli spazi bianchi all'interno della stringa. Dai un'occhiata al seguente codice.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var input_str = " This is tutorialspoint.com ";
document.writeln("<pre>Before trim String is : |-"+input_str+"-|</pre>");
var trim_string = input_str.trim();
document.writeln("<pre>After trim String is : |-"+trim_string+"-|</pre>");
});
</script>
</head>
<body>
</body>
</html>Riceverai il seguente output:
Output
Nelle caselle di avviso sopra, puoi trovare le differenze in String prima di chiamare il metodo trim () e dopo aver chiamato il metodo trim ().
pulito()
Questo metodo viene utilizzato per rimuovere tutti gli spazi bianchi dalla stringa data e mantenere uno spazio singolo tra le parole. Dai un'occhiata al seguente codice.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var input_str = " This is tutorialspoint.com ";
document.writeln("<pre>Before clean String is : |-"+input_str+"-|</pre>");
var trim_string = input_str.clean();
document.writeln("<pre>After clean String is : |-"+trim_string+"-|</pre>");
});
</script>
</head>
<body>
</body>
</html>Riceverai il seguente output:
Output
contiene ()
Questo metodo viene utilizzato per cercare una sottostringa in una determinata stringa. Se la stringa data contiene la stringa di ricerca, restituisce true altrimenti restituisce false. Dai un'occhiata al seguente codice.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var containsString = function(){
var input_string = "Hai this is tutorialspoint";
var search_string = $('input').get('value'); var string_contains = input_string.contains(search_string); alert("contains : " + string_contains); } window.addEvent('domready', function() { $('contains').addEvent('click', containsString);
});
</script>
</head>
<body>
Given String : <p>Hai this is tutorialspoint</p>
Enter search string: <input type = "text" id = "input" />
<input type = "button" id = "contains" value = "Search String"/>
</body>
</html>Riceverai il seguente output:
Output
sostituto()
Questo metodo viene utilizzato per inserire la stringa di input nella stringa principale. Dai un'occhiata al seguente codice.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var containsString = function(){
var input_string = "One is {one}, Two is {two}, Three is {three}";
var one_str = $('one').get('value'); var two_str = $('two').get('value');
var three_str = $('three').get('value'); var substitution_string = { one : one_str, two : two_str, three : three_str } var new_string = input_string.substitute(substitution_string); document.write("NEW STRING IS : " + new_string); } window.addEvent('domready', function() { $('contains').addEvent('click', containsString);
});
</script>
</head>
<body>
Given String : <p>One is {one}, Two {two}, Three is {three}</p>
one String : <input type = "text" id = "one" /><br/><br/>
two String : <input type = "text" id = "two" /><br/><br/>
three String : <input type = "text" id = "three" /><br/><br/>
<input type = "button" id = "contains" value = "Substitute String"/>
</body>
</html>Riceverai il seguente output:
Output
Inserisci il testo nelle tre caselle di testo e fai clic sul pulsante della stringa di sostituzione, quindi vedrai la stringa di sostituzione.
MooTools fornisce una straordinaria funzionalità che ti aiuta ad aggiungere funzionalità di trascinamento della selezione agli elementi della tua pagina web. Possiamo farlo creando il nostro nuovoDrag.Moveoggetto. Usando questo oggetto, puoi definire le tue opzioni ed eventi. Le classi Drag and Drag.Move provengono dalla libreria MooTools More.
Parliamo delle opzioni e degli eventi dell'oggetto Drag.Move.
Drag.Move
Drag.Move è un oggetto utilizzato per aggiungere la funzionalità Drag and Drop agli elementi html. Drag.Move estende il Drag, quindi possiamo usare tutte le Opzioni e gli eventi della classe Drag tramite l'oggetto Drag.Move. Dai un'occhiata alla seguente sintassi e comprendi come utilizzare l'oggetto Drag.Move.
Sintassi
var myDrag = new Drag.Move(dragElement, {
// Drag.Move Options
droppables: dropElement,
container: dragContainer,
// Drag Options
handle: dragHandle,
// Drag.Move Events
// the Drag.Move events pass the dragged element,
// and the dropped into droppable element
onDrop: function(el, dr) {
//will alert the id of the dropped into droppable element
alert(dr.get('id'));
},
// Drag Events
// Drag events pass the dragged element
onComplete: function(el) {
alert(el.get('id'));
}
});Opzioni di trascinamento
Drag.Move fornisce le seguenti opzioni per mantenere gli elementi html con le funzionalità di trascinamento della selezione:
droppable - Questo ti aiuta a impostare il selettore degli elementi trascinabili (gli elementi che si registrano sugli eventi relativi al rilascio).
container - Questo ti aiuta a impostare il contenitore dell'elemento di trascinamento (mantiene l'elemento all'interno).
snap- Questo ti aiuta a impostare quanti px l'utente deve trascinare il cursore prima che l'elemento trascinabile inizi a trascinare. Il valore predefinito è 6 e puoi impostarlo su un numero qualsiasi di variabili che rappresentano un numero.
handle- Questo ti aiuta ad aggiungere una maniglia al tuo elemento trascinabile. La maniglia diventa l'unico elemento che accetterà la presa.
Dai un'occhiata alla seguente sintassi per sapere come e dove definire gli elementi droppable e container, snap e handle.
Sintassi
//here we define a single element by id
var dragElement = $('drag_element'); //here we define an array of elements by class var dropElements = $$('.drag_element');
var dragContainer = $('drag_container'); var dragHandle = $('drag_handle');
//now we set up our Drag.Move object
var myDrag = new Drag.Move(dragElement , {
// Drag.Move Options
// set up our droppables element with the droppables var we defined above
droppables: dropElements ,
// set up our container element with the container element var
container: dragContainer
// set up pixels the user must drag.
Snap: 10
// Adds a handle to your draggable element
handle: dragHandle
});Drag.Move eventi
Gli eventi Drag.Move forniscono diverse funzioni che possono essere utilizzate in diversi livelli dell'azione. Ad esempio, quando inizi a trascinare o rilasciare un oggetto, ogni evento Drag.Move passerà l'elemento trascinato o l'elemento rilasciato come parametri.
Di seguito sono riportati gli eventi supportati:
onStart ()
Ciò genera un evento all'inizio del trascinamento. Se imposti uno snap lungo, questo evento non si verifica finché il mouse non si trova a una certa distanza. Dai un'occhiata alla seguente sintassi.
Syntax
var myDrag = new Drag.Move(dragElement , {
// Drag options will pass the dragged element as a parameter
onStart: function(el) {
// put whatever you want to happen on start in here
}
});onDrag ()
Ciò solleva un evento continuamente mentre stai trascinando un elemento. Dai un'occhiata alla seguente sintassi.
Syntax
var myDrag = new Drag.Move(dragElement , {
// Drag options will pass the dragged element as a parameter
onDrag: function(el) {
// put whatever you want to happen on drag in here
}
});onDrop ()
Ciò genera un evento quando si rilascia l'elemento trascinabile in un elemento trascinabile. Dai un'occhiata alla seguente sintassi.
Syntax
var myDrag = new Drag.Move(dragElement , {
// It will pass the draggable element ('el' in this case)
// and the droppable element the draggable is interacting with ('dr' here)
onDrop: function(el, dr) {
// put whatever you want to happen on drop in here
}
});in ferie()
Questo genera un evento quando un elemento trascinabile lascia i limiti di un elemento trascinabile. Dai un'occhiata alla seguente sintassi.
Syntax
var myDrag = new Drag.Move(dragElement , {
// It will pass the draggable element ('el' in this case)
// and the droppable element the draggable is interacting with ('dr' here)
onLeave: function(el, dr) {
// put whatever you want to happen on Leave from droppable area in here
}
});onEnter ()
Ciò si verifica quando un elemento trascinabile entra in un'area di elementi trascinabili. Dai un'occhiata alla seguente sintassi.
Syntax
var myDrag = new Drag.Move(dragElement , {
// It will pass the draggable element ('el' in this case)
// and the droppable element the draggable is interacting with ('dr' here)
onEnter: function(el, dr) {
// this will fire when a draggable enters a droppable element
}
});onComplete ()
Ciò solleva un evento. onComplete si riferisce a quando lasci cadere un droppabile e aumenterà se atterri o meno in un droppable. Dai un'occhiata alla seguente sintassi.
Syntax
var myDrag = new Drag.Move(dragElement , {
// Drag Options
// Drag options will pass the dragged element as a parameter
onComplete: function(el) {
// put whatever you want to happen on complete
}
});Facciamo un esempio che esplorerà tutte le funzionalità spiegate in questo capitolo. Le funzionalità sono: Drag, Drag.Move, onEnter, onLeave, onDrop, onStart, onDrag e onComplete. In questo esempio, forniamo un HANDLE, utilizzandolo per trascinare l'oggetto trascinabile ovunque nel contenitore. Per ogni azione, c'è una notifica sul lato sinistro (indicato in colore blu). C'è un'area Droppable nel contenitore. Se l'oggetto trascinabile entra nell'area trascinabile, vengono attivati gli ultimi tre indicatori. Dai un'occhiata al seguente codice.
Example
<!DOCTYPE html>
<html>
<head>
<style>
/* this is generally a good idea */
body {
margin: 0;
padding: 0;
}
/* make sure the draggable element has "position: absolute"
and then top and left are set for the start position */
#drag_me {
width: 100px;
height: 100px;
background-color: #333;
position: absolute;
top: 0;
left: 0;
}
#drop_here {
width: 80%;
height: 200px;
background-color: #eee;
margin-left: 100px;
margin-top: -200px !important;
}
/* make sure the drag container is set with position relative */
#drag_cont {
background-color: #ccc;
height: auto;
width: 500px;
position:relative;
margin-top: 20px;
margin-left: 20px;
margin-bottom: auto;
}
#drag_me_handle {
width: 100%;
height: auto;
background-color: #F5B041;
}
#drag_me_handle span {
display: block;
padding: 20px;
}
.indicator {
width: 100px;
height: auto;
background-color: #0066FF;
border-bottom: 1px solid #eee;
}
.indicator span {
padding: 10px;
display: block;
}
.draggable {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var dragElement = $('drag_me'); var dragContainer = $('drag_cont');
var dragHandle = $('drag_me_handle'); var dropElement = $$('.draggable');
var startEl = $('start'); var completeEl = $('complete');
var dragIndicatorEl = $('drag_ind'); var enterDrop = $('enter');
var leaveDrop = $('leave'); var dropDrop = $('drop_in_droppable');
var myDrag = new Drag.Move(dragElement, {
// Drag.Move options
droppables: dropElement,
container: dragContainer,
// Drag options
handle: dragHandle,
// Drag.Move Events
onDrop: function(el, dr) {
if (!dr) { }else {
dropDrop.highlight('#FB911C'); //flashes orange
el.highlight('#fff'); //flashes white
dr.highlight('#667C4A'); //flashes green
};
},
onLeave: function(el, dr) {
leaveDrop.highlight('#FB911C'); //flashes orange
},
onEnter: function(el, dr) {
enterDrop.highlight('#FB911C'); //flashes orange
},
// Drag Events
onStart: function(el) {
startEl.highlight('#FB911C'); //flashes orange
},
onDrag: function(el) {
dragIndicatorEl.highlight('#FB911C'); //flashes orange
},
onComplete: function(el) {
completeEl.highlight('#FB911C'); //flashes orange
}
});
});
</script>
</head>
<body>
<p align = "center">Drag and Drop Application</p>
<div id = "drag_cont">
<div id = "start" class = "indicator"><span>Start</span></div>
<div id = "drag_ind" class = "indicator"><span>Drag</span></div>
<div id = "complete" class = "indicator"><span>Complete</span></div>
<div id = "enter" class = "indicator"><span>Enter Droppable Element</span></div>
<div id = "leave" class = "indicator"><span>Leave Droppable Element</span></div>
<div id = "drop_in_droppable" class = "indicator">
<span>Dropped in Droppable Element</span>
</div>
<div id = "drag_me">
<div id = "drag_me_handle"><span>HANDLE</span></div>
</div>
<div id = "drop_here" class = "draggable">
<p align = "center">Droppable Area</p>
</div>
</div>
</body>
</html>Riceverai il seguente output in cui, devi fare clic su Gestisci e trascinarlo. Ora puoi trovare le indicazioni di notifica sul lato sinistro.
Output
MooTools fornisce un modo per creare e utilizzare l'espressione regolare (regex). Questo tutorial spiegherà le basi e gli usi estremi delle regex.
Discutiamo alcuni metodi delle espressioni regolari.
test()
test () è un metodo utilizzato per testare l'espressione regolare con la stringa di input. Sebbene JavaScript fornisca già l'oggetto RegExp insieme alla funzione test (), MooTools aggiunge ulteriori funzionalità all'oggetto RegExp. Facciamo un esempio e capiamo come utilizzare il metodo test (). Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_1_result').set('html', "Matched"); } else { $('regex_1_result').set('html', "Not Match");
}
}
window.addEvent('domready', function() {
$('regex').addEvent('click', regex_demo);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
<input type = "button" id = "regex" value = "TEST"/><br/><br/>
<Lable id = "regex_1_result"></Lable>
</body>
</html>Riceverai il seguente output:
Produzione
Ignora maiuscole / minuscole
Questa è una delle situazioni importanti nel concetto di espressioni regolari. Se non vuoi che un'espressione regolare faccia distinzione tra maiuscole e minuscole, chiama il metodo di test con un'opzione 'I'. Facciamo un esempio che spieghi il caso ignora nell'espressione regolare. Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo = function(){
var test_string = $('regex_value').get('value');
var regex_value = $('regex_match').get('value'); var test_result = test_string.test(regex_value, "i"); if (test_result){ $('regex_1_result').set('html', "Matched");
} else {
$('regex_1_result').set('html', "Not Match"); } } window.addEvent('domready', function() { $('regex').addEvent('click', regex_demo);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
<input type = "button" id = "regex" value = "TEST"/><br/><br/>
<Lable id = "regex_1_result"></Lable>
</body>
</html>Riceverai il seguente output:
Produzione
Regex inizia con "^"
L'espressione regolare '^' (cap) è un operatore speciale che ti permette di controllare l'espressione regolare all'inizio di una data stringa. Questo operatore viene utilizzato come prefisso all'espressione regolare. Facciamo un esempio che spieghi come utilizzare questo operatore. Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_1_result').set('html', "Matched"); } else { $('regex_1_result').set('html', "Not Match");
}
}
window.addEvent('domready', function() {
$('regex').addEvent('click', regex_demo);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
<input type = "button" id = "regex" value = "Match"/><br/><br/>
<Lable id = "regex_1_result"></Lable>
</body>
</html>Riceverai il seguente output:
Produzione
Regex termina con "$"
Il Regex '$' (dollaro) è un operatore speciale che ti permette di controllare l'espressione regolare alla fine di una data stringa. Questo operatore viene utilizzato come suffisso per l'espressione regolare. Facciamo un esempio che spieghi come utilizzare questo operatore. Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo = function(){
var test_string = $('regex_value').get('value');
var regex_value = $('regex_match').get('value'); var test_result = test_string.test(regex_value); if (test_result){ $('regex_1_result').set('html', "Matched");
} else {
$('regex_1_result').set('html', "Not Match"); } } window.addEvent('domready', function() { $('regex').addEvent('click', regex_demo);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
<input type = "button" id = "regex" value = "Match"/><br/><br/>
<Lable id = "regex_1_result"></Lable>
</body>
</html>Riceverai il seguente output:
Produzione
Classi di caratteri
Le classi di caratteri sono una fase delle espressioni regolari che consentono di abbinare caratteri specifici (A o Z) o intervalli di caratteri (A - Z). Ad esempio, se vuoi verificare se una delle parole foo e zoo esiste in una stringa, le classi ti permettono di farlo inserendo i caratteri nelle parentesi quadre [] con le espressioni regolari. Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo_1 = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match_1').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_1_result').set('html', "Matched"); } else { $('regex_1_result').set('html', "Not Match");
}
}
var regex_demo_2 = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match_2').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_2_result').set('html', "Matched"); } else { $('regex_2_result').set('html', "Not Match");
}
}
var regex_demo_3 = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match_3').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_3_result').set('html', "Matched"); } else { $('regex_3_result').set('html', "Not Match");
}
}
window.addEvent('domready', function() {
$('regex_1').addEvent('click', regex_demo_1); $('regex_2').addEvent('click', regex_demo_2);
$('regex_3').addEvent('click', regex_demo_3);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp 1: <input type = "text" id = "regex_match_1"/>
<input type = "button" id = "regex_1" value = "Match"/>
<Lable id = "regex_1_result"></Lable><br/><br/>
Reg Exp 2: <input type = "text" id = "regex_match_2"/>
<input type = "button" id = "regex_2" value = "Match"/>
<Lable id = "regex_2_result"></Lable><br/><br/>
Reg Exp 3: <input type = "text" id = "regex_match_3"/>
<input type = "button" id = "regex_3" value = "Match"/>
<Lable id = "regex_3_result"></Lable>
</body>
</html>Riceverai il seguente output:
Produzione
escapeRegExp ()
Questo metodo viene utilizzato per ignorare i caratteri di escape da una determinata stringa durante il controllo con un'espressione regolare. Di solito, i caratteri di escape sono:
- . * + ? ^ $ { } ( ) | [ ] / \Prendiamo un esempio in cui, abbiamo una data stringa come "[controlla-questa-roba] è $900". If you want to take this whole string you have to declare it like this — "\[check\-this\-stuff\] it is \$900 ". Il sistema accetta solo questo pattern. Non usiamo i pattern di caratteri escakpe in MooTools. Abbiamo il metodo escapeRegExp () per ignorare i caratteri di escape. Dai un'occhiata al codice seguente.
Esempio
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo_1 = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match_1').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_1_result').set('html', "Matched"); } else { $('regex_1_result').set('html', "Not Match");
}
}
var regex_demo_2 = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match_1').get('value');
regex_value = regex_value.escapeRegExp();
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_2_result').set('html', "Matched"); } else { $('regex_2_result').set('html', "Not Match");
}
}
window.addEvent('domready', function() {
$('regex_1').addEvent('click', regex_demo_1); $('regex_2').addEvent('click', regex_demo_2);
$('regex_3').addEvent('click', regex_demo_3);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp 1: <input type = "text" id = "regex_match_1" size = "6"/><br/><br/>
<input type = "button" id = "regex_1" value = "With escapeRegExp()"/>
<Lable id = "regex_1_result"></Lable><br/><br/>
<input type = "button" id = "regex_2" value = "Without escapeRegExp()"/>
<Lable id = "regex_2_result"></Lable><br/><br/>
</body>
</html>Riceverai il seguente output:
Produzione
MooTools fornisce un'opzione che supporta i periodici. Con questo, può chiamare una funzione periodicamente con la stessa frequenza temporale del livello. Parliamo dei metodi e delle caratteristiche dei periodici.
periodico()
Questo metodo viene utilizzato per aumentare periodicamente una funzione con lo stesso livello di frequenza temporale. Ci sono alcune cose che dobbiamo definire all'inizio. Uno è la funzione che esegui periodicamente e il secondo è il valore numerico che indica la frequenza con cui vuoi aumentare una funzione (valore numerico misurato in millisecondi). Facciamo un esempio che spieghi come viene eseguita una funzione ogni 100 millisecondi. Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var periodicalFunction = function(){
document. writeln("www.tutorialspoint.com");
}
window.addEvent('domready', function() {
//number at the end indicates how often to fire, measure in milliseconds
var periodicalFunctionVar = periodicalFunction.periodical(100);
});
</script>
</head>
<body>
</body>
</html>Riceverai il seguente output:
Produzione
Elemento come seconda variabile
La funzione periodica lega anche una seconda variabile che è al di fuori della funzione domready (). Puoi legare l'elemento come seconda variabile nella funzione che vuoi aumentare periodicamente. Dai un'occhiata alla seguente sintassi per capire come passare una variabile.
Sintassi
window.addEvent('domready', function() {
//pass something to a var
var passedVar = $('elementID');
//now periodicalFunction will be able to use "this" to refer to "passedVar"
var periodicalFunctionVar = periodicalFunction.periodical(100, passedVar);
});QuipassVar è la variabile dell'elemento che contiene un elemento html. E quella variabile passa alla funzione periodicaperiodicalFunctionVar come seconda variabile.
$ Cancella ()
$ Questo metodo viene utilizzato per interrompere la funzione periodica. Questo metodo aiuta a reimpostare il valore della variabile periodica. Dai un'occhiata alla seguente sintassi per capire come usare la funzione $ clear ().
Sintassi
//we clear the var that we passed the function and periodical to
$clear(periodicalFunctionVar);Slider è una funzionalità che riflette un'azione mentre si fa scorrere la manopola o qualsiasi pulsante. È possibile creare il proprio dispositivo di scorrimento durante la definizione di elementi, gestore, opzioni e eventi di richiamata. Parliamo di più sullo slider.
Creazione di un nuovo dispositivo di scorrimento
Dobbiamo prima scegliere gli elementi HTML adatti per lo slider. Pur considerando l'idea di base, gli elementi div sono i più adatti per gli slider perché utilizzando i div, possiamo creare elementi figlio. Ora dobbiamo impostare il CSS per quei div per rendere la struttura div come un cursore perfetto. Qui, il div genitore è perslider e il div figlio è per knob.
Ora dobbiamo usare questi div come slider passando gli elementi al costruttore Slider come sliderObject, e knobObject. Dai un'occhiata alla seguente sintassi per definire lo slider.
Sintassi
var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);Dobbiamo anche definire le opzioni del cursore.
Opzioni di scorrimento
Parliamo di alcune opzioni che vengono utilizzate per i cursori.
Scatta
Un valore snap può essere un valore vero o falso. Determina se la manopola si aggancia agli step mentre viene trascinata lungo lo slider. Per impostazione predefinita, è falso.
Compensare
Questo è l'offset relativo della manopola dalla posizione iniziale. Prova a sperimentare con questo. Per impostazione predefinita, è 0.
Gamma
Questa è un'opzione molto utile. È possibile impostare un intervallo di numeri in cui verranno suddivisi i passaggi. Ad esempio, se il tuo intervallo fosse [0, 200] e avessi 10 passaggi, i tuoi passaggi sarebbero separati di 20. L'intervallo può includere anche numeri negativi, ad esempio [-10, 0], che è molto utile quando si inverte lo scorrimento. Per impostazione predefinita, è falso.
Ruota
Imposta la rotellina su true e lo scroller riconoscerà l'evento della rotellina del mouse. Quando si utilizza la rotellina del mouse, potrebbe essere necessario regolare l'intervallo per garantire che l'evento rotellina del mouse non appaia invertito (di nuovo, ne parleremo più avanti).
Passi
L'impostazione predefinita di 100 passaggi è molto utile in quanto è facile da usare come percentuale. È tuttavia possibile impostare quanti passaggi (utilizzabili) entro limiti ragionevoli. Per impostazione predefinita, è 100.
Modalità
La modalità definirà se un cursore si registra come verticale o orizzontale. Tuttavia, ci sono alcuni passaggi necessari per convertire da orizzontale a verticale. Per impostazione predefinita, è orizzontale.
Eventi di richiamata
Ci sono tre importanti eventi di callback forniti da uno Slider.
onChange
Qualsiasi cambiamento nella fase attuale attiva l'esecuzione dell'evento. Controlla l'esempio fornito di seguito per vedere quando viene eseguito.
onTick
Qualsiasi cambiamento nella posizione dell'handle attiva l'esecuzione di questo evento. Controlla l'esempio riportato di seguito per vedere cosa viene eseguito.
onComplete
Questo evento viene eseguito ogni volta che l'handle viene rilasciato. Controlla l'esempio fornito di seguito per vedere quando viene eseguito.
Esempio
Il seguente esempio spiega il cursore orizzontale e verticale insieme agli indicatori di evento. Dai un'occhiata al seguente codice.
<!DOCTYPE html>
<html>
<head>
<style "text/css">
#slider {
width: 200px;
height: 20px;
background-color: #0099FF;
}
#knob {
width: 20px;
height: 20px;
background-color: #993333;
}
#sliderv {
width: 20px;
height: 200px;
background-color: #0099FF;
}
#knobv {
width: 20px;
height: 20px;
background-color: #993333;
}
#change{
background-color: burlywood;
border: 2px solid black;
width: 200px;
}
#complete{
background-color: burlywood;
border: 2px solid black;
width: 200px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var SliderObject = new Slider('slider', 'knob', {
//options
range: [0, 10],
snap: false,
steps: 10,
offset: 0,
wheel: true,
mode: 'horizontal',
//callback events
onChange: function(step){
$('change').highlight('#F3F825'); $('steps_number').set('html', step);
},
onTick: function(pos){
$('tick').highlight('#F3F825'); $('knob_pos').set('html', pos);
//this line is very necessary (left with horizontal)
this.knob.setStyle('left', pos);
},
onComplete: function(step){
$('complete').highlight('#F3F825') $('steps_complete_number').set('html', step);
this.set(step);
}
});
var SliderObjectV = new Slider('sliderv', 'knobv', {
range: [-10, 0],
snap: true,
steps: 10,
offset: 0,
wheel: true,
mode: 'vertical',
onChange: function(step){
$('stepsV_number').set('html', step*-1); } }); //sets the vertical one to start at 0 //without this it would start at the top SliderObjectV.set(0); //sets the slider to step 7 $('set_knob').addEvent('click', function(){ SliderObject.set(7)});
});
</script>
</head>
<body>
<div id = "slider">
<div id = "knob"></div>
</div><br/><br/>
<div id = "sliderv">
<div id = "knobv"></div>
</div><br/>
<span id = "stepsV_number"></span> <br/>
<div id = "change" class = "indicator">
<strong>onChange</strong><br/>
Passes the step you are on: <span id = "steps_number"></span>
</div></br/>
<div id = "complete" class = "indicator">
<strong>onComplete</strong><br />
passes the current step: <span id = "steps_complete_number"></span>
</div>
</body>
</html>Produzione
Fare clic sulla manopola marrone sui cursori orizzontale o verticale e trascinarla, troverete la posizione del passo e l'indicazione dell'evento per ciascuna azione.
Sortables è una funzionalità avanzata nello sviluppo web e può davvero aprire le opzioni con i progetti dell'interfaccia utente. Include anche una grande funzione chiamata "serialize" che gestisce un elenco di ID elemento ed è utile per lo scripting lato server.
Creazione di un nuovo oggetto ordinabile
Innanzitutto, inviamo l'elenco di elementi a una variabile. Se desideri un array dell'elenco di elementi, assegna tutta la raccolta a una variabile. Infine, passa quella variabile a un costruttore ordinabile. Dai un'occhiata alla seguente sintassi per creare un oggetto ordinabile.
Sintassi
var sortableListsArray = $$('#listA, #listB');
var sortableLists = new Sortables(sortableListsArray);Di seguito è riportato il codice HTML per la sintassi.
Sintassi
<ul id = "listA">
<li>Item A1</li>
<li>Item A2</li>
<li>Item A3</li>
<li>Item A4</li>
</ul>
<ul id = "listB">
<li>Item B1</li>
<li>Item B2</li
<li>Item B3</li>
<li>Item B4</li>
</ul>Opzione Sortables
Ordinabile fornisce diverse opzioni per personalizzare l'oggetto ordinabile. Parliamo delle opzioni.
Vincola
Questa opzione determina se gli elementi dell'elenco possono saltare tra ul all'interno dell'oggetto ordinabile. Ad esempio, se hai due ul nell'oggetto ordinabile, puoi "constrain"gli elementi dell'elenco al loro genitore ul impostando"constrain: true". Dai un'occhiata alla seguente sintassi per l'impostazione del vincolo.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
constrain: true //false is default
});Clone
Questa opzione ti aiuta a creare un elemento clone sotto il cursore. Aiuta a ordinare gli elementi dell'elenco. Dai un'occhiata alla seguente sintassi per clone.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
clone: true //false is default
});Maniglia
La maniglia è un'opzione che accetta un elemento di agire come la maniglia di trascinamento. Ciò è utile ogni volta che si desidera che gli elementi dell'elenco siano selezionabili o che si desideri eseguire azioni nell'elenco. Se non fornisci alcuna variabile, verrà considerata falsa per impostazione predefinita. Dai un'occhiata alla seguente sintassi per l'utilizzo di handle.
Syntax
var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
handle: handleElements //false is default
});Opacità
Questa opzione ti consente di regolare l'elemento di ordinamento. Se usi un clone, l'opacità influisce sull'elemento che ordina.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
opacity: 1 //default is 1
});Ripristina
Questa opzione accetta "false" o qualsiasi opzione Fx. Se imposti l'opzione Fx all'interno di ripristino, creerà un effetto per la sistemazione dell'elemento ordinato. Dai un'occhiata alla seguente sintassi per il ripristino.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
revert: false //this is the default
});
//you can also set Fx options
var sortableLists = new Sortables(sortableListsArray, {
revert: {
duration: 50
}
});Scatta
Questa opzione ti consente di vedere quanti px l'utente trascinerà il mouse prima che l'elemento inizi a seguire.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
snap: 10 //user will have to drag 10 px to start the list sorting
});Eventi ordinabili
Sortable fornisce i seguenti eventi che sono piacevoli e diretti.
onStart - viene eseguito quando inizia il trascinamento (una volta che lo snap scatta)
onSort - viene eseguito quando gli articoli cambiano ordine
onComplete - viene eseguito quando si rilascia un elemento in posizione
Metodi ordinabili
I seguenti metodi ordinabili sono essenzialmente funzioni che appartengono a classi:
staccare ()
Con detach (), puoi "staccare" tutti gli handle correnti, rendendo non ordinabile l'intero oggetto della lista. Questo è utile per disabilitare l'ordinamento.
allegare ()
Questo metodo "attaccherà" le maniglie agli elementi di ordinamento, funziona per abilitare l'ordinamento dopo detach ().
addItems ()
Ciò consente di aggiungere nuovi elementi al tuo elenco ordinabile. Supponiamo che tu abbia un elenco ordinabile in cui l'utente può aggiungere un nuovo elemento, una volta aggiunto quel nuovo elemento, dovrai abilitare l'ordinamento su quel nuovo elemento.
removeItems ()
Questo metodo consente di rimuovere la capacità di ordinamento di un elemento all'interno di un elenco ordinabile. Ciò è utile quando si desidera bloccare un particolare elemento all'interno di un elenco specifico e non lasciarlo ordinare con altri.
addLists ()
Invece di aggiungere semplicemente un nuovo elemento a un elenco esistente, potresti voler aggiungere un elenco completamente nuovo all'oggetto ordinabile. Questo metodo ti consente di aggiungere più elenchi, rendendo davvero facile aggiungere più elementi selezionabili.
removeLists ()
Rimuoviamo gli elenchi dall'oggetto ordinabile. Ciò è utile quando si desidera bloccare un determinato elenco in posizione. È possibile rimuovere l'elenco, lasciando gli altri elenchi ancora nell'oggetto ordinabile, ma bloccando il contenuto dell'elenco rimosso.
serializzare ()
Tutto questo ordinamento è fantastico, ma cosa succede se vuoi fare qualcosa con i dati? .serialize (); restituirà un elenco degli ID degli elementi così come il loro ordine nell'elenco. È possibile scegliere da quale elenco ottenere i dati all'interno dell'oggetto in base al numero di indice.
Esempio
L'esempio seguente crea una matrice di elementi div con numerazione. Successivamente, riorganizzali facendo clic, trascina e rilascia le azioni utilizzando il puntatore del mouse. Dai un'occhiata al seguente codice.
<!DOCTYPE html>
<html>
<head>
<style>
#test {
position: inherit;
}
ul#sortables {
width: 300px;
margin: 0;
padding: 0;
}
li.sortme {
padding: 4px 8px;
color: #fff;
cursor: pointer;
list-style: none;
width: 300px;
background-color: #222;
border: 1px solid;
}
ul#sortables li {
margin: 10px 0;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
new Sortables($('test'), { initialize: function(){ var step = 0; this.elements.each(function(element, i) { var color = [step, 82, 87].hsbToRgb(); element.setStyle('background-color', color); step = step + 35; element.setStyle('height', $random(40, 100));
});
}
});
});
</script>
</head>
<body>
<ul id = "test">
<li class = "sortme">0</li>
<li class = "sortme">1</li>
<li class = "sortme">2</li>
<li class = "sortme">3</li>
<li class = "sortme">4</li>
<li class = "sortme">5</li>
<li class = "sortme">6</li>
<li class = "sortme">7</li>
<li class = "sortme">8</li>
<li class = "sortme">9</li>
<li class = "sortme">10</li>
</ul>
</body>
</html>Riceverai il seguente output:
Produzione
Accordion è il plugin più popolare fornito da MooTools. Aiuta a nascondere e rivelare i dati. Parliamone di più.
Creazione di una nuova fisarmonica
Gli elementi di base richiesti da una fisarmonica sono coppie di levette e il loro contenuto. Creiamo coppie di intestazioni e contenuti dell'html.
<h3 class = "togglers">Toggle 1</h3>
<p class = "elements">Here is the content of toggle 1</p>
<h3 class = "togglers">Toggle 2</h3>
<p class = "elements">Here is the content of toggle 2</p>Dai un'occhiata alla seguente sintassi per capire come costruire una fisarmonica basata sulla struttura HTML di cui sopra.
Sintassi
var toggles = $$('.togglers'); var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content);Esempio
Prendiamo un esempio che definisce le funzionalità di base di Accordion. Dai un'occhiata al seguente codice.
<!DOCTYPE html>
<html>
<head>
<style>
.togglers {
padding: 4px 8px;
color: #fff;
cursor: pointer;
list-style: none;
width: 300px;
background-color: #222;
border: 1px solid;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var toggles = $$('.togglers'); var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content);
});
</script>
</head>
<body>
<h3 class = "togglers">Toggle 1</h3>
<p class = "elements">Here is the content of toggle 1</p>
<h3 class = "togglers">Toggle 2</h3>
<p class = "elements">Here is the content of toggle 2</p>
<h3 class = "togglers">Toggle 3</h3>
<p class = "elements">Here is the content of toggle 3</p>
</body>
</html>Riceverai il seguente output:
Produzione
Opzioni di fisarmonica
La fisarmonica offre funzionalità straordinarie. Queste funzionalità aiutano a modificare le opzioni per fornire un output personalizzato.
Schermo
Questa opzione determina quale elemento viene visualizzato al caricamento della pagina. L'impostazione predefinita è 0, quindi viene visualizzato il primo elemento. Per impostare un altro elemento, basta inserire un altro numero intero che corrisponde al suo indice. A differenza di "mostra", il display passerà all'elemento aperto.
Syntax
var AccordionObject = new Accordion(toggles, content {
display: 0 //default is 0
});spettacolo
Proprio come "display", show determina quale elemento sarà aperto quando la pagina viene caricata, ma invece di una transizione, "show" farà solo visualizzare il contenuto al caricamento senza alcuna transizione.
Syntax
var AccordionObject = new Accordion(toggles, content {
show: 0 //default is 0
});altezza
Quando è impostato su true, si verifica un effetto di transizione dell'altezza quando si passa da un elemento visualizzato all'altro. Questa è l'impostazione standard della fisarmonica che vedi sopra.
Syntax
var AccordionObject = new Accordion(toggles, content {
height: true //default is true
});larghezza
Funziona allo stesso modo del file heightopzione. Tuttavia, invece di eseguire la transizione dell'altezza per mostrare il contenuto, questo aiuta nella transizione della larghezza. Se utilizzi "larghezza" con un'impostazione standard, come abbiamo usato sopra, lo spazio tra l'interruttore del titolo rimarrà lo stesso, in base all'altezza del contenuto. Il div "contenuto" passerà quindi da sinistra a destra per essere visualizzato in quello spazio.
Syntax
var AccordionObject = new Accordion(toggles, content {
width: false //default is false
});opacità
Questa opzione determina se mostrare o meno un effetto di transizione dell'opacità quando nascondi o visualizzi alcuni contenuti. Dato che stiamo usando le opzioni predefinite sopra, puoi vedere l'effetto lì.
Syntax
var AccordionObject = new Accordion(toggles, content {
opacity: true //default is true
});fixedHeight
Per impostare un'altezza fissa, devi correggere un numero intero (ad esempio, potresti mettere 100 per il contenuto di 100 px di altezza). Questo dovrebbe essere usato con una sorta di proprietà di overflow CSS se hai intenzione di avere un'altezza fissa inferiore all'altezza naturale del contenuto.
Syntax
var AccordionObject = new Accordion(toggles, content {
fixedHeight: false //default is false
});larghezza fissa
Proprio come "fixedHeight" sopra, questo imposterà la larghezza se assegni a questa opzione un numero intero.
Syntax
var AccordionObject = new Accordion(toggles, content {
fixedWidth: false //default is false
});sempre nascosto
Questa opzione ti consente di aggiungere un controllo di attivazione / disattivazione ai titoli. Con questa impostazione su true, quando si fa clic sul titolo di un contenuto aperto, l'elemento di contenuto si chiuderà automaticamente senza aprire nient'altro. Puoi vedere l'esecuzione nel seguente esempio.
Syntax
var AccordionObject = new Accordion(toggles, content {
alwaysHide: false //default is false
});Eventi di fisarmonica
Questi eventi ti consentono di creare la tua funzionalità per ogni azione di Accordion.
onActive
Questo verrà eseguito quando si attiva / disattiva un elemento. Passerà l'elemento di controllo toggle e l'elemento di contenuto che si sta aprendo e anche i parametri.
Syntax
var AccordionObject = new Accordion(toggles, content {
onActive: function(toggler, element) {
toggler.highlight('#76C83D'); //green
element.highlight('#76C83D');
}
});onBackground
Viene eseguito quando un elemento inizia a nascondersi e passa tutti gli altri elementi che si stanno chiudendo, ma non si aprono.
Syntax
var AccordionObject = new Accordion(toggles, content {
onBackground: function(toggler, element) {
toggler.highlight('#DC4F4D'); //red
element.highlight('#DC4F4D');
}
});onComplete
Questo è il tuo evento standard onComplete. Passa una variabile contenente l'elemento di contenuto.
Syntax
var AccordionObject = new Accordion(toggles, content {
onComplete: function(one, two, three, four){
one.highlight('#5D80C8'); //blue
two.highlight('#5D80C8');
three.highlight('#5D80C8');
four.highlight('#5D80C8');
}
});Metodi di fisarmonica
Questi metodi aiutano a creare e manipolare le sezioni della fisarmonica.
addSection ()
Con questo metodo, puoi aggiungere una sezione (una coppia di elementi di commutazione / contenuto). Funziona come molti degli altri metodi che abbiamo visto. Prima fai riferimento all'oggetto fisarmonica, usa .addSection, quindi puoi chiamare l'id del titolo, l'id del contenuto e infine indicare in quale posizione vuoi che appaia il nuovo contenuto (0 è il primo punto).
Syntax
AccordionObject.addSection('togglersID', 'elementsID', 2);Note- Quando aggiungi una sezione come questa, anche se verrà visualizzata al posto dell'indice 2, l'indice effettivo sarà +1 l'ultimo indice. Quindi se hai 5 elementi nel tuo array (0-4) e aggiungi un 6 ° , il suo indice sarà 5 indipendentemente da dove lo aggiungi con .addSection ();
Schermo()
Questo ti permette di aprire un dato elemento. Puoi selezionare l'elemento in base al suo indice (quindi se hai aggiunto una coppia di elementi e desideri visualizzarlo, qui avrai un indice diverso da quello che useresti sopra.
Syntax
AccordionObject.display(5); //would display the newly added elementExample
Il seguente esempio spiega la funzione Accordion con alcuni effetti. Dai un'occhiata al seguente codice.
<!DOCTYPE html>
<html>
<head>
<style>
.togglers {
color: #222;
margin: 0;
padding: 2px 5px;
background: #EC7063;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 15px;
font-weight: normal;
font-family: 'Andale Mono', sans-serif;
}
.ind {
background: #2E86C1;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 20px;
color: aliceblue;
font-weight: normal;
font-family: 'Andale Mono', sans-serif;
width: 200px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var toggles = $$('.togglers'); var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content, {
show: 0,
height : true,
width : false,
opacity: true,
fixedHeight: false,
fixedWidth: false,
alwaysHide: true,
onActive: function(toggler, element) {
toggler.highlight('#DC7633'); //green
element.highlight('#DC7633');
$('active').highlight('#DC7633'); }, onBackground: function(toggler, element) { toggler.highlight('#AED6F1'); //red element.highlight('#AED6F1'); $('background').highlight('#F4D03F');
}
});
$('display_section').addEvent('click', function(){
AccordionObject.display(4);
});
});
</script>
</head>
<body>
<div id = "active" class = "ind">onActive</div>
<div id = "background" class = "ind">onBackground</div>
<div id = "accordion_wrap">
<p class = "togglers">Toggle 1: click here</p>
<p class = "elements">Here is the content of toggle 1 Here is the content of
toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here
is the content of toggle 1 Here is the content of toggle 1 Here is the content
of toggle 1 Here is the content of toggle 1</p>
<p class = "togglers">Toggle 2: click here</p>
<p class = "elements">Here is the content of toggle 2</p>
<p class = "togglers">Toggle 3: click here</p>
<p class = "elements">Here is the content of toggle 3</p>
<p class = "togglers">Toggle 4: click here</p>
<p class = "elements">Here is the content of toggle 4</p>
</div>
<p>
100
<button id = "display_section" class = "btn btn-primary">
display section
</button>
</p>
</body>
</html>Output
Fai clic su ciascuna sezione Toggle, quindi troverai i dati nascosti e gli indicatori di evento per ogni azione.
MooTools fornisce diversi suggerimenti per progettare stili ed effetti personalizzati. In questo capitolo impareremo le varie opzioni e gli eventi dei suggerimenti, oltre ad alcuni strumenti che ti aiuteranno ad aggiungere o rimuovere i suggerimenti dagli elementi.
Creazione di un nuovo suggerimento
La creazione di una descrizione comando è molto semplice. Per prima cosa, dobbiamo creare l'elemento in cui allegheremo il suggerimento. Prendiamo un esempio che crea un tag di ancoraggio e lo aggiunge alla classe Tips nel costruttore. Dai un'occhiata al seguente codice.
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' for toll tip demo"
href = "http://www.tutorialspoint.com">Tool tip _demo</a>Dai un'occhiata al codice utilizzato per creare il tooltip.
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);Esempio
Il seguente esempio spiega l'idea di base di Tooltips. Dai un'occhiata al seguente codice.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);
});
</script>
</head>
<body>
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' for toll tip demo"
href = "http://www.tutorialspoint.com">Tool tip _demo</a>
</body>
</html>Riceverai il seguente output:
Produzione
Opzioni dei suggerimenti
Ci sono solo cinque opzioni in Suggerimenti e sono tutte abbastanza autoesplicative.
showDelay
Un numero intero misurato in millisecondi, questo determinerà il ritardo prima che il suggerimento venga visualizzato una volta che l'utente posiziona il mouse sull'elemento. L'impostazione predefinita è 100.
hideDelay
Proprio come showDelay sopra, questo numero intero (misurato anche in millisecondi) determina quanto tempo aspettare prima di nascondere il suggerimento una volta che l'utente lascia l'elemento. L'impostazione predefinita è 100.
nome della classe
Ciò consente di impostare un nome di classe per il wrapping della descrizione comando. L'impostazione predefinita è Null.
Compensare
Questo determina quanto lontano dall'elemento apparirà il suggerimento. 'x' si riferisce all'offset destro, dove 'y' è l'offset verso il basso (entrambi relativi al cursore SE l'opzione 'fixed' è impostata su false, altrimenti l'offset è relativo all'elemento originale). L'impostazione predefinita è x: 16, y: 16
Fisso
Questo imposta se il tooltip seguirà il tuo mouse se ti muovi intorno all'elemento. Se lo imposti su true, la descrizione comando non si sposterà quando sposti il cursore, ma rimarrà fissa rispetto all'elemento originale. L'impostazione predefinita è false.
Eventi tooltip
Gli eventi del tooltip rimangono semplici, come il resto di questa classe. Ci sono due eventi, onShow e onHide, e funzionano come ci si aspetterebbe.
onShow ()
Questo evento viene eseguito quando viene visualizzato il suggerimento. Se si imposta un ritardo, questo evento non verrà eseguito fino a quando il ritardo non è scaduto.
onHide ()
Il tooltip si nasconde con l'esecuzione di questo evento. Se c'è un ritardo, questo evento non verrà eseguito fino a quando il ritardo non sarà scaduto.
Metodi di descrizione comando
Esistono due metodi per le descrizioni comandi: collega e scollega. Ciò consente di scegliere come target un elemento specifico e aggiungerlo a un oggetto tooltip (e quindi, inerente a tutte le impostazioni in quell'istanza di classe) o staccare un particolare elemento.
allegare ()
Per attaccare un nuovo elemento a un oggetto tooltip, è sufficiente indicare l'oggetto tip, virare su .attach (); e infine posizionare il selettore di elementi tra parentesi ().
Syntax
toolTips.attach('#tooltipID3');dettach ()
Questo metodo funziona esattamente come il metodo .attach, ma il risultato è completamente l'opposto. Innanzitutto, indica l'oggetto tip, quindi aggiungi .dettach () e infine posiziona il selettore di elementi all'interno ().
Syntax
toolTips.dettach('#tooltipID3');Example
Facciamo un esempio che spieghi il tooltip. Dai un'occhiata al seguente codice.
<!DOCTYPE html>
<html>
<head>
<style>
.custom_tip .tip {
background-color: #333;
padding: 5px;
}
.custom_tip .tip-title {
color: #fff;
background-color: #666;
font-size: 20px;
padding: 5px;
}
.custom_tip .tip-text {
color: #fff;
padding: 5px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips, {
showDelay: 1000, //default is 100
hideDelay: 100, //default is 100
className: 'custom_tip', //default is null
offsets: {
'x': 100, //default is 16
'y': 16 //default is 16
},
fixed: false, //default is false
onShow: function(toolTipElement){
toolTipElement.fade(.8);
$('show').highlight('#FFF504'); }, onHide: function(toolTipElement){ toolTipElement.fade(0); $('hide').highlight('#FFF504');
}
});
var toolTipsTwo = new Tips('.tooltip2', {
className: 'something_else', //default is null
});
$('tooltipID1').store('tip:text', 'You can replace the href with whatever text you want.'); $('tooltipID1').store('tip:title', 'Here is a new title.');
$('tooltipID1').set('rel', 'This will not change the tooltips text'); $('tooltipID1').set('title', 'This will not change the tooltips title');
toolTips.detach('#tooltipID2');
toolTips.detach('#tooltipID4');
toolTips.attach('#tooltipID4');
});
</script>
</head>
<body>
<div id = "show" class = "ind">onShow</div>
<div id = "hide" class = "ind">onHide</div>
<p><a id = "tooltipID1" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' of 1"
href = "http://www.tutorialspoint.com">Tool tip 1</a></p>
<p><a id = "tooltipID2" class = "tooltip_demo" title = "2nd Tooltip Title"
rel = "here is the default 'text' of 2"
href = "http://www.tutorialspoint.com">Tool tip is detached</a></p>
<p><a id = "tooltipID3" class = "tooltip_demo_2" title = "3rd Tooltip Title"
rel = "here is the default 'text' of 3"
href = "http://www.tutorialspoint.com">Tool tip 3</a></p>
<p><a id = "tooltipID4" class = "tooltip_demo_2" title = "4th Tooltip Title"
rel = "here is the default 'text' of 4, i was detached then attached"
href = "http://www.tutorialspoint.com">Tool tip detached then attached
again. </a></p>
<p><a id = "tooltipID5" class = "tooltip2" title = "Other Tooltip Title"
rel = "here is the default 'text' of 'other style'"
href = "http://www.tutorialspoint.com/">A differently styled tool tip</a></p>
</body>
</html>Riceverai il seguente output:
Output
Per contenuto a schede si intende il contenuto presente nell'area a schede e tale contenuto è correlato agli elementi dell'elenco. Ogni volta che applichiamo azioni comehover o click alla voce di elenco, la reazione immediata creerà un effetto sul contenuto a schede.
Parliamo di più sulle schede.
Creazione di schede semplici
La creazione di semplici schede di menu ti aiuta a esplorare informazioni aggiuntive quando passi il mouse su una voce di elenco. Per prima cosa, crea un elenco non ordinato con elementi, quindi crea div, ciascuno corrispondente a un elemento dell'elenco. Diamo un'occhiata al seguente codice HTML.
Script
<!-- here is our menu -->
<ul id = "tabs">
<li id = "one">One</li>
<li id = "two">Two</li>
<li id = "three">Three</li>
<li id = "four">Four</li>
</ul>
<!-- and here are our content divs -->
<div id = "contentone" class = "hidden">content for one</div>
<div id = "contenttwo" class = "hidden">content for two</div>
<div id = "contentthree" class = "hidden">content for three</div>
<div id = "contentfour" class = "hidden">content for four</div>Forniamo un supporto di base al codice HTML di cui sopra utilizzando CSS che aiuta a nascondere i dati. Dai un'occhiata al seguente codice.
.hidden {
display: none;
}Scriviamo ora un codice MooTools che mostri la funzionalità di tabulazione. Dai un'occhiata al seguente codice.
Snippet di esempio
//here are our functions to change the styles
var showFunction = function() {
this.setStyle('display', 'block');
}
var hideFunction = function() {
this.setStyle('display', 'none');
}
window.addEvent('domready', function() {
//here we turn our content elements into vars
var elOne = $('contentone'); var elTwo = $('contenttwo');
var elThree = $('contentthree'); var elFour = $('contentfour');
//add the events to the tabs
$('one').addEvents({ //set up the events types //and bind the function with the variable to pass 'mouseenter': showFunction.bind(elOne), 'mouseleave': hideFunction.bind(elOne) }); $('two').addEvents({
'mouseenter': showFunction.bind(elTwo),
'mouseleave': hideFunction.bind(elTwo)
});
$('three').addEvents({ 'mouseenter': showFunction.bind(elThree), 'mouseleave': hideFunction.bind(elThree) }); $('four').addEvents({
'mouseenter': showFunction.bind(elFour),
'mouseleave': hideFunction.bind(elFour)
});
});Combinando i codici di cui sopra, otterrai la funzionalità corretta.
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
.hidden {
display: none;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript">
//here are our functions to change the styles
var showFunction = function() {
this.setStyle('display', 'block');
}
var hideFunction = function() {
this.setStyle('display', 'none');
}
window.addEvent('domready', function() {
//here we turn our content elements into vars
var elOne = $('contentone'); var elTwo = $('contenttwo');
var elThree = $('contentthree'); var elFour = $('contentfour');
//add the events to the tabs
$('one').addEvents({ //set up the events types //and bind the function with the variable to pass 'mouseenter': showFunction.bind(elOne), 'mouseleave': hideFunction.bind(elOne) }); $('two').addEvents({
'mouseenter': showFunction.bind(elTwo),
'mouseleave': hideFunction.bind(elTwo)
});
$('three').addEvents({ 'mouseenter': showFunction.bind(elThree), 'mouseleave': hideFunction.bind(elThree) }); $('four').addEvents({
'mouseenter': showFunction.bind(elFour),
'mouseleave': hideFunction.bind(elFour)
});
});
</script>
</head>
<body>
<!-- here is our menu -->
<ul id = "tabs">
<li id = "one">One</li>
<li id = "two">Two</li>
<li id = "three">Three</li>
<li id = "four">Four</li>
</ul>
<!-- and here are our content divs -->
<div id = "contentone" class = "hidden">content for one</div>
<div id = "contenttwo" class = "hidden">content for two</div>
<div id = "contentthree" class = "hidden">content for three</div>
<div id = "contentfour" class = "hidden">content for four</div>
</body>
</html>Produzione
Posiziona il puntatore del mouse sull'elemento dell'elenco, quindi otterrai informazioni aggiuntive sul rispettivo elemento.
Schede dei contenuti Marph
Estendendo il codice, possiamo aggiungere alcune funzionalità di morph quando viene visualizzato il nostro contenuto nascosto. Possiamo ottenere questo risultato utilizzando l'effetto Fx.Morph invece dello styling.
Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
.hiddenM {
display: none;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript">
var showFunction = function() {
//resets all the styles before it morphs the current one
$$('.hiddenM').setStyles({ 'display': 'none', 'opacity': 0, 'background-color': '#fff', 'font-size': '16px' }); //here we start the morph and set the styles to morph to this.start({ 'display': 'block', 'opacity': 1, 'background-color': '#d3715c', 'font-size': '31px' }); } window.addEvent('domready', function() { var elOneM = $('contentoneM');
var elTwoM = $('contenttwoM'); var elThreeM = $('contentthreeM');
var elFourM = $('contentfourM'); //creat morph object elOneM = new Fx.Morph(elOneM, { link: 'cancel' }); elTwoM = new Fx.Morph(elTwoM, { link: 'cancel' }); elThreeM = new Fx.Morph(elThreeM, { link: 'cancel' }); elFourM = new Fx.Morph(elFourM, { link: 'cancel' }); $('oneM').addEvent('click', showFunction.bind(elOneM));
$('twoM').addEvent('click', showFunction.bind(elTwoM)); $('threeM').addEvent('click', showFunction.bind(elThreeM));
$('fourM').addEvent('click', showFunction.bind(elFourM));
});
</script>
</head>
<body>
<!-- here is our menu -->
<ul id = "tabs">
<li id = "oneM">One</li>
<li id = "twoM">Two</li>
<li id = "threeM">Three</li>
<li id = "fourM">Four</li>
</ul>
<!-- and here are our content divs -->
<div id = "contentoneM" class = "hiddenM">content for one</div>
<div id = "contenttwoM" class = "hiddenM">content for two</div>
<div id = "contentthreeM" class = "hiddenM">content for three</div>
<div id = "contentfourM" class = "hiddenM">content for four</div>
</body>
</html>Produzione
Fai clic su un elemento qualsiasi nell'elenco, quindi otterrai ulteriori informazioni sulle schede.
MooTools contiene classi di diverse API. Guarda le basi della creazione e dell'utilizzo delle classi con MooTools. Una classe è un contenitore per una raccolta di variabili e funzioni che operano su tali variabili per eseguire attività specifiche.
Parliamo in dettaglio delle variabili, dei metodi e delle opzioni.
Variabili
La creazione di una variabile è un'operazione molto semplice. È come dichiarare una coppia chiave / valore negli hash. Allo stesso modo, puoi accedere alle variabili nello stesso modo che significa <class_name.variable>. Dai un'occhiata alla seguente sintassi per la creazione e l'accesso alle variabili nelle classi.
Sintassi
//Create a new class named class_one
//with two internal variables
var Class_one = new Class({
variable_one : "I'm First",
variable_two : "I'm Second"
});
var run_demo_one = function(){
//instantiate a Class_one class called demo_1
var demo_1 = new Class_one();
//Display the variables inside demo_one
alert( demo_1.variable_one );
alert( demo_1.variable_two );
}Metodi
In generale, un metodo è una funzione che utilizza un insieme di istruzioni che appartiene a una classe specifica. È possibile chiamare queste funzioni utilizzando l'istanza della classe. Un'altra cosa ogni volta che vuoi chiamare la variabile di istanza nella funzione che devi usarethisparola chiave. Dai un'occhiata alla seguente sintassi per la creazione e l'accesso ai metodi.
Sintassi
var Class_two = new Class({
variable_one : "I'm First",
variable_two : "I'm Second",
function_one : function(){
alert('First Value : ' + this.variable_one);
},
function_two : function(){
alert('Second Value : ' + this.variable_two);
}
});
var run_demo_2 = function(){
//Instantiate a version of class_two
var demo_2 = new Class_two();
//Call function_one
demo_2.function_one();
//Call function_two
demo_2.function_two();
}inizializzare
inizializzare è un'opzione nell'oggetto classe. Questo ti aiuta a creare una configurazione di classe Questo aiuta anche a impostare le opzioni e le variabili di configurazione dell'utente. Dai un'occhiata alla seguente sintassi dell'opzione di inizializzazione.
Sintassi
var Myclass = new Class({
//Define an initalization function with one parameter
initialize : function(user_input){
//create a value variable belonging to
//this class and assign it the value
//of the user input
this.value = user_input;
}
})Opzioni di implementazione
Le opzioni di implementazione sono molto utili per accettare gli input degli utenti e creare classi. Aggiungere la funzionalità delle opzioni alla tua classe è semplice come aggiungere un'altra chiave / coppia alle opzioni di inizializzazione per la tua classe. Una volta che questa configurazione è pronta, puoi sovrascrivere una o tutte le opzioni predefinite passando le coppie chiave / valore. Fornisce il metodo setOptions. Questo metodo consente di impostare le opzioni una volta che la classe è stata inizializzata. Se vuoi accedere alla variabile dall'interno della classe, usa la seguente sintassi.
Sintassi
var Class_four = new Class({
Implements: Options,
options: {
option_one : "Default Value For First Option",
option_two : "Default Value For Second Option",
},
initialize: function(options){
this.setOptions(options);
},
show_options : function(){
alert(this.options.option_one + "\n" + this.options.option_two);
},
});
var run_demo_4 = function(){
var demo_4 = new Class_four({
option_one : "New Value"
});
demo_4.show_options();
}
var run_demo_5 = function(){
var demo_5 = new Class_four();
demo_5.show_options();
demo_5.setOptions({option_two : "New Value"});
demo_5.show_options();
}
//Create a new class_four class with
//a new option called new_variable
var run_demo_6 = function(){
var demo_6 = new Class_four({new_option : "This is a new option"});
demo_6.show_options();
}Fx.Element ti consente di aggiungere la funzionalità Fx a più elementi dom su una singola pagina. In realtà Fx.Element è un'estensione del plugin Fx.Morph. L'unica differenza tra Fx.Element e Fx.Morph è la sintassi. In questa sintassi, ilstart({}) viene utilizzato per creare un effetto e il metodo .set ({}) viene utilizzato per impostare alcuni stili.
Dai un'occhiata alla seguente sintassi per Fx.Element.
Sintassi
var fxElementsArray = $$('.myElementClass');
var fxElementsObject = new Fx.Elements(fxElementsArray, {
//Fx Options
link: 'chain',
duration: 1000,
transition: 'sine:in:out',
//Fx Events
onStart: function(){
startInd.highlight('#C3E608');
}
});start ({}) e set ({})
Avvia e imposta strutture di parole chiave vengono utilizzate per avviare e impostare gli stili. Ma in questa struttura, fai riferimento all'elemento tramite l'indice: il primo elemento è 0, il secondo è 1 e così via. Dai un'occhiata alla seguente sintassi per le strutture Start e Set.
Sintassi
//you can set your styles with .set({...})
fxElementsObject .set({
'0': {
'height': 10,
'width': 10,
'background-color': '#333'
},
'1': {
'width': 10,
'border': '1px dashed #333'
}
});
//or create a transition effect with .start({...})
fxElementsObject .start({
'0': {
'height': [50, 200],
'width': 50,
'background-color': '#87AEE1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
});Esempio
Facciamo un esempio che spieghi il Fx.Element. Dai un'occhiata al seguente codice.
<!DOCTYPE html>
<html>
<head>
<style>
.ind {
width: 200px;
padding: 10px;
background-color: #87AEE1;
font-weight: bold;
border-bottom: 1px solid white;
}
.myElementClass {
height: 50px;
width: 100px;
background-color: #FFFFCC;
border: 1px solid #FFFFCC;
padding: 20px;
}
#buttons {
margin: 20px 0;
display: block;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var startFXElement = function(){
this.start({
'0': {
'height': [50, 100],
'width': 50,
'background-color': '#87AEE1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
});
}
var startFXElementB = function(){
this.start({
'0': {
'width': 300,
'background-color': '#333'
},
'1': {
'width': 300,
'border': '10px solid #DC1E6D'
}
});
}
var setFXElement = function(){
this.set({
'0': {
'height': 50,
'background-color': '#FFFFCC',
'width': 100
},
'1': {
'height': 50,
'width': 100,
'border': 'none'
}
});
}
window.addEvent('domready', function() {
var fxElementsArray = $$('.myElementClass'); var startInd = $('start_ind');
var cancelInd = $('cancel_ind'); var completeInd = $('complete_ind');
var chainCompleteInd = $('chain_complete_ind'); var fxElementsObject = new Fx.Elements(fxElementsArray, { //Fx Options link: 'chain', duration: 1000, transition: 'sine:in:out', //Fx Events onStart: function(){ startInd.highlight('#C3E608'); }, onCancel: function(){ cancelInd.highlight('#C3E608'); }, onComplete: function(){ completeInd.highlight('#C3E608'); }, onChainComplete: function(){ chainCompleteInd.highlight('#C3E608'); } }); $('fxstart').addEvent('click', startFXElement.bind(fxElementsObject));
$('fxstartB').addEvent('click', startFXElementB.bind(fxElementsObject)); $('fxset').addEvent('click', setFXElement.bind(fxElementsObject));
$('fxpause').addEvent('click', function(){ fxElementsObject.pause(); }); $('fxresume').addEvent('click', function(){
fxElementsObject.resume();
});
});
</script>
</head>
<body>
<div id = "start_ind" class = "ind">onStart</div>
<div id = "cancel_ind" class = "ind">onCancel</div>
<div id = "complete_ind" class = "ind">onComplete</div>
<div id = "chain_complete_ind" class = "ind">onChainComplete</div>
<span id = 'buttons'>
<button id = "fxstart">Start A</button>
<button id = "fxstartB">Start B</button>
<button id = "fxset">Reset</button>
<button id = "fxpause">Pause</button>
<button id = "fxresume">Resume</button>
</span>
<div class = "myElementClass">Element 0</div>
<div class = "myElementClass">Element 1</div>
</body>
</html>Riceverai il seguente output:
Produzione
Fx.Slides è un'opzione che ti consente di visualizzare il contenuto facendolo scorrere in vista. È molto semplice ma migliora l'aspetto della tua interfaccia utente.
Parliamo della creazione e inizializzazione di un Fx.Slide, delle sue opzioni e dei suoi metodi.
Per prima cosa, inizializzeremo la classe Fx.Slide con un'istanza definita dall'utente. Per questo, dobbiamo creare e selezionare un elemento HTML. Successivamente, applicheremo CSS a questi elementi. Infine, inizieremo una nuova istanza di Fx.Slide con la nostra variabile elemento.
Opzioni Fx.Slide
Ci sono solo due opzioni Fx.Slide: modalità e wrapper.
Modalità
La modalità offre due scelte, "verticale" o "orizzontale". Rivelazioni verticali dall'alto verso il basso e rivelazioni orizzontali da sinistra a destra. Non ci sono opzioni per andare dal basso verso l'alto o da destra a sinistra, anche se capisco che l'hacking della classe stessa per ottenere ciò è relativamente semplice. A mio parere, è un'opzione che vorrei vedere standard e se qualcuno ha violato la classe per consentire queste opzioni, vi preghiamo di inviarci una nota.
Wrapper
Per impostazione predefinita, Fx.Slide crea un wrapper attorno all'elemento diapositiva, dandogli "overflow": "hidden". Wrapper ti consente di impostare un altro elemento come wrapper. Come ho detto sopra, non sono chiaro su dove questo potrebbe tornare utile e sarei interessato a sentire eventuali pensieri (grazie a horseweapon su mooforum.net per avermi aiutato a chiarire questo).
Metodi Fx.Slide
Fx.Slide offre anche molti metodi per mostrare e nascondere il tuo elemento.
slideIn ()
Come suggerisce il nome, questo metodo attiverà l'evento di inizio e rivelerà il tuo elemento.
sfilare()
Riporta il tuo elemento allo stato nascosto.
toggle ()
Questo farà scorrere l'elemento dentro o fuori, a seconda del suo stato corrente. Metodo molto utile per aggiungere agli eventi di clic.
nascondere()
Ciò nasconderà l'elemento senza un effetto diapositiva.
spettacolo()
Questo mostrerà l'elemento senza un effetto diapositiva.
Scorciatoie Fx.Slide
La classe Fx.Slide fornisce anche alcune comode scorciatoie per aggiungere effetti a un elemento.
set ('slide')
Invece di iniziare una nuova classe, puoi creare una nuova istanza se "imposti" la diapositiva su un elemento.
Syntax
slideElement.set('slide');opzioni di impostazione
Puoi anche impostare le opzioni con la scorciatoia:
Syntax
slideElement.set('slide', {duration: 1250});diapositiva()
Una volta che la diapositiva è .set (), puoi avviarla con il metodo .slide ().
Syntax
slideElement.slide('in');.slide accetterà -
- ‘in’
- ‘out’
- ‘toggle’
- ’show’
- ‘hide’
... ciascuno corrispondente ai metodi sopra.
Example
Facciamo un esempio che spieghi Fx.Slide. Dai un'occhiata al seguente codice.
<!DOCTYPE html>
<html>
<head>
<style>
.ind {
width: 200px;
padding: 10px;
background-color: #87AEE1;
font-weight: bold;
border-bottom: 1px solid white;
}
.slide {
margin: 20px 0;
padding: 10px;
width: 200px;
background-color: #F9E79F;
}
#slide_wrap {
padding: 30px;
background-color: #D47000;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var slideElement = $('slideA'); var slideVar = new Fx.Slide(slideElement, { //Fx.Slide Options mode: 'horizontal', //default is 'vertical' //wrapper: this.element, //default is this.element //Fx Options link: 'cancel', transition: 'elastic:out', duration: 'long', //Fx Events onStart: function(){ $('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22"); }, onComplete: function(){ $('complete').highlight("#EBCC22");
}
}).hide().show().hide(); //note, .hide and .show do not fire events
$('openA').addEvent('click', function(){ slideVar.slideIn(); }); $('closeA').addEvent('click', function(){
slideVar.slideOut();
});
//EXAMPLE B
var slideElementB = $('slideB'); var slideVarB = new Fx.Slide(slideElementB, { //Fx.Slide Options mode: 'vertical', //default is 'vertical' link: 'chain', //Fx Events onStart: function(){ $('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22"); }, onComplete: function(){ $('complete').highlight("#EBCC22");
}
});
$('openB').addEvent('click', function(){ slideVarB.slideIn(); }); $('closeB').addEvent('click', function(){
slideVarB.slideOut();
});
});
</script>
</head>
<body>
<div id = "start" class = "ind">Start</div>
<div id = "cancel" class = "ind">Cancel</div>
<div id = "complete" class = "ind">Complete</div>
<button id = "openA">open A</button>
<button id = "closeA">close A</button>
<div id = "slideA" class = "slide">Here is some content - A. Notice the delay
before onComplete fires. This is due to the transition effect, the onComplete
will not fire until the slide element stops "elasticing." Also, notice that
if you click back and forth, it will "cancel" the previous call and give the
new one priority.</div>
<button id = "openB">open B</button>
<button id = "closeB">close B</button>
<div id = "slideB" class = "slide">Here is some content - B. Notice how
if you click me multiple times quickly I "chain" the events. This slide is
set up with the option "link: 'chain'"</div>
</body>
</html>Output
Fare clic sui pulsanti: openA, closeA, openB e closeB. Osservare le modifiche, gli effetti e la notifica degli eventi sugli indicatori.
MooTools fornisce diverse scorciatoie FX.Tween per diverse transizioni come effetti appariscenti che si traducono in transizioni animate fluide. Parliamo di alcuni metodi dalle scorciatoie Tween.
gemello()
Questo metodo fornisce transizioni fluide tra due valori di proprietà di stile. Prendiamo un esempio che utilizza il metodo tween per modificare la larghezza di un div da 100px a 300px. Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
#body_div {
width: 100px;
height: 200px;
background-color: #1A5276;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var tweenFunction = function(){
$('body_div').tween('width','300px'); } window.addEvent('domready', function() { $('tween_button').addEvent('click', tweenFunction);
});
</script>
</head>
<body>
<div id = "body_div"> </div><br/>
<input type = "button" id = "tween_button" value = "Set Width to 300 px"/>
</body>
</html>Riceverai il seguente output:
Produzione
dissolvenza ()
Questo metodo regola l'opacità o la trasparenza dell'elemento. Facciamo un esempio in cui forniamo un pulsante per regolare l'opacità di un div utilizzando MooTools. Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
#body_div {
width: 100px;
height: 200px;
background-color: #1A5276;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/JavaScript">
var fadeFunction = function(){
$('body_div').fade('.5'); } window.addEvent('domready', function() { $('fade_button').addEvent('click', fadeFunction);
});
</script>
</head>
<body>
<div id = "body_div"> </div><br/>
<input type = "button" id = "fade_button" value = "fade to 50%"/>
</body>
</html>Riceverai il seguente output:
Produzione
Clicca sul fade to 50% button per ridurre l'opacità div al 50%.
evidenziare()
Questo metodo evidenzia un elemento utilizzando diversi colori di sfondo. Contiene due funzionalità principali di Tween Flash.
Nella prima funzionalità, Tween Flash viene utilizzato per applicare diversi colori di sfondo agli elementi.
Una volta che Tween Flash ha impostato un colore di sfondo diverso, passa a un altro colore di sfondo.
Questo metodo viene utilizzato per evidenziare un elemento dopo la selezione. Facciamo un esempio per capire questo metodo. Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
width: 100px;
height: 100px;
background-color: #1A5276;
border: 3px solid #dd97a1;
}
#div2 {
width: 100px;
height: 100px;
background-color: #145A32;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var highlightFunction = function(){
$('div1').highlight('#eaea16'); } var highlightChangeFunction = function(){ $('div2').highlight('#eaea16', '#FBFCFC');
}
window.addEvent('domready', function() {
$('div1').addEvent('mouseover', highlightFunction); $('div2').addEvent('mouseover', highlightChangeFunction);
});
</script>
</head>
<body>
<div id = "div1"> </div><br/>
<div id = "div2"> </div>
</body>
</html>Riceverai il seguente output:
Produzione
Cerca di mantenere il puntatore del mouse sui div colorati e osserva i cambiamenti nelle luci flash.
Fx.Morph è una funzione fornita da MooTools. Viene utilizzato per creare una nuova interpolazione per le transizioni tra le proprietà di stile. Durante il morphing, dobbiamo selezionare l'elemento con un oggetto e quindi possiamo applicare diverse funzioni ad esso. È inoltre necessario associare l'elemento con un'interpolazione appena creata.
Prendiamo un esempio che fornisce tre pulsanti su una pagina web. Il primo è il fileSETpulsante che crea un elemento con proprietà di stile come altezza, larghezza e colore. Il secondo è il fileMORPHpulsante che modifica le proprietà di stile di un elemento. Il terzo è ilRESETpulsante che cambia tutte le impostazioni nella posizione iniziale. Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var morphSet = function(){
this.set({
'width': 100,
'height': 100,
'background-color': '#884EA0'
});
}
var morphStart = function(){
this.start({
'width': 200,
'height': 200,
'background-color': '#d3715c'
});
}
var morphReset = function(){
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
});
}
window.addEvent('domready', function() {
var morphElement = $('morph_element'); var morphObject = new Fx.Morph(morphElement); $('set').addEvent('click', morphSet.bind(morphObject));
$('start').addEvent('click', morphStart.bind(morphObject)); $('reset').addEvent('click', morphReset.bind(morphObject));
});
</script>
</head>
<body>
<div id = "morph_element"> </div><br/>
<input type = "button" id = "set" value = "SET"/>
<input type = "button" id = "start" value = "START"/>
<input type = "button" id = "reset" value = "RESET"/>
</body>
</html>Riceverai il seguente output:
Produzione
MooTools fornisce diverse opzioni Fx.Options che aiuteranno Fx.Tween e Fx.Morph. Queste opzioni ti daranno un controllo sugli effetti.
Parliamo di alcune opzioni fornite da MooTools. Prima di procedere, dai un'occhiata alla seguente sintassi per l'impostazione delle opzioni.
Sintassi
var morphObject = new Fx.Morph(morphElement, {
//first state the name of the option
//place a :
//then define your option
});fps (fotogrammi al secondo)
Questa opzione determina il numero di fotogrammi al secondo nell'animazione durante il morphing. Possiamo applicare questi fps alle funzionalità Morph o Tween. Per impostazione predefinita, il valore di fps è 50. Ciò significa che qualsiasi funzionalità richiederà 50 fotogrammi al secondo durante il morphing.
Esempio
Facciamo un esempio in cui trasformeremo un elemento div usando 5 fps. Dai un'occhiata al seguente codice.
<!DOCTYPE html>
<html>
<head>
<style>
#morph_element {
width: 100px;
height: 100px;
background-color: #1A5276;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var morphStart = function(){
this.start({
'width': 200,
'height': 200,
'background-color': '#d3715c'
});
}
window.addEvent('domready', function() {
var morphElement = $('morph_element'); var morphObject = new Fx.Morph(morphElement, { fps: 5 }); $('start').addEvent('click', morphStart.bind(morphObject));
});
</script>
</head>
<body>
<div id = "morph_element"> </div><br/>
<input type = "button" id = "start"value = "START"/>
</body>
</html>Riceverai il seguente output:
Produzione
Clicca sul STARTpulsante per trovare l'animazione del morphing. Questo ci aiuta a osservare il numero di fotogrammi utilizzati per l'animazione. Usa valori diversi per fps per ottenere la differenza nell'animazione. Si consiglia di utilizzare il valore fps inferiore a 10. Questo ti aiuterà a ottenere facilmente la differenza.
unità
Questa opzione viene utilizzata per impostare il tipo di unità per i numeri. In generale, abbiamo tre diversi tipi di unità: px,% ed ems. Dai un'occhiata alla seguente sintassi.
Sintassi
var morphObject = new Fx.Morph(morphElement, {
unit: '%'
});La sintassi sopra è di allocare la percentuale alle unità. Ciò significa che tutti i valori in numeri vengono trattati come percentuali.
collegamento
Questa opzione fornisce un modo per gestire più chiamate per avviare un'animazione. Se applichi più chiamate di eventi contemporaneamente, queste chiamate verranno accettate come chiamate di collegamento. Al termine della prima chiamata, la seconda viene eseguita automaticamente. Contiene le seguenti tre opzioni:
ignore- Questa è l'opzione predefinita. Ignora qualsiasi numero di chiamate fino a quando non completa l'effetto.
cancel- Questo annulla l'effetto corrente, quando ne viene creato un altro. Segue la precedenza delle chiamate più recenti.
Chain- Questo ti consente di concatenare gli effetti insieme e mantenere lo stack di chiamate. Esegue tutte le chiamate finché non passa attraverso tutte le chiamate concatenate nello stack.
Dai un'occhiata alla seguente sintassi per l'utilizzo dell'opzione di collegamento.
Sintassi
var morphObject = new Fx.Morph(morphElement, {
link: 'chain'
});Durata
Questa opzione viene utilizzata per definire la durata dell'animazione. Ad esempio, se desideri che un oggetto si muova di 100 px nella durata di 1 secondo, andrà più lentamente di un oggetto che si sposta di 1000 px in 1 secondo. È possibile inserire un numero misurato in millisecondi. Oppure puoi utilizzare una qualsiasi di queste tre opzioni al posto dei numeri.
- Breve = 250 ms
- Normale = 500 ms (predefinito)
- Lungo = 1000 ms
Dai un'occhiata alla seguente sintassi per l'utilizzo della durata.
Sintassi
var morphObject = new Fx.Morph(morphElement, {
duration: 'long'
});O,
var morphObject = new Fx.Morph(morphElement, {
duration: 1000
});transizione
Questa opzione viene utilizzata per determinare il tipo di transizione. Ad esempio, se dovrebbe essere una transizione graduale o dovrebbe iniziare lentamente, accelera verso la fine. Dai un'occhiata alla seguente sintassi per applicare la transizione.
Sintassi
var tweenObject = new Fx.Tween(tweenElement, {
transition: 'quad:in'
});La tabella seguente descrive i diversi tipi di transizioni.
| S.No. | Tipo di transizione e descrizione |
|---|---|
| 1 | Lineare Visualizza una transizione lineare con eventi in, out, in-out |
| 2 | Quad Visualizza una transizione quadratica con eventi in, out, in-out |
| 3 | Cubo Visualizza una transizione cubica con eventi in, out, in-out |
| 4 | Quart Visualizza una transizione quartetica con eventi in, out, in-out |
| 5 | Quint Visualizza una transizione quintica con eventi in, out, in-out |
| 6 | Pow Utilizzato per generare eventi Quad, Cubic, Quart e Quint con eventi in, out, in-out |
| 7 | Expo Visualizza una transizione esponenziale con eventi in, out, in-out |
| 8 | Circ Visualizza una transizione circolare con eventi in, out, in-out |
| 9 | Sine Visualizza una transizione sinusoidale con eventi in, out, in-out |
| 10 | Indietro Rende la transizione indietro, poi tutta avanti con eventi dentro, fuori, dentro-fuori |
| 11 | Rimbalzo Rende la transizione vivace con eventi in, out, in-out |
| 12 | Elastico Transizione curva elastica con eventi in, out, in-out |
Fx.Events fornisce alcune opzioni per aumentare alcuni codici a diversi livelli durante l'effetto di animazione. Ti fornisce il controllo sui tuoi tween e morph. L'opzione fornita da Fx.Events -
onStart - Solleverà il codice da eseguire all'avvio di Fx.
onCancel - Solleverà il codice da eseguire quando l'Fx viene annullato.
onComplete - Solleverà il codice da eseguire quando l'Fx è completato.
onChainComplete - solleverà il codice da eseguire al termine dell'Fx concatenato.
Esempio
Facciamo un esempio in cui ci sono div sulla pagina web. Procediamo applicando i metodi Event ai div. Il primo metodo è il metodo onStart () per evidenziare il div quando il puntatore del mouse entra nell'area div.
Il secondo è il metodo onComplete () che evidenzia il div quando il puntatore del mouse lascia l'area div. E quando il puntatore del mouse entra automaticamente nell'area div, la dimensione del div aumenta di 400 px. Cercheremo di eseguire tutte queste funzionalità utilizzando i metodi Fx.Events. Dai un'occhiata al seguente codice.
<!DOCTYPE html>
<html>
<head>
<style>
#quadin {
width: 100px;
height: 20px;
background-color: #F4D03F;
border: 2px solid #808B96;
}
#quadout {
width: 100px;
height: 20px;
background-color: #F4D03F;
border: 2px solid #808B96;
}
#quadinout {
width: 100px;
height: 20px;
background-color: #F4D03F;
border: 2px solid #808B96;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var enterFunction = function() {
this.start('width', '400px');
}
var leaveFunction = function() {
this.start('width', '200px');
}
window.addEvent('domready', function() {
var quadIn = $('quadin'); var quadOut = $('quadout');
var quadInOut = $('quadinout'); quadIn = new Fx.Tween(quadIn, { link: 'cancel', transition: Fx.Transitions.Quad.easeIn, onStart: function(passes_tween_element){ passes_tween_element.highlight('#C54641'); }, onComplete: function(passes_tween_element){ passes_tween_element.highlight('#E67F0E'); } }); quadOut = new Fx.Tween(quadOut, { link: 'cancel', transition: 'quad:out' }); quadInOut = new Fx.Tween(quadInOut, { link: 'cancel', transition: 'quad:in:out' }); $('quadin').addEvents({
'mouseenter': enterFunction.bind(quadIn),
'mouseleave': leaveFunction.bind(quadIn)
});
$('quadout').addEvents({ 'mouseenter': enterFunction.bind(quadOut), 'mouseleave': leaveFunction.bind(quadOut) }); $('quadinout').addEvents({
'mouseenter': enterFunction.bind(quadInOut),
'mouseleave': leaveFunction.bind(quadInOut)
});
});
</script>
</head>
<body>
<div id = "quadin"> Quad : in</div><br/>
<div id = "quadout"> Quad : out</div><br/>
<div id = "quadinout"> Quad : in-out</div><br/>
</body>
</html>Riceverai il seguente output: