MooTools - Panduan Cepat
MooTools adalah kerangka kerja JavaScript ringan yang berorientasi objek. Bentuk lengkap MooTools adalah Alat Berorientasi Objek Saya. Ini dirilis di bawah Lisensi MIT open-source gratis. Ini adalah salah satu pustaka JavaScript paling populer.
MooTools adalah pustaka JavaScript yang kuat dan ringan. Ini menciptakan interaksi JavaScript yang mudah dalam pengembangan web. Itu juga dapat melakukan banyak hal sebagai ekstensi CSS. MooTools memiliki semua jenis ekstensi bagus, yang memberi Anda kemampuan untuk membuat efek animasi.
Komponen MooTools
MooTools menyertakan sejumlah komponen. Berikut ini adalah kategori komponen yang berbeda -
Core - Kumpulan fungsi utilitas yang dibutuhkan semua komponen lainnya.
More - Koleksi resmi add-on yang memperluas inti dan menyediakan fungsionalitas yang ditingkatkan.
Class - Pustaka dasar untuk pembuatan instance objek kelas.
Natives- Kumpulan penyempurnaan objek asli JavaScript. Pribumi menambahkan fungsionalitas, kompatibilitas, dan metode baru yang menyederhanakan pengkodean.
Element - Berisi sejumlah besar peningkatan dan standardisasi kompatibilitas ke Objek Elemen HTML.
FX - API efek tingkat lanjut yang membantu menganimasikan elemen halaman.
Request - Termasuk antarmuka XHR, Cookie JSON, dan alat khusus pengambilan HTML untuk dieksploitasi oleh pengembang.
Window - Menyediakan antarmuka lintas-browser ke informasi khusus klien, seperti dimensi jendela.
MooTools - Keuntungan
MooTools hadir dengan sejumlah keunggulan dibandingkan JavaScript asli. Keuntungan ini meliputi:
MooTools adalah kerangka kerja yang luas dan modular yang memungkinkan pengembang membuat kombinasi komponen khusus mereka sendiri.
MooTools mengikuti paradigma berorientasi objek dan prinsip KERING (Don't Repeat Yourself).
MooTools menyediakan efek komponen lanjutan, dengan transisi yang dioptimalkan. Ini sebagian besar digunakan untuk pengembang flash.
MooTools menyediakan berbagai peningkatan pada DOM. Ini membantu pengembang untuk menambah, memodifikasi, memilih, dan menghapus elemen DOM. Dan, ini juga mendukung penyimpanan dan pengambilan penyimpanan elemen.
MooTools adalah pustaka JavaScript yang kuat untuk mendesain objek DOM menggunakan paradigma berorientasi objek. Bab ini menjelaskan cara menginstal dan menggunakan pustaka MooTools bersama dengan JavaScript.
Untuk menginstal perpustakaan MooTools, ikuti langkah-langkah yang diberikan di bawah ini -
Langkah 1: Unduh pustaka MooTools Core dan MooTools More
Anda dapat mengunduh versi terbaru Pustaka MooTools Core dan MooTools More dari tautan berikut MooTools-Core dan MooTools-More . Saat Anda mengklik tautan, Anda akan diarahkan ke layar berikut di browser Anda -
Dan,
Klik pada tombol unduh, Anda akan mendapatkan versi terbaru dari perpustakaan MooTools. Untuk tutorial ini, kami menggunakanMooTools-Core-1.6.0.js dan MooTools-More-1.6.0.js perpustakaan.
Langkah 2: Unggah MooTools Core dan perpustakaan Lainnya ke server
Anda sekarang memiliki perpustakaan MooTools di sistem file Anda. Kami harus menyalin pustaka ini ke server (ruang kerja) tempat halaman web aplikasi tersedia. Untuk tutorial ini, kami menggunakanC:\MooTools\workspace\ lokasi direktori.
Oleh karena itu, salin file MooTools-Core-1.6.0.js dan MooTools-More-1.6.0.js file ke lokasi direktori tertentu.
Langkah 3: Tautkan MooTools Core dan pustaka Lainnya ke dalam tag skrip
Perpustakaan JavaScript adalah a .jsmengajukan. Jika Anda menyertakan pustaka ini ke dalam kode JavaScript Anda, sertakan dengan tag skrip sebagai berikut. Lihatlah cuplikan kode berikut.
<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 adalah alat yang dapat digunakan untuk mendesain model berorientasi objek. Mari kita bahas di bab ini contoh sederhana dari perpustakaan MooTools.
Contoh
Di sini kita akan mendesain model bernama Rectangle menggunakan Class. Untuk ini, kita perlu mendeklarasikan properti - Lebar dan Tinggi.
Lihat kode berikut, dan simpan ke 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>Anda akan menerima output berikut -
Keluaran
Pemilih digunakan untuk memilih elemen HTML. Kapanpun Anda ingin membuat halaman web interaktif, Anda perlu memilih beberapa data atau tindakan dari halaman web itu. Pemilih membantu kami menerima data melalui permintaan HTML dari elemen.
Pemilih Dasar ($)
Itu $adalah pemilih dasar di MooTools. Dengan menggunakan ini, Anda dapat memilih elemen DOM berdasarkan ID-nya. Misalnya, Anda memiliki elemen HTML (seperti div) bernamabody_id.
<div id = "body_id">
</div>Jika Anda ingin memilih div ini, gunakan sintaks berikut -
Sintaksis
//selects the element with the ID 'body_id'
$('body_id');getElement ()
getElement () adalah metode yang memperluas pemilih dasar ($). Ini memungkinkan Anda untuk mempersempit pilihan Anda menggunakan ID elemen. getElement () hanya memilih satu elemen dan akan mengembalikan yang pertama jika ada beberapa opsi. Anda juga bisa menggunakan nama kelas untuk mendapatkan kemunculan pertama dari sebuah elemen. Tetapi itu tidak akan mendapatkan berbagai elemen.
Beberapa Pemilih ($$)
$$ digunakan untuk memilih beberapa elemen dan menempatkan beberapa elemen tersebut ke dalam sebuah array. Dari larik itu kita dapat memanipulasi, mengambil, dan menyusun ulang daftar dengan cara yang berbeda. Perhatikan sintaks berikut. Ini mendefinisikan cara memilih semua elemen div dari kumpulan elemen HTML di halaman web.
Sintaksis
<div>
<div>a div</div>
<span id = "id_name">a span</span>
</div>Jika Anda ingin memilih semua div, gunakan sintaks berikut -
Sintaksis
//all divs in the page
$$('div');Jika Anda ingin memilih beberapa div dengan nama id yang sama, gunakan sintaks berikut -
Sintaksis
//selects the element with the id 'id_name' and all divs
$$('#id_name', 'div');getElements ()
Metode getElements () mirip dengan metode getElement (). Metode ini mengembalikan semua elemen sesuai dengan kriteria. Anda bisa menggunakan keduanyaelement name (a, div, input) untuk memilih koleksi tersebut atau elemen tertentu class name untuk memilih kumpulan elemen dari kelas yang sama.
Sertakan dan kecualikan hasil dengan operator
MooTools mendukung berbagai operator yang digunakan untuk menyempurnakan pilihan Anda. Anda bisa menggunakan semua operator ini dalam metode getElements (). Masing-masing operator ini dapat digunakan untuk memilih elemen masukan berdasarkan nama.
Perhatikan tabel berikut. Ini mendefinisikan operator berbeda yang didukung MooTools.
| Operator | Deskripsi | Contoh |
|---|---|---|
| = (sama dengan) | Pilih elemen masukan dengan namanya. | $ ('body_wrap'). getElements ('input [name = phone_number]'); |
| ^ = (dimulai dengan) | Pilih elemen masukan dengan membandingkan huruf awal namanya. | $ ('body_wrap'). getElements ('masukan [nama ^ = telepon]'); |
| $ = (diakhiri dengan) | Pilih elemen masukan dengan membandingkan huruf akhir namanya. | $ ('body_wrap'). getElements ('masukan [nama $ = angka]'); |
| ! = (tidak sama dengan) | Batalkan pilihan elemen input dengan nama is. | $ ('body_wrap'). getElements ('masukan [nama! = alamat]'); |
| * = (Berisi) | Pilih elemen masukan yang berisi pola huruf tertentu. | $ ('body_wrap'). getElements ('masukan [nama * = telepon]'); |
Penyeleksi berdasarkan urutan elemen
Pemilih MooTools mengikuti urutan tertentu dalam pemilihan elemen. Para penyeleksi terutama mengikuti dua perintah; satu genap dan yang lainnya ganjil.
Note - Pemilih ini dimulai dari 0, jadi elemen pertama genap.
Bahkan ketertiban
Dalam urutan ini, pemilih memilih elemen yang ditempatkan dalam urutan yang rata. Gunakan sintaks berikut untuk memilih semua div genap di halaman HTML Anda.
Syntax
// selects all even divs
$$('div:even');Urutan aneh
Dalam urutan ini, pemilih memilih elemen yang ditempatkan dalam urutan ganjil. Gunakan sintaks berikut untuk memilih semua div ganjil di halaman HTML Anda.
Syntax
// selects all odd divs
$$('div:odd');Example
Contoh berikut menunjukkan cara kerja selektor. Misalkan, ada kotak teks dan daftar teknologi di halaman web. Jika Anda memilih satu teknologi dari daftar dengan memasukkan nama itu ke dalam kotak teks, maka daftar tersebut akan menampilkan hasil yang difilter berdasarkan masukan Anda. Ini dimungkinkan dengan menggunakan pemilih MooTools. Dengan menggunakan selector, kita bisa menambahkan event ke textbox. Pendengar acara akan memilih data dari kotak teks dan memeriksanya dari daftar. Jika ada di dalam daftar, maka daftar tersebut menunjukkan hasil yang difilter. Perhatikan kode berikut.
<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>Anda akan menerima output berikut -
Output
MooTools adalah pustaka JavaScript ringan yang membantu membuat halaman web dinamis. Saat mengelola elemen DOM, kita perlu memilih semua elemen DOM dari sebuah halaman web. Koleksi ini dapat ditangani dengan menggunakan array.
Bab ini menjelaskan tentang cara menggunakan array untuk mengelola elemen DOM.
each () metode
Ini adalah metode dasar untuk menangani array. Ini mengulangi semua elemen melalui daftar. Anda dapat menggunakan metode ini berdasarkan kebutuhan. Misalnya, jika Anda ingin memilih semua elemen div halaman, ikuti skrip yang diberikan di bawah ini. Lihatlah halaman html berikut yang berisi beberapa div.
<div>One</div>
<div>Two</div>Anda dapat menggunakan skrip berikut untuk memilih each individual divdari kumpulan div di halaman. Skrip akan memilih setiap div dan meneruskan peringatan. Simak skrip berikut ini.
Naskah
$$('div').each(function() {
alert('a div');
});Anda dapat menggunakan sintaks berikut untuk menangani contoh yang diberikan di atas. Lihat halaman HTML.
Naskah
<div id = "body_div">
<div>One</div>
<div>Two</div>
</div>Di sini, dua div diapit dengan div lain - body_div. Saat mendesain skrip, kita harus memilih hanya satu div eksternal. Nanti, dengan menggunakan metode getElements (), kita bisa memilih dua div internal. Simak skrip berikut ini.
Naskah
$('body_wrap').getElements('div').each(function() {
alert('a div');
});Anda dapat menggunakan metode berbeda untuk menulis skrip di atas sebagai berikut. Di sini, kami menggunakan variabel terpisah untuk memilihbody_div.
Naskah
var myArray = $('body_div').getElements('div');
myArray.each(function() {
alert('a div');
});Pilih Elemen Spesifik dari Array
Saat memanipulasi larik elemen, kita dapat memilih elemen tertentu dari larik elemen. Berikut ini adalah beberapa metode penting yang digunakan untuk memanipulasi elemen DOM -
getLast ()
Metode ini mengembalikan elemen terakhir dari sebuah array. Mari kita siapkan array untuk memahami metode ini.
var myArray = $('body_div').getElements('div');Sekarang kita bisa mengambil elemen terakhir di dalam array.
var lastElement = myArray.getLast();Variabel lastElement sekarang mewakili elemen terakhir dalam myArray.
getRandom ()
Metode getRandom () bekerja dengan cara yang mirip seperti metode getLast (), tetapi akan mendapatkan elemen acak dari array.
Syntax
var randomElement = myArray.getRandom();Variabel randomElement sekarang mewakili elemen yang dipilih secara acak di dalamnya myArray.
Salinan Array
MooTools menyediakan cara untuk menyalin array menggunakan fungsi $ A (). Berikut ini adalah sintaks untuk fungsi $ A ().
Sintaksis
var <variable-name> = $A ( <array-variable>);Tambahkan Elemen ke Array
Ada dua metode berbeda untuk menambahkan elemen ke dalam array. Metode pertama memungkinkan Anda menambahkan elemen satu per satu atau Anda dapat menggabungkan dua array berbeda menjadi satu.
termasuk ()
include () metode digunakan untuk menambahkan item ke dalam array elemen DOM. Misalnya, pertimbangkan kode HTML berikut yang berisi dua elemen div dan satu elemen span di bawah div tunggal dan tertutup -body_div.
Syntax
<div id = "body_div">
<div>one</div>
<div>two</div>
<span id = "add_to_array">add to array</span>
</div>Dalam kode di atas, jika kita memanggil metode getElements ('div') pada body_divelemen, kita mendapatkan satu dan dua div tetapi elemen span tidak disertakan ke dalam array. Jika Anda ingin menambahkannya ke dalam array yang Anda panggilinclude()metode pada variabel array. Simak skrip berikut ini.
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);Sekarang, myArray berisi div dan elemen span.
menggabungkan()
Metode ini digunakan untuk menggabungkan elemen-elemen satu larik dengan unsur-unsur larik lainnya. Ini juga menangani konten duplikat. Misalnya, pertimbangkan kode HTML berikut yang berisi dua elemen div dan dua elemen span di bawah div tunggal dan tertutup -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>Dalam kode di atas, panggil metode getElements ('div') pada body_divelemen. Anda mendapatkan satu dan dua div. Panggil metode $$ ('. Class_name') memilih dua elemen rentang. Anda sekarang memiliki satu larik elemen div dan larik elemen span lainnya. Jika Anda ingin menggabungkan dua array ini, maka Anda dapat menggunakan metode penggabungan (). Simak skrip berikut ini.
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 );Sekarang, myArray berisi semua elemen variabel newArrayToArray.
Example
Ini akan membantu Anda memahami array di MooTools. Misalkan, kami menerapkan warna latar belakang ke array elemen yang berisi div dan span. Perhatikan kode berikut. Di sini, larik elemen kedua tidak termasuk dalam id atau grup kelas apa pun dan itulah sebabnya ia tidak mencerminkan warna latar belakang apa pun. Perhatikan kode berikut.
<!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>Anda akan menerima output berikut -
Output
Fungsi di MooTools adalah konsep dari JavaScript. Kami sudah tahu cara menggunakan fungsi di JavaScript. Umumnya, lebih baik menyimpan fungsi di luar badan halaman dalam tag skrip. Di MooTools, kami mengikuti pola yang sama. Di sini, Anda dapat mendesain fungsi Anda sendiri sesuai dengan kebutuhan. Sekarang kita harus memanggil semua fungsi yang ditentukan pengguna didomready fungsi.
Perhatikan sintaks berikut untuk memahami cara menggunakan fungsi umum di MooTools.
Sintaksis
<script type = "text/javascript">
/*
Function definitions go here
*/
window.addEvent('domready', function() {
/* Calls to functions go here */
});
</script>Struktur dasar
Ada beberapa cara dasar untuk mendefinisikan suatu fungsi di MooTools. Tidak ada perbedaan antara sintaks fungsi JavaScript dan MooTools, tetapi perbedaannya terletak pada pemanggilan suatu fungsi. Mari kita ambil contoh kecil yang mendefinisikan sebuah fungsi bernama demo_function. Perhatikan kode berikut.
Contoh
<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>Anda akan menerima output berikut -
Keluaran
Fungsi Parameter Tunggal
Anda juga dapat membuat fungsi yang menerima parameter. Untuk menggunakan parameter dengan fungsi, Anda perlu menambahkan nama variabel di dalam tanda kurung. Setelah Anda memberikannya, variabel tersedia di dalam untuk digunakan. Mari kita ambil contoh yang mendefinisikan fungsi yang mengambil satu parameter dan mencetak pesan bersama dengan parameternya.
Perhatikan kode berikut.
Contoh
<!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>Anda akan menerima output berikut -
Keluaran
Mengembalikan Nilai
Kapan pun Anda ingin menggunakan hasil dari satu fungsi sebagai input untuk variabel lain, Anda harus menggunakan nilai yang dikembalikan untuk fungsi itu. Anda dapat menggunakan kata kunci return untuk mengembalikan nilai dari fungsi. Mari kita ambil contoh yang mendefinisikan fungsi yang akan menerima dua nilai parameter dan mengembalikan jumlah dari dua parameter tersebut. Perhatikan kode berikut.
Contoh
<!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>Anda akan menerima output berikut -
Keluaran
Seperti Selectors, Penanganan Acara juga merupakan konsep penting dari MooTools. Konsep ini digunakan untuk membuat acara dan tindakan untuk acara. Kita juga perlu memahami tindakan dan efeknya. Mari kita coba beberapa peristiwa dalam bab ini.
Satu klik kiri
Peristiwa paling umum dalam pengembangan web adalah Klik Kiri Tunggal. Misalnya, Hyperlink mengenali peristiwa klik tunggal dan membawa Anda ke elemen DOM lain. Langkah pertama adalah menambahkan event klik ke elemen DOM. Mari kita ambil contoh yang menambahkan event klik ke tombol. Ketika Anda mengklik tombol itu, itu akan menampilkan pesan.
Contoh
<!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>Anda akan menerima output berikut -
Keluaran
Ketika Anda mengklik tombol, Anda akan mendapatkan pesan berikut -
This button element recognizes the click eventMouse Enter dan Mouse Leave
Mouse Enter dan Mouse Leave adalah event paling umum dalam penanganan event. Tindakan tersebut diterapkan berdasarkan posisi mouse. Jika posisi mouse adalah ENTER ke dalam elemen DOM, maka itu akan menerapkan satu tindakan. Jika meninggalkan area elemen DOM, maka itu akan menerapkan tindakan lain.
Mari kita ambil contoh yang menjelaskan bagaimana peristiwa Enter mouse bekerja. Perhatikan kode berikut.
Contoh
<!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>Anda akan menerima output berikut -
Keluaran
Jika Anda tetap mengarahkan penunjuk mouse ke tombol tersebut, Anda akan mendapatkan pesan berikut.
Recognizes the mouse enter eventMari kita ambil contoh yang menjelaskan cara kerja acara Mouse Leave. Perhatikan kode berikut.
Contoh
<!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>Anda akan menerima output berikut -
Keluaran
Jika Anda tetap mengarahkan penunjuk mouse ke tombol tersebut, Anda akan mendapatkan pesan berikut.
Recognizes the mouse leave eventHapus Acara
Metode ini digunakan untuk menghapus acara. Menghapus acara semudah menambahkan acara dan mengikuti struktur yang sama. Perhatikan sintaks berikut.
Sintaksis
//works just like the previous examplesuse .removeEvent method
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);Penekanan tombol sebagai Input
MooTools dapat mengenali tindakan Anda - jenis masukan yang Anda berikan melalui elemen DOM. Dengan menggunakankeydown fungsi, Anda dapat membaca setiap kunci dari elemen DOM tipe masukan.
Mari kita ambil contoh di mana, ada elemen area teks. Sekarang mari kita tambahkan peristiwa keydown ke area teks yang setiap kali area teks mengenali keystore apa pun, ia akan segera merespons dengan pesan peringatan. Perhatikan kode berikut.
Contoh
<!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>Anda akan menerima output berikut -
Keluaran
Cobalah untuk memasukkan sesuatu ke dalam area teks. Anda akan menemukan kotak peringatan bersama dengan pesan berikut.
This textarea can now recognize keystroke valueCoba tambahkan beberapa teks ke contoh yang sama yang membaca nilai dari textarea saat Anda memasukkannya. Dimungkinkan dengan menggunakanevent.keyberfungsi dengan acara tersebut. Perhatikan kode berikut.
Contoh
<!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>Anda akan menerima output berikut -
Keluaran
Cobalah untuk memasukkan teks di area teks. Anda akan diarahkan ke kotak peringatan bersama dengan nilai yang Anda masukkan ke dalam area teks.
Kita sudah tahu bahwa setiap halaman HTML dirancang menggunakan elemen DOM. Menggunakan MooTools Anda dapat memanipulasi elemen DOM yang berarti Anda dapat membuat, menghapus, dan mengubah gaya elemen DOM.
Metode dasar
Berikut ini adalah metode dasar yang menangkap dan membantu memodifikasi properti elemen DOM.
Dapatkan()
Metode ini digunakan untuk mengambil properti elemen seperti src, nilai, nama, dll. Pernyataan berikut adalah sintaks dari metode get.
Syntax
//this will return the html tag (div, a, span...) of the element
$('id_name').get('tag');Anda akan menerima daftar properti berikut saat mengambil elemen menggunakan metode get ().
- id
- name
- value
- href
- src
- class (will return all classes if the element)
- text (the text content of an element)
set()
This method is used to set a value to a variable. This is useful when combined with events and lets you change values. The following statement is the syntax of the set method.
Syntax
//this will set the href of #id_name to "http://www.google.com"
$('id_name').set('href', 'http://www.google.com');erase()
This method helps you erase the value of an elements property. You need to choose which property you want to erase from the element. The following statement is the syntax of the erase() method.
Syntax
//this will erase the href value of #id_name
$('id_name').erase('href');Moving Elements
Moving element means moving an existing element from one position to another position around the page. You can use the inject() method to move an element around the page. Let us take an example wherein, one HTML page contains three div elements which contains the content A, B, and C respectively in an order. Take a look at the following code.
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 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>You will receive the following output −
Output
Now, using the inject() method in MooTools, we can change the order from ABC to ACB. This means, we need to place elementB after elementC and place the elementC before elementB. Take a look at the following code.
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 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>You will receive the following output −
Output
Create New Element
MooTools provides an option to create any type of DOM element and insert it into the HTML page. But, we have to maintain a proper syntax for every element. Let us take an example wherein, the following code snippet is the syntax for creating an (anchor) element.
Syntax
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'
}
});Let us take an example that will create an anchor element using MooTools library. Take a look at the following code.
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 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>You will receive the following output −
Output
MooTools provides some Special methods to set and get style property values for DOM elements. We use different style properties such as width, height, background color, font weight, font color, border, etc. By setting and getting different values to these style properties, we can present HTML elements in different styles.
Set and Get Style Properties
MooTools library contains different methods which are used to set or get the value of a particular style property or multiple style properties.
setStyle()
This method allows you to set the value for a single property of DOM element. This method will work on the selector object of a particular DOM element. Let us take an example that provides background color for div element. Take a look at the following code.
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>You will receive the following output −
Output
getStyle()
getStyle() method is to retrieve the value of a style property of an element. Let us take an example that retrieves the background-color of a div named body_wrap. Take a look at the following syntax.
Syntax
//first, set up your variable to hold the style value
var styleValue = $('body_wrap').getStyle('background-color');Multiple Style Properties
MooTools library contains different methods used to set or get the value of a particular style property or multiple style properties.
setStyle()
If you want to set multiple style properties on a single element or an array of elements then you have to use the setStyle() method. Take a look at the following syntax of the setStyle() method.
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>You will receive the following output −
Output
Try these buttons on the web page, you can see the difference with the div size.
MooTools can filter the user input and it can easily recognize the type of input. The basic input types are Number and String.
Number Functions
Let us discuss a few methods that will check if an input value is a number or not. These methods will also help you manipulate the number input.
toInt()
This method converts any input value to the integer. You can call it on a variable and it will try to give the regular integer from whatever the variable contains.
Let us take an example that design a web page that contain a textbox and a button named TO INT. The button will check and return the value that you entered into the textbox as real integer. If the value is not an integer, then it will return the NaN symbol. Take a look at the following code.
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>Anda akan menerima output berikut -
Output
Coba nilai yang berbeda dan ubah menjadi bilangan bulat nyata.
jenis()
Metode ini memeriksa nilai variabel yang Anda teruskan dan mengembalikan jenis nilai tersebut.
Mari kita ambil contoh di mana, kita mendesain halaman web dan memeriksa apakah nilai inputnya adalah Angka, String atau Boolean. Perhatikan kode berikut.
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>Anda akan menerima output berikut -
Output
Coba nilai yang berbeda dan periksa jenisnya.
membatasi()
Metode limit () digunakan untuk mengatur nilai batas bawah dan batas atas untuk nomor tertentu. Angka tidak boleh melebihi nilai batas atas. Jika melebihi, maka angkanya diubah menjadi nilai batas atas. Proses ini juga sama dengan batas bawah.
Mari kita ambil contoh yang menyediakan kotak teks untuk memasukkan nilai, berikan tombol untuk memeriksa batas nilai itu. Batas default yang kami gunakan dalam contoh adalah 0 hingga 255. Perhatikan kode berikut.
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>Anda akan menerima output berikut -
Output
Coba nomor berbeda untuk memeriksa batasnya.
rgbToHex ()
Metode rgbToHex () adalah mengonversi dari nilai merah, hijau, dan biru ke nilai Heksadesimal. Fungsi ini berhubungan dengan angka dan termasuk dalam koleksi Array. Mari kita ambil contoh di mana, kita akan mendesain halaman web untuk memasukkan nilai individual untuk Merah, Hijau, dan Biru. Sediakan tombol untuk mengubah ketiganya menjadi nilai heksadesimal. Perhatikan kode berikut.
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>Anda akan menerima output berikut -
Output
Coba nilai Merah, Hijau, dan Biru yang berbeda dan temukan nilai heksadesimalnya.
Fungsi String
Mari kita bahas beberapa metode kelas String yang dapat memanipulasi nilai input String. Sebelum kita melanjutkan, mari kita lihat sintaks berikut tentang cara memanggil fungsi string.
Tali
var my_variable = "Heres some text";
var result_of_function = my_variable.someStringFunction();Atau,
var result_of_function = "Heres some text".someStringFunction();memangkas()
Metode ini digunakan untuk menghilangkan spasi dari posisi depan dan posisi akhir dari string yang diberikan. Itu tidak menyentuh ruang putih di dalam string. Perhatikan kode berikut.
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>Anda akan menerima output berikut -
Output
Dalam kotak peringatan di atas, Anda dapat menemukan perbedaan dalam String sebelum memanggil metode trim () dan setelah memanggil metode trim ().
bersih()
Metode ini digunakan untuk menghapus semua spasi putih dari string yang diberikan dan mempertahankan spasi tunggal di antara kata. Perhatikan kode berikut.
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>Anda akan menerima output berikut -
Output
mengandung()
Metode ini digunakan untuk mencari sub-string dalam string tertentu. Jika string yang diberikan berisi string pencarian, itu mengembalikan benar jika tidak mengembalikan salah. Perhatikan kode berikut.
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>Anda akan menerima output berikut -
Output
pengganti()
Metode ini digunakan untuk memasukkan string input ke dalam string utama. Perhatikan kode berikut.
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>Anda akan menerima output berikut -
Output
Masukkan teks di tiga kotak teks dan klik tombol substitusi string, maka Anda akan melihat string substitusi.
MooTools menyediakan fitur luar biasa yang membantu Anda menambahkan fungsi seret dan lepas ke elemen halaman web Anda. Kita bisa melakukan ini dengan membuat baru kita sendiriDrag.Moveobyek. Dengan menggunakan objek ini, Anda dapat menentukan opsi dan acara Anda. Kelas Drag dan Drag. Pindah berasal dari perpustakaan MooTools More.
Mari kita bahas opsi dan event dari objek Drag.Move.
Drag.Move
Drag.Move adalah Object yang digunakan untuk menambahkan fitur Drag and Drop ke elemen html. Drag.Move memperluas Drag, sehingga kita dapat menggunakan semua Options dan Events dari kelas Drag dengan objek Drag.Move. Lihatlah sintaks berikut dan pahami cara menggunakan objek Drag.Move.
Sintaksis
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'));
}
});Drag.Move Options
Drag.Move menyediakan opsi berikut untuk mempertahankan elemen html dengan fitur Drag and Drop -
droppable - Ini membantu Anda menyetel pemilih elemen yang dapat dijatuhkan (elemen yang mendaftar pada kejadian terkait penurunan).
container - Ini membantu Anda menyetel wadah elemen tarik (mempertahankan elemen di dalamnya).
snap- Ini membantu Anda menyetel berapa piksel yang harus ditarik pengguna sebelum elemen yang dapat diseret mulai menyeret. Standarnya adalah 6, dan Anda dapat mengaturnya ke sejumlah variabel yang mewakili angka.
handle- Ini membantu Anda menambahkan pegangan ke elemen yang dapat diseret. Tangani menjadi satu-satunya elemen yang akan menerima ambil.
Lihatlah sintaks berikut untuk bagaimana dan di mana mendefinisikan elemen droppable dan container, snap, dan handle.
Sintaksis
//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
});Seret. Pindahkan acara
Peristiwa Drag.Move menyediakan fungsi berbeda yang dapat digunakan di berbagai tingkat tindakan. Misalnya, saat Anda mulai menarik atau melepas objek, setiap peristiwa Drag.Move akan meneruskan elemen yang diseret atau elemen yang dijatuhkan sebagai parameter.
Berikut ini adalah acara yang didukung -
onStart ()
Ini menimbulkan peristiwa di awal tarik. Jika Anda menyetel jentikan panjang, peristiwa ini tidak akan naik sampai mouse berada di kejauhan. Perhatikan sintaks berikut.
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 ()
Ini menimbulkan acara terus menerus saat Anda menyeret elemen. Perhatikan sintaks berikut.
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 ()
Ini menimbulkan peristiwa ketika Anda menjatuhkan elemen yang dapat diseret ke dalam elemen yang dapat dijatuhkan. Perhatikan sintaks berikut.
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
}
});sedang cuti()
Ini menimbulkan peristiwa saat elemen yang dapat diseret meninggalkan batas elemen yang dapat dijatuhkan. Perhatikan sintaks berikut.
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 ()
Ini muncul saat elemen yang dapat diseret memasuki area elemen yang dapat dijatuhkan. Perhatikan sintaks berikut.
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 ()
Ini menimbulkan suatu peristiwa. onComplete mengacu pada saat Anda menjatuhkan droppable, dan ini akan meningkatkan apakah Anda mendarat di droppable atau tidak. Perhatikan sintaks berikut.
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
}
});Mari kita ambil contoh yang akan mengeksplorasi semua fitur yang dijelaskan dalam bab ini. Fitur-fiturnya adalah - Drag, Drag.Move, onEnter, onLeave, onDrop, onStart, onDrag, dan onComplete. Dalam contoh ini, kami menyediakan satu HANDLE, yang dengannya Anda dapat menyeret objek yang dapat diseret ke mana saja ke dalam wadah. Untuk setiap tindakan, ada notifikasi di sisi kiri (ditunjukkan dengan warna biru). Ada area Droppable di dalam wadah. Jika objek Draggable masuk ke area Droppable, maka tiga indikator terakhir diaktifkan. Perhatikan kode berikut.
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>Anda akan menerima output berikut di mana, Anda harus mengklik Tangani dan Tarik. Anda sekarang dapat menemukan indikasi notifikasi di sisi kiri.
Output
MooTools menyediakan cara untuk membuat dan menggunakan Regular Expression (regex). Tutorial ini akan menjelaskan dasar-dasar dan penggunaan regex yang ekstrem.
Mari kita bahas beberapa metode ekspresi reguler.
uji()
test () adalah metode yang digunakan untuk menguji ekspresi reguler dengan string masukan. Meskipun JavaScript sudah menyediakan objek RegExp bersama dengan fungsi test (), MooTools menambahkan lebih banyak fitur ke objek RegExp. Mari kita ambil contoh dan pahami cara menggunakan metode test (). Perhatikan kode berikut.
Contoh
<!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>Anda akan menerima output berikut -
Keluaran
Abaikan Kasus
Ini adalah salah satu situasi penting dalam konsep ekspresi reguler. Jika Anda tidak ingin ekspresi reguler peka huruf besar / kecil, Anda memanggil metode pengujian dengan opsi 'I'. Mari kita ambil contoh yang akan menjelaskan kasus pengabaian dalam ekspresi reguler. Perhatikan kode berikut.
Contoh
<!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>Anda akan menerima output berikut -
Keluaran
Regex dimulai dengan '^'
Regex '^' (cap) adalah operator khusus yang memungkinkan Anda memeriksa ekspresi reguler di awal string tertentu. Operator ini digunakan sebagai awalan ekspresi reguler. Mari kita ambil contoh yang akan menjelaskan cara menggunakan operator ini. Perhatikan kode berikut.
Contoh
<!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>Anda akan menerima output berikut -
Keluaran
Regex diakhiri dengan '$'
Regex '$' (dollar) adalah operator khusus yang memungkinkan Anda memeriksa ekspresi reguler di akhir string tertentu. Operator ini digunakan sebagai akhiran ekspresi reguler. Mari kita ambil contoh yang akan menjelaskan cara menggunakan operator ini. Perhatikan kode berikut.
Contoh
<!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>Anda akan menerima output berikut -
Keluaran
Kelas Karakter
Kelas karakter adalah fase ekspresi reguler yang memungkinkan Anda mencocokkan karakter tertentu (A atau Z) atau rentang karakter (A - Z). Misalnya, Anda ingin menguji apakah salah satu kata foo dan zoo ada dalam string, kelas memungkinkan Anda melakukan ini dengan menempatkan karakter dalam tanda kurung kotak [] dengan ekspresi reguler. Perhatikan kode berikut.
Contoh
<!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>Anda akan menerima output berikut -
Keluaran
escapeRegExp ()
Metode ini digunakan untuk mengabaikan karakter escape dari string tertentu sambil memeriksanya dengan ekspresi reguler. Biasanya, karakter pelarian adalah -
- . * + ? ^ $ { } ( ) | [ ] / \Mari kita ambil contoh di mana, kita memiliki String yang diberikan seperti "[check-this-stuff] itu $900". If you want to take this whole string you have to declare it like this — "\[check\-this\-stuff\] it is \$900 ". Sistem hanya menerima pola ini. Kami tidak menggunakan pola karakter escakpe di MooTools. Kami memiliki metode escapeRegExp () untuk mengabaikan karakter escape. Perhatikan kode berikut.
Contoh
<!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>Anda akan menerima output berikut -
Keluaran
MooTools menyediakan opsi yang mendukung majalah. Dengan ini, ia dapat memanggil suatu fungsi secara berkala dengan frekuensi waktu level yang sama. Mari kita bahas metode dan fitur majalah.
berkala()
Metode ini digunakan untuk menaikkan suatu fungsi secara periodik dengan tingkat frekuensi waktu yang sama. Ada beberapa hal yang perlu kita definisikan di awal. Pertama adalah fungsi yang Anda jalankan secara berkala dan yang kedua adalah nilai numerik yang menunjukkan seberapa sering Anda ingin menaikkan suatu fungsi (nilai numerik diukur dalam milidetik). Mari kita ambil contoh yang menjelaskan bagaimana sebuah fungsi dieksekusi dalam setiap 100 milidetik. Perhatikan kode berikut.
Contoh
<!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>Anda akan menerima output berikut -
Keluaran
Elemen sebagai Variabel Kedua
Fungsi periodikal juga mengikat variabel kedua yang berada di luar fungsi domready (). Anda dapat mengikat elemen sebagai variabel kedua ke dalam fungsi yang ingin Anda tingkatkan secara berkala. Lihat sintaks berikut untuk memahami cara meneruskan variabel.
Sintaksis
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);
});Di sini passingVar adalah variabel elemen yang menyimpan elemen html. Dan variabel itu lolos ke fungsi periodikperiodicalFunctionVar sebagai variabel kedua.
$ Hapus ()
$ Metode ini digunakan untuk menghentikan fungsi periodikal. Metode ini membantu mengatur ulang nilai variabel berkala. Perhatikan sintaks berikut untuk memahami cara menggunakan fungsi $ clear ().
Sintaksis
//we clear the var that we passed the function and periodical to
$clear(periodicalFunctionVar);Slider adalah fungsionalitas yang mencerminkan suatu tindakan saat menggeser kenop atau tombol apa pun. Anda dapat membuat penggeser Anda sendiri sambil menentukan elemen, penangan, opsi, dan peristiwa panggilan balik. Mari kita bahas lebih lanjut tentang slider.
Membuat Slider Baru
Pertama-tama kita harus memilih elemen HTML yang sesuai untuk slider. Saat mempertimbangkan ide dasarnya, elemen div adalah yang paling cocok untuk slider karena menggunakan div, kita dapat membuat elemen anak. Kita sekarang harus mengatur CSS untuk div tersebut untuk membuat struktur div sebagai slider yang sempurna. Di sini, div induk adalah untukslider dan div turunan untuk knob.
Sekarang kita harus menggunakan div ini sebagai slider dengan meneruskan elemen ke konstruktor Slider sebagai sliderObject, dan knobObject. Lihatlah sintaks berikut untuk menentukan slider.
Sintaksis
var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);Kami juga harus menentukan opsi slider.
Opsi Slider
Mari kita bahas beberapa opsi yang digunakan untuk slider.
Jepret
Nilai sekejap bisa berupa nilai benar atau salah. Ini menentukan apakah kenop akan terkunci ke anak tangga saat diseret di sepanjang penggeser. Secara default, ini salah.
Mengimbangi
Ini adalah offset relatif kenop dari posisi awal. Cobalah bereksperimen dengan yang satu ini. Secara default, nilainya 0.
Jarak
Ini adalah opsi yang sangat berguna. Anda dapat mengatur kisaran angka yang akan dipecah langkah-langkahnya. Misalnya, jika rentang Anda adalah [0, 200] dan Anda memiliki 10 langkah, langkah Anda akan terpisah 20 langkah. Rentang ini juga dapat menyertakan angka negatif, misalnya [-10, 0], yang sangat berguna saat membalikkan scroll. Secara default, ini salah.
Roda
Setel roda ke true dan penggulung akan mengenali peristiwa roda mouse. Saat menggunakan roda mouse, Anda mungkin harus menyesuaikan kisaran untuk memastikan bahwa peristiwa roda mouse tidak tampak terbalik (sekali lagi, lebih banyak lagi nanti).
Langkah
Default 100 langkah sangat berguna karena mudah digunakan sebagai persentase. Namun, Anda dapat menetapkan sebanyak mungkin langkah (yang dapat digunakan) sesuai alasannya. Secara default, nilainya 100.
Mode
Mode akan menentukan apakah slider mendaftarkan dirinya sebagai vertikal atau horizontal. Namun, ada beberapa langkah lagi yang diperlukan untuk mengubah dari horizontal dan vertikal. Secara default, ini horizontal.
Acara Callback
Ada tiga peristiwa panggilan balik penting yang disediakan oleh Slider.
dalam perubahan
Setiap perubahan pada langkah saat ini memicu pelaksanaan acara. Lihat contoh yang diberikan di bawah ini untuk melihat kapan dijalankan.
onTick
Setiap perubahan posisi pegangan memicu pelaksanaan acara ini. Lihat contoh yang diberikan di bawah ini untuk melihat apa yang dijalankannya.
onComplete
Kejadian ini dijalankan setiap kali pegangan dilepaskan. Lihat contoh yang diberikan di bawah ini untuk melihat kapan dijalankan.
Contoh
Contoh berikut menjelaskan penggeser horizontal dan vertikal bersama dengan indikator peristiwa. Perhatikan kode berikut.
<!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>Keluaran
Klik pada kenop coklat pada slider horizontal atau vertikal lalu seret, Anda akan menemukan posisi langkah dan indikasi kejadian untuk setiap tindakan.
Sortables adalah fitur lanjutan dalam pengembangan web dan benar-benar dapat membuka opsi dengan desain antarmuka pengguna Anda. Ini juga mencakup fungsi hebat yang disebut "serialize" yang mengelola daftar id elemen dan berguna untuk skrip sisi server.
Membuat Objek Baru yang Dapat Diurutkan
Pertama, kami mengirim daftar item ke variabel. Jika Anda menginginkan sebuah array dari daftar item, maka tetapkan semua koleksi ke variabel. Dan, akhirnya teruskan variabel itu ke konstruktor yang dapat diurutkan. Perhatikan sintaks berikut untuk membuat objek yang dapat diurutkan.
Sintaksis
var sortableListsArray = $$('#listA, #listB');
var sortableLists = new Sortables(sortableListsArray);Berikut ini adalah kode HTML untuk sintaks.
Sintaksis
<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>Opsi Sortable
Sortable menyediakan opsi berbeda untuk menyesuaikan objek yang dapat diurutkan. Mari kita bahas opsinya.
Memaksa
Opsi ini menentukan apakah elemen daftar dapat melompat di antara uls dalam objek yang dapat diurutkan. Misalnya, jika Anda memiliki dua ul dalam objek yang dapat diurutkan, Anda dapat "constrain"daftar item ke ul orang tua mereka dengan mengatur"constrain: trueLihat sintaks berikut untuk menyetel batasan.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
constrain: true //false is default
});Klon
Opsi ini membantu Anda membuat elemen klon di bawah kursor Anda. Ini membantu dalam menyortir elemen daftar. Lihatlah sintaks berikut untuk klon.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
clone: true //false is default
});Menangani
Tangani adalah opsi yang menerima elemen untuk bertindak sebagai gagang seret. Ini berguna kapan pun Anda ingin item daftar Anda dapat dipilih atau Anda ingin tindakan apa pun dalam daftar Anda. Jika Anda tidak memberikan variabel apa pun, itu akan dianggap salah secara default. Lihatlah sintaks berikut untuk menggunakan pegangan.
Syntax
var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
handle: handleElements //false is default
});Kegelapan
Opsi ini memungkinkan Anda menyesuaikan elemen sortir. Jika Anda menggunakan klon, opasitas memengaruhi elemen yang diurutkan.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
opacity: 1 //default is 1
});Kembali
Opsi ini menerima "false" atau opsi Fx apa pun. Jika Anda mengatur opsi Fx dalam pengembalian, itu akan membuat efek untuk elemen yang diurutkan untuk menetap di tempatnya. Lihatlah sintaks berikut untuk kembali.
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
}
});Jepret
Opsi ini memungkinkan Anda melihat berapa piksel yang akan ditarik pengguna mouse sebelum elemen mulai mengikuti.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
snap: 10 //user will have to drag 10 px to start the list sorting
});Acara yang Dapat Diurutkan
Sortable menyediakan acara berikut yang bagus dan lurus ke depan.
onStart - dijalankan saat drag dimulai (setelah snap selesai)
onSort - dijalankan saat item berubah urutan
onComplete - dieksekusi ketika Anda menjatuhkan elemen di tempatnya
Metode yang Dapat Diurutkan
Metode yang dapat diurutkan berikut pada dasarnya adalah fungsi yang termasuk dalam kelas -
melepaskan()
Dengan detach (), Anda dapat "melepaskan" semua pegangan saat ini, membuat seluruh objek daftar tidak dapat diurutkan. Ini berguna untuk menonaktifkan sort.
melampirkan()
Metode ini akan "melampirkan" pegangan ke item penyortiran, berfungsi untuk mengaktifkan penyortiran setelah pelepasan ().
addItems ()
Ini memungkinkan Anda menambahkan item baru ke daftar yang dapat diurutkan. Misalkan Anda memiliki daftar yang dapat diurutkan di mana pengguna dapat menambahkan item baru, setelah Anda menambahkan item baru tersebut, Anda perlu mengaktifkan pengurutan pada item baru tersebut.
removeItems ()
Metode ini memungkinkan Anda menghapus kemampuan pengurutan item dalam daftar yang dapat diurutkan. Ini berguna ketika Anda ingin mengunci item tertentu dalam daftar tertentu dan tidak membiarkannya menyortir dengan yang lain.
addLists ()
Daripada hanya menambahkan item baru ke daftar yang sudah ada, Anda mungkin ingin menambahkan daftar baru ke objek yang dapat diurutkan. Metode ini memungkinkan Anda menambahkan beberapa daftar, membuatnya sangat mudah untuk menambahkan lebih banyak sortable.
removeLists ()
Mari kita hapus daftar dari objek yang dapat diurutkan. Ini berguna ketika Anda ingin mengunci daftar tertentu pada tempatnya. Anda dapat menghapus daftar, membiarkan daftar lainnya masih dalam objek yang dapat diurutkan, tetapi mengunci konten dari daftar yang dihapus.
membuat serial ()
Semua penyortiran itu bagus, tetapi bagaimana jika Anda ingin melakukan sesuatu dengan datanya? .serialize (); akan mengembalikan daftar id item serta urutannya pada daftar. Anda dapat memilih daftar mana untuk mendapatkan data dari dalam objek dengan nomor indeks.
Contoh
Contoh berikut membuat larik elemen div dengan penomoran. Kemudian, atur ulang dengan tindakan klik, seret, dan lepas menggunakan penunjuk mouse. Perhatikan kode berikut.
<!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>Anda akan menerima output berikut -
Keluaran
Accordion adalah plugin paling populer yang disediakan MooTools. Ini membantu dalam menyembunyikan dan mengungkapkan data. Mari kita bahas lebih lanjut.
Membuat akordeon baru
Elemen dasar yang dibutuhkan akordeon adalah pasangan matikan dan isinya. Mari kita buat pasangan judul dan konten 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>Perhatikan sintaks berikut untuk memahami cara membuat akordeon berdasarkan struktur HTML di atas.
Sintaksis
var toggles = $$('.togglers'); var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content);Contoh
Mari kita ambil contoh yang mendefinisikan fungsi dasar Accordion. Perhatikan kode berikut.
<!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>Anda akan menerima output berikut -
Keluaran
Opsi Akordeon
Accordion menyediakan fitur luar biasa. Fitur-fitur ini membantu dalam menyesuaikan opsi untuk memberikan keluaran yang disesuaikan.
layar
Opsi ini menentukan elemen mana yang ditampilkan saat pemuatan halaman. Defaultnya disetel ke 0, jadi elemen pertama ditampilkan. Untuk mengatur elemen lain, cukup masukkan bilangan bulat lain yang sesuai dengan indeksnya. Tidak seperti "show", tampilan akan mentransisikan elemen menjadi terbuka.
Syntax
var AccordionObject = new Accordion(toggles, content {
display: 0 //default is 0
});menunjukkan
Sama seperti "display", show menentukan elemen mana yang akan dibuka saat halaman dimuat, tetapi alih-alih transisi, "show" hanya akan membuat konten ditampilkan saat dimuat tanpa transisi apa pun.
Syntax
var AccordionObject = new Accordion(toggles, content {
show: 0 //default is 0
});tinggi
Jika disetel ke true, efek transisi ketinggian akan berlangsung saat beralih di antara elemen yang ditampilkan .. Ini adalah setelan akordeon standar yang Anda lihat di atas.
Syntax
var AccordionObject = new Accordion(toggles, content {
height: true //default is true
});lebar
Ini bekerja sama seperti heightpilihan. Namun, alih-alih melakukan transisi ketinggian untuk menampilkan konten, ini membantu dalam transisi lebar. Jika Anda menggunakan "lebar" dengan penyetelan standar, seperti yang kami gunakan di atas, maka jarak antar toggle judul akan tetap sama, berdasarkan tinggi konten. Div "konten" kemudian akan beralih dari kiri ke kanan untuk ditampilkan di ruang itu.
Syntax
var AccordionObject = new Accordion(toggles, content {
width: false //default is false
});kegelapan
Opsi ini menentukan apakah akan menampilkan efek transisi opasitas atau tidak saat Anda menyembunyikan atau menampilkan beberapa konten. Karena kami menggunakan opsi default di atas, Anda dapat melihat efeknya di sana.
Syntax
var AccordionObject = new Accordion(toggles, content {
opacity: true //default is true
});fixedHeight
Untuk menyetel tinggi tetap, Anda perlu memperbaiki bilangan bulat (misalnya, Anda dapat meletakkan 100 untuk konten dengan tinggi 100 piksel). Ini harus digunakan dengan beberapa jenis properti CSS overflow jika Anda berencana memiliki ketinggian tetap yang lebih kecil dari tinggi alami konten.
Syntax
var AccordionObject = new Accordion(toggles, content {
fixedHeight: false //default is false
});fixedWidth
Sama seperti "fixedHeight" di atas, ini akan menyetel lebar jika Anda memberikan opsi ini bilangan bulat.
Syntax
var AccordionObject = new Accordion(toggles, content {
fixedWidth: false //default is false
});selalu sembunyi
Opsi ini memungkinkan Anda menambahkan kontrol sakelar ke judul. Dengan set ini ke true, ketika Anda mengklik judul konten terbuka, elemen konten akan menutup secara otomatis tanpa membuka yang lain. Anda bisa melihat eksekusinya pada contoh berikut.
Syntax
var AccordionObject = new Accordion(toggles, content {
alwaysHide: false //default is false
});Acara Akordeon
Peristiwa ini memungkinkan Anda membuat fungsionalitas untuk setiap tindakan Accordion.
onActive
Ini akan dijalankan ketika Anda membuka sebuah elemen. Ini akan melewati elemen kontrol sakelar dan elemen konten yang dibuka dan juga parameter.
Syntax
var AccordionObject = new Accordion(toggles, content {
onActive: function(toggler, element) {
toggler.highlight('#76C83D'); //green
element.highlight('#76C83D');
}
});onBackground
Ini dijalankan ketika sebuah elemen mulai bersembunyi dan meneruskan semua elemen lain yang menutup, tetapi tidak terbuka.
Syntax
var AccordionObject = new Accordion(toggles, content {
onBackground: function(toggler, element) {
toggler.highlight('#DC4F4D'); //red
element.highlight('#DC4F4D');
}
});onComplete
Ini adalah acara onComplete standar Anda. Ini melewati variabel yang berisi elemen konten.
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');
}
});Metode Akordeon
Metode ini membantu Anda membuat dan memanipulasi Bagian Akordeon.
addSection ()
Dengan metode ini, Anda dapat menambahkan bagian (pasangan elemen toggle / content). Ini berfungsi seperti banyak metode lain yang telah kita lihat. Pertama rujuk ke objek accordion, gunakan .addSection, lalu Anda dapat memanggil id judul, id konten, dan terakhir nyatakan posisi yang Anda inginkan untuk memunculkan konten baru (0 adalah tempat pertama).
Syntax
AccordionObject.addSection('togglersID', 'elementsID', 2);Note- Saat Anda menambahkan bagian seperti ini, meskipun akan muncul di tempat indeks 2, indeks sebenarnya akan menjadi +1 indeks terakhir. Jadi jika Anda memiliki 5 item dalam array Anda (0-4) dan Anda menambahkan 6 th , indeksnya akan menjadi 5 terlepas dari di mana Anda menambahkannya dengan .addSection ();
tampilan ()
Ini memungkinkan Anda membuka elemen tertentu. Anda dapat memilih elemen dengan indeksnya (jadi jika Anda telah menambahkan pasangan elemen dan Anda ingin menampilkannya, Anda akan memiliki indeks yang berbeda di sini daripada yang akan Anda gunakan di atas.
Syntax
AccordionObject.display(5); //would display the newly added elementExample
Contoh berikut menjelaskan fitur Accordion dengan beberapa efek. Perhatikan kode berikut.
<!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
Klik pada setiap bagian Toggle, maka Anda akan menemukan data tersembunyi dan indikator acara untuk setiap tindakan.
MooTools menyediakan keterangan alat yang berbeda untuk merancang gaya dan efek khusus. Di bab ini, kita akan mempelajari berbagai opsi dan kejadian tooltips, serta beberapa alat yang akan membantu Anda menambah atau menghapus tooltips dari elemen.
Membuat Tooltip Baru
Membuat tooltip sangat sederhana. Pertama, kita harus membuat elemen tempat kita akan memasang tooltip. Mari kita ambil contoh yang membuat tag anchor dan menambahkannya ke kelas Tips di konstruktor. Perhatikan kode berikut.
<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>Lihat kode yang digunakan untuk membuat tooltip.
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);Contoh
Contoh berikut menjelaskan ide dasar Tooltips. Perhatikan kode berikut.
<!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>Anda akan menerima output berikut -
Keluaran
Opsi Tooltip
Hanya ada lima opsi dalam Tip dan semuanya cukup jelas.
showDelay
Bilangan bulat yang diukur dalam milidetik, ini akan menentukan penundaan sebelum tooltip ditampilkan setelah pengguna mengarahkan mouse ke elemen. Defaultnya disetel ke 100.
hideDelay
Sama seperti showDelay di atas, bilangan bulat ini (juga diukur dalam milidetik) menentukan berapa lama menunggu sebelum menyembunyikan tip setelah pengguna meninggalkan elemen. Defaultnya disetel ke 100.
nama kelas
Ini memungkinkan Anda menyetel nama kelas untuk tooltip wrap. Defaultnya disetel ke Null.
Mengimbangi
Ini menentukan seberapa jauh dari elemen tooltip akan muncul. 'x' mengacu pada offset kanan, di mana 'y' adalah offset bawah (keduanya relatif terhadap kursor JIKA opsi 'tetap' disetel ke false, jika tidak offset relatif terhadap elemen asli). Default-nya adalah x: 16, y: 16
Tetap
Ini mengatur apakah tooltip akan mengikuti mouse Anda jika Anda bergerak di sekitar elemen. Jika Anda menyetelnya ke true, tooltip tidak akan bergerak saat Anda menggerakkan kursor, tetapi akan tetap sesuai dengan elemen aslinya. Defaultnya disetel ke false.
Peristiwa Tooltip
Peristiwa tooltip tetap sederhana, seperti yang lainnya di kelas ini. Ada dua acara - onShow dan onHide, dan berfungsi seperti yang Anda harapkan.
sedang tampil()
Acara ini dijalankan saat tooltip muncul. Jika Anda menyetel penundaan, acara ini tidak akan dijalankan hingga penundaan selesai.
onHide ()
Tooltip bersembunyi dengan pelaksanaan acara ini. Jika ada penundaan, acara ini tidak akan dijalankan hingga penundaan selesai.
Metode Tooltip
Ada dua metode untuk tooltips - pasang dan lepas. Ini memungkinkan Anda menargetkan elemen tertentu dan menambahkannya ke objek tooltip (dan karenanya, mewarisi semua setelan dalam instance kelas tersebut) atau melepaskan elemen tertentu.
melampirkan()
Untuk melampirkan elemen baru ke objek tooltip, cukup nyatakan objek tip, tack on .attach () ;, dan terakhir tempatkan pemilih elemen di dalam tanda kurung ().
Syntax
toolTips.attach('#tooltipID3');dettach ()
Metode ini berfungsi seperti metode .attach, tetapi hasilnya benar-benar sebaliknya. Pertama, nyatakan objek tip, lalu tambahkan .dettach (), dan terakhir tempatkan pemilih elemen Anda di dalam ().
Syntax
toolTips.dettach('#tooltipID3');Example
Mari kita ambil contoh yang menjelaskan tooltip. Perhatikan kode berikut.
<!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>Anda akan menerima output berikut -
Output
Konten bertab berarti konten yang ada di area tab dan konten tersebut terkait dengan item daftar. Setiap kali kami menerapkan tindakan sepertihover atau click ke item daftar, reaksi langsung akan membuat efek pada konten tab.
Mari kita bahas lebih lanjut tentang tab.
Membuat Tab Sederhana
Membuat tab menu sederhana membantu Anda menjelajahi informasi tambahan saat Anda mengarahkan kursor ke item daftar. Pertama, buat daftar tidak berurutan dengan item, lalu buat div, masing-masing sesuai dengan satu item daftar. Mari kita lihat kode HTML berikut.
Naskah
<!-- 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>Izinkan kami memberikan beberapa dukungan dasar untuk kode HTML di atas menggunakan CSS yang membantu dalam menyembunyikan data. Perhatikan kode berikut.
.hidden {
display: none;
}Sekarang mari kita tulis kode MooTools yang menunjukkan fungsionalitas tab. Perhatikan kode berikut.
Contoh Cuplikan
//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)
});
});Saat menggabungkan kode di atas, Anda akan mendapatkan fungsionalitas yang tepat.
Contoh
<!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>Keluaran
Tempatkan penunjuk mouse Anda pada item daftar, lalu Anda akan mendapatkan info tambahan dari item tersebut.
Tab Konten Marph
Dengan memperluas kode, kita dapat menambahkan beberapa fungsionalitas morph ketika konten tersembunyi kita ditampilkan. Kita bisa mencapai ini dengan menggunakan efek Fx.Morph daripada gaya.
Perhatikan kode berikut.
Contoh
<!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>Keluaran
Klik salah satu item dalam daftar, maka Anda akan mendapatkan informasi tambahan di tab.
MooTools berisi kelas API yang berbeda. Lihatlah dasar-dasar membuat dan menggunakan kelas dengan MooTools. Kelas adalah wadah untuk kumpulan variabel dan fungsi yang beroperasi pada variabel tersebut untuk melakukan tugas tertentu.
Mari kita bahas variabel, metode, dan opsi secara detail.
Variabel
Membuat variabel adalah tugas yang sangat sederhana. Ini seperti mendeklarasikan pasangan kunci / nilai dalam hash. Demikian pula, Anda dapat mengakses variabel dengan cara yang sama yang berarti <class_name.variable>. Lihatlah sintaks berikut untuk membuat dan mengakses variabel di kelas.
Sintaksis
//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 );
}Metode
Secara umum, Metode adalah fungsi yang menggunakan sekumpulan instruksi yang dimiliki kelas tertentu. Anda dapat memanggil fungsi-fungsi ini dengan menggunakan instance kelas. Satu hal lagi setiap kali Anda ingin memanggil variabel instan ke dalam fungsi yang harus Anda gunakanthiskata kunci. Lihatlah sintaks berikut untuk membuat dan mengakses metode.
Sintaksis
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();
}menginisialisasi
menginisialisasi adalah opsi di objek kelas. Ini membantu Anda membuat pengaturan kelas. Ini juga membantu Anda mengatur opsi dan variabel konfigurasi pengguna. Lihatlah sintaks berikut dari opsi inisialisasi.
Sintaksis
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;
}
})Menerapkan Opsi
Opsi penerapan sangat membantu untuk menerima masukan pengguna dan membangun kelas. Menambahkan fungsionalitas opsi ke kelas Anda semudah menambahkan kunci / pasangan lain ke opsi inisialisasi untuk kelas Anda. Setelah penyiapan ini siap, Anda dapat mengganti salah satu atau semua opsi default dengan meneruskan pasangan kunci / nilai. Ini menyediakan metode setOptions. Metode ini memungkinkan Anda menyetel opsi setelah kelas diinisialisasi. Jika Anda ingin mengakses variabel dari dalam kelas, gunakan sintaks berikut.
Sintaksis
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 memungkinkan Anda menambahkan fungsionalitas Fx ke beberapa elemen dom pada satu halaman. Sebenarnya Fx.Element merupakan perpanjangan dari plugin Fx.Morph. Satu-satunya perbedaan antara Fx.Element dan Fx.Morph adalah sintaksnya. Dalam sintaks ini, filestart({}) metode digunakan untuk membuat efek dan metode .set ({}) digunakan untuk menyetel beberapa gaya.
Lihatlah sintaks berikut untuk Fx.Element.
Sintaksis
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');
}
});mulai ({}) dan setel ({})
Mulai dan setel struktur kata kunci digunakan untuk memulai dan mengatur gaya. Tetapi dalam struktur ini, Anda merujuk ke elemen melalui indeks - elemen pertama adalah 0, yang kedua adalah 1, dan seterusnya. Lihatlah sintaks berikut untuk struktur Start dan Set.
Sintaksis
//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'
}
});Contoh
Mari kita ambil contoh yang menjelaskan Fx.Element. Perhatikan kode berikut.
<!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>Anda akan menerima output berikut -
Keluaran
Fx.Slides adalah opsi yang memungkinkan Anda menampilkan konten dengan menggeser ke tampilan. Ini sangat sederhana tetapi meningkatkan tampilan UI Anda.
Mari kita bahas tentang membuat dan menginisialisasi Fx.Slide, opsinya, dan metodenya.
Pertama, kita akan menginisialisasi kelas Fx.Slide dengan instance yang ditentukan pengguna. Untuk itu, kita harus membuat dan memilih elemen HTML. Setelah itu, kami akan menerapkan CSS ke elemen-elemen ini. Akhirnya, kami akan memulai instance baru Fx.Slide dengan variabel elemen kami.
Fx.Slide Options
Hanya ada dua opsi Fx.Slide - mode dan pembungkus.
Mode
Mode memberi Anda dua pilihan, 'vertikal' atau 'horizontal'. Penampakan vertikal dari atas ke bawah dan penampakan horizontal dari kiri ke kanan. Tidak ada pilihan untuk pergi dari bawah ke atas atau dari kanan ke kiri, saya mengerti bahwa meretas kelas itu sendiri untuk mencapai ini relatif sederhana. Menurut pendapat saya, ini adalah opsi yang saya ingin lihat standar, dan jika ada yang telah meretas kelas untuk mengizinkan opsi ini, harap beri kami catatan.
Pembungkus
Secara default, Fx.Slide melempar pembungkus di sekitar elemen slide Anda, memberikannya 'overflow': 'hidden'. Wrapper memungkinkan Anda menyetel elemen lain sebagai pembungkusnya. Seperti yang saya katakan di atas, saya tidak jelas di mana ini akan berguna dan akan tertarik untuk mendengar pemikiran apa pun (terima kasih kepada horseweapon di mooforum.net untuk membantu saya menjernihkan ini).
Metode Fx.Slide
Fx.Slide juga menampilkan banyak metode untuk menampilkan dan menyembunyikan elemen Anda.
slideIn ()
Sesuai namanya, metode ini akan mengaktifkan event start dan menampilkan elemen Anda.
slideOut ()
Menggeser elemen Anda kembali ke keadaan tersembunyi.
beralih ()
Ini akan menggeser elemen ke dalam atau ke luar, bergantung pada statusnya saat ini. Metode yang sangat berguna untuk menambahkan acara klik.
menyembunyikan()
Ini akan menyembunyikan elemen tanpa efek slide.
menunjukkan()
Ini akan menampilkan elemen tanpa efek slide.
Fx.Slide Shortcuts
Kelas Fx.Slide juga menyediakan beberapa pintasan praktis untuk menambahkan efek ke elemen.
set ('slide')
Alih-alih memulai kelas baru, Anda dapat membuat instance baru jika Anda 'menyetel' slide pada sebuah elemen.
Syntax
slideElement.set('slide');opsi pengaturan
Anda bahkan dapat mengatur opsi dengan pintasan -
Syntax
slideElement.set('slide', {duration: 1250});meluncur()
Setelah slide menjadi .set (), Anda bisa memulainya dengan metode .slide ().
Syntax
slideElement.slide('in');.slide akan menerima -
- ‘in’
- ‘out’
- ‘toggle’
- ’show’
- ‘hide’
… Masing-masing sesuai dengan metode di atas.
Example
Mari kita ambil contoh yang menjelaskan tentang Fx.Slide. Perhatikan kode berikut.
<!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
Klik pada tombol - openA, closeA, openB, dan closeB. Amati perubahan, efek, dan notifikasi kejadian pada indikator.
MooTools menyediakan pintasan FX.Tween yang berbeda untuk transisi yang berbeda seperti efek mencolok yang diterjemahkan menjadi transisi animasi yang mulus. Mari kita bahas beberapa metode dari pintasan Tween.
tween ()
Metode ini memberikan transisi yang mulus antara dua nilai properti gaya. Mari kita ambil contoh yang menggunakan metode tween untuk mengubah lebar div dari 100px menjadi 300px. Perhatikan kode berikut.
Contoh
<!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>Anda akan menerima output berikut -
Keluaran
luntur()
Metode ini menyesuaikan opasitas elemen atau transparansi. Mari kita ambil contoh di mana, kami menyediakan tombol untuk mengatur opasitas div menggunakan MooTools. Perhatikan kode berikut.
Contoh
<!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>Anda akan menerima output berikut -
Keluaran
Klik pada fade to 50% button untuk mengurangi opasitas div menjadi 50%.
menyoroti()
Metode ini menyoroti elemen menggunakan warna latar belakang yang berbeda. Ini berisi dua fungsi utama Tween Flash.
Dalam fungsi pertama, Tween Flash digunakan untuk menerapkan warna latar belakang yang berbeda ke elemen.
Setelah Tween Flash menetapkan warna latar belakang yang berbeda, lalu beralih ke warna latar belakang lain.
Metode ini digunakan untuk menyorot elemen setelah seleksi. Mari kita ambil contoh untuk memahami metode ini. Perhatikan kode berikut.
Contoh
<!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>Anda akan menerima output berikut -
Keluaran
Coba pertahankan penunjuk mouse pada div berwarna dan amati perubahan pada sorotan flash.
Fx.Morph adalah fungsi yang disediakan oleh MooTools. Ini digunakan untuk membuat tween baru untuk transisi antara properti gaya. Saat morphing, kita harus memilih elemen dengan objek dan kemudian kita dapat menerapkan fungsi yang berbeda padanya. Kita juga perlu mengikat elemen dengan tween yang baru dibuat.
Mari kita ambil contoh yang menyediakan tiga tombol pada halaman web. Yang pertama adalahSETtombol yang membuat elemen dengan properti gaya seperti tinggi, lebar, dan warna. Yang kedua adalahMORPHtombol yang mengubah properti gaya suatu elemen. Yang ketiga adalahRESETtombol yang mengubah semua pengaturan ke posisi awal. Perhatikan kode berikut.
Contoh
<!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>Anda akan menerima output berikut -
Keluaran
MooTools menyediakan Fx.Options berbeda yang akan membantu Fx.Tween dan Fx.Morph. Opsi ini akan memberi Anda kendali atas efeknya.
Mari kita bahas beberapa opsi yang disediakan MooTools. Sebelum kita melanjutkan, lihat sintaks berikut untuk mengatur opsi.
Sintaksis
var morphObject = new Fx.Morph(morphElement, {
//first state the name of the option
//place a :
//then define your option
});fps (bingkai per detik)
Opsi ini menentukan jumlah frame per detik dalam animasi saat morphing. Kita dapat menerapkan fps ini ke fungsi Morph atau Tween. Secara default, nilai fps adalah 50. Ini berarti fungsionalitas apa pun akan membutuhkan 50 frame per detik saat morphing.
Contoh
Mari kita ambil contoh di mana, kita akan mengubah elemen div menggunakan 5 fps. Perhatikan kode berikut.
<!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>Anda akan menerima output berikut -
Keluaran
Klik pada STARTtombol untuk menemukan animasi morphing. Ini membantu kami mengamati jumlah bingkai yang digunakan untuk animasi. Gunakan nilai yang berbeda untuk fps untuk mendapatkan perbedaan dalam animasi. Direkomendasikan untuk menggunakan nilai fps kurang dari 10. Ini akan membantu Anda mendapatkan perbedaan dengan mudah.
satuan
Opsi ini digunakan untuk mengatur tipe unit untuk angka. Secara umum, kami memiliki tiga jenis unit - px,%, dan ems. Perhatikan sintaks berikut.
Sintaksis
var morphObject = new Fx.Morph(morphElement, {
unit: '%'
});Sintaks di atas adalah mengalokasikan persentase ke unit. Ini berarti semua nilai dalam angka diperlakukan sebagai persentase.
tautan
Opsi ini menyediakan cara untuk mengelola beberapa panggilan untuk memulai animasi. Jika Anda menerapkan beberapa panggilan acara sekaligus, panggilan ini akan dianggap sebagai panggilan tautan. Setelah panggilan pertama selesai, panggilan kedua dijalankan secara otomatis. Ini berisi tiga opsi berikut -
ignore- Ini adalah opsi default. Ini mengabaikan sejumlah panggilan sampai itu menyelesaikan efeknya.
cancel- Ini membatalkan efek saat ini, ketika ada yang lain dibuat. Ini mengikuti prioritas panggilan terbaru.
Chain- Ini memungkinkan Anda menyatukan efek dan mempertahankan tumpukan panggilan. Itu mengeksekusi semua panggilan sampai melewati semua panggilan yang dirantai di stack.
Lihatlah sintaks berikut untuk menggunakan opsi tautan.
Sintaksis
var morphObject = new Fx.Morph(morphElement, {
link: 'chain'
});Durasi
Opsi ini digunakan untuk menentukan durasi animasi. Misalnya, jika Anda ingin sebuah objek bergerak 100px dalam durasi 1 detik, maka itu akan lebih lambat daripada objek yang bergerak 1000px dalam 1 detik. Anda dapat memasukkan angka yang diukur dalam milidetik. Atau Anda dapat menggunakan salah satu dari tiga opsi ini sebagai pengganti angka.
- Pendek = 250ms
- Normal = 500ms (default)
- Panjang = 1000ms
Lihatlah sintaks berikut untuk menggunakan durasi.
Sintaksis
var morphObject = new Fx.Morph(morphElement, {
duration: 'long'
});Atau,
var morphObject = new Fx.Morph(morphElement, {
duration: 1000
});transisi
Pilihan ini digunakan untuk menentukan tipe transisi. Misalnya, jika transisi berjalan mulus atau dimulai dengan lambat, lalu percepat menjelang akhir. Lihat sintaks berikut untuk menerapkan transisi.
Sintaksis
var tweenObject = new Fx.Tween(tweenElement, {
transition: 'quad:in'
});Tabel berikut menjelaskan berbagai jenis transisi.
| S.No. | Jenis & Deskripsi transisi |
|---|---|
| 1 | Linear Menampilkan transisi linier dengan kejadian masuk, keluar, keluar |
| 2 | Quad Menampilkan transisi kuadrat dengan kejadian masuk, keluar, keluar |
| 3 | Kubik Menampilkan transisi kubikuler dengan peristiwa masuk, keluar, keluar |
| 4 | Kuart Menampilkan transisi kuartetik dengan acara masuk, keluar, keluar |
| 5 | Kuint Menampilkan transisi kuintik dengan acara masuk, keluar, keluar |
| 6 | Pow Digunakan untuk menghasilkan Quad, Cubic, Quart dan Quint dengan kejadian masuk, keluar, keluar |
| 7 | Expo Menampilkan transisi eksponensial dengan kejadian masuk, keluar, keluar |
| 8 | Circ Menampilkan transisi melingkar dengan acara masuk, keluar, keluar |
| 9 | Sinus Menampilkan transisi sinus dengan peristiwa masuk, keluar, keluar |
| 10 | Kembali Membuat transisi mundur, lalu semua dengan kejadian masuk, keluar, keluar |
| 11 | Melambung Membuat transisi goyang dengan acara masuk, keluar, keluar |
| 12 | Elastis Transisi kurva elastis dengan kejadian masuk, keluar, keluar |
Fx.Events menyediakan beberapa opsi untuk menaikkan beberapa kode pada level yang berbeda di seluruh efek animasi. Ini memberi Anda kendali atas remaja dan morph Anda. Opsi yang disediakan Fx.Events -
onStart - Ini akan menaikkan kode untuk dieksekusi ketika Fx dimulai.
onCancel - Ini akan menaikkan kode untuk dieksekusi ketika Fx dibatalkan.
onComplete - Ini akan menaikkan kode untuk dieksekusi ketika Fx selesai.
onChainComplete - akan menaikkan kode untuk dieksekusi ketika Fx yang dirantai selesai.
Contoh
Mari kita ambil contoh di mana ada div di halaman web. Kami melanjutkan dengan menerapkan metode Peristiwa ke div. Metode pertama adalah metode onStart () untuk menyorot div saat penunjuk mouse masuk ke dalam area div.
Yang kedua adalah metode onComplete () yang menyoroti div saat penunjuk mouse meninggalkan area div. Dan ketika penunjuk mouse masuk ke area div secara otomatis ukuran div bertambah 400px. Kami akan mencoba menjalankan semua fungsi ini menggunakan metode Fx.Events. Perhatikan kode berikut.
<!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>Anda akan menerima output berikut -