Tutorial JavaScript Element Joomla

Catatan Script Joomla.

Tutorial 1: Script untuk memilih element-element dengan class tertentu (atau ID tertentu), dan meng-assign style / class tertentu pada element-element tersebut.

1. Untuk mengawali eksekusi script ketika window sudah ter-load, masukan command:

window.addEvent('domready', function() {
//masukan script2 di sini

)};

2. Untuk memilih semua element dengan suatu class atau suatu id tertentu, lalu dimasukkan ke variable tertentu. Script-nya adalah:

var nama-variable = document.id(document.body).getElements('nama-tag.nama-kelas');

atau

var nama-variable = document.id(document.body).getElements('nama-tag#nama-id'); 


Dalam contoh ini, element atau tag yang hendak saya pilih adalah "li". Setelah ditemukan, element-element ini dimasukan ke variable "myparent". maka script-nya adalah:

var myparent = document.id(document.body).getElements('li.parent');

Lalu apa tujuan memilih element-element dengan kriteria ini? Salah satu tujuannya adalah untuk meng-assign suatu style atau properties.

Misalnya, saya mau utk set supaya semua element2 li.parent dihilangkan sementara, maka kita akan tambahkan  “display:none” pada style element.


Maka setelah li.parent dimasukan ke variabel myparent, maka kita memanggil setiap element li.parent dengan script berikut:

myparent.each(function(element) {

//masukan script untuk element-element dalam myparent
});

Kita hilangkan element dalam myparent dengan memasukan style display:none dengan script sbb:

myparent.each(function(element) {

//masukan script untuk element-element dalam myparent
         element.setStyle('display','none');                            
});

Catatan:
element adalah variable pada function tersebut.

Dengan demikian, script lengkapnya, adalah:

window.addEvent('domready', function() {

//masukan script2 di sini

var myparent = document.id(document.body).getElements('li.parent');
myparent.each(function(element) {

//masukan script untuk element-element dalam myparent

element.setStyle('display','none');

});

)};


End of Tutorial 1: Script untuk memilih element-element dengan class tertentu (atau ID tertentu), dan meng-assign style / class tertentu pada element-element tersebut.


Lanjut ke Script Menambah Efek Pada Element.

Tutroial Lain:
Tutorial Efek Toggle pada Element Joomla
Tutorial Efek Toggle Group pada Element Joomla