Saya pilih tidak membicarakan topik lapisan bersarang sampai baru sekarang karena topik ini dapat mempengaruhi script Anda di beberapa tempat.
Bersarang artinya kita ingin mengelompokkan beberapa lapisan bersama menjadi satu elemen seragam. Dengan kata lain, lapisan bersarang adalah "lapisan dalam lapisan".
Ketika Anda melakukannya lapisan anak akan ditempatkan tergantung dengan lapisan induk. Juga, jika lapisan induk dipotong, lapisan anak akan tampil seperti dalam suatu jendela atau seperti plugin. Jika lapisan anak keluar dari batas (sisi potong) dari lapisan induk, lapisan anak akan menjadi tak kelihatan properti visibility-nya tidak berubah tetapi tetap tampil seperti sedang berada di luar layar:
Telah saya temukan bahwa persarangan sangat berguna ketika Anda masuk ke penempatan yang lebih rumit lagi. Karena semua lokasi lapisan anak tergantung dari lapisan induk, lapisan-lapisan ini secara permanen "dikunci" pada posisinya. Jika Anda kemudian ingin memindahkan lokasi lapisan induk, Anda tidak perlu mengubah lokasi lapisan anak karena mereka juga akan berpindah seperti yang diinginkan. Ini juga terjadi pada animasi meluncur semua lapisan anak akan meluncur bersamaan.
JavaScript untuk lapisan bersarang berbeda sangat dramatis antara Netscape dan Internet Explorer. Saya akui sangat sulit membuat script dengan lapisan bersarang yang bekerja sesuai kehendak di kedua browser dan itulah alasan Anda tidak melihat persarangan sering digunakan di web. Bagaimanapun telah saya kembangkan beberapa teknik yang sungguh hebat untuk mengatasi masalah ini sehingga bersabarlah di sini, saya yakinkan Anda bahwa persarangan sangat berguna sehingga begitu Anda memakainya, Anda ingin melakukan semuanya dengan cara itu.
Stylesheet dan Persarangan:
Untuk membuat lapisan bersarang yang Anda perlu lakukan hanyalah membungkus DIV induk di sekeliling semua DIV anak:
<DIV ID="parent1Div"> <DIV ID="child1Div"></DIV> <DIV ID="child2Div"></DIV> </DIV>
Saya sengaja tidak memasang gaya (STYLE) pada tag DIV di atas. Ini karena Netscape tidak membolehkan Anda menyarangkan lapisan jika gaya sudah didefinisikan menggunakan metode "inline" seperti yang telah saya gunakan di seluruh tutorial ini. Netscape tampaknya hanya membolehkan satu perangkat lapisan. Bila Anda membutuhkan lebih, Netscape akan mengabaikan sama sekali semua gaya pada lapisan sesudahnya. Maka dengan demikian kita SELALU harus mendefinisikan gaya menggunakan tag STYLE. Semua contoh mulai saat ini akan menggunakan cara ini.
CSS-nya pada dasarnya sama kecuali terpisah dari tag DIV:
<STYLE TYPE="text/css"> <!-- #parent1Div {position:absolute; left:100; top:80; width:230; height:120; clip:rect(0,230,120,0); background-color:#C0C0C0; layer-background-color:#C0C0C0;} #child1Div {position:absolute; left:-20; top:40; width:70; height:70; clip:rect(0,70,70,0); background-color:#FF0000; layer-background-color:#FF0000;} #child2Div {position:absolute; left:180; top:70; width:70; height:70; clip:rect(0,70,70,0); background-color:#0000FF; layer-background-color:#0000FF;} --> </STYLE> <DIV ID="parent1Div"> <DIV ID="child1Div"></DIV> <DIV ID="child2Div"></DIV> </DIV>
Klik di sini untuk melihat contoh ini.
Saya juga menyertakan bidang potong untuk mendefinisikan persegipanjangnya. Di kebanyakan kasus ketika Anda menggunakan persarangan Anda biasanya perlu mendefinisikan nilai potong dan warna lapisan.
JavaScript dan Persarangan:
Persarangan adalah tempat di mana JavaScript pada Netscape dan Internet Explorer berjalan di arah yang sama sekali berlawanan. Pada IE, tidak ada perbedaan apakah suatu lapisan bersarang atau tidak; Anda mengakses properti lapisan dengan cara yang sama dengan sebelumnya:
lapisanAnak.style.namaProperti
Tetapi pada Netscape ketika Anda ingin mengakses properti lapisan dalam sarang (lapisan anak) Anda harus mereferensikannya dengan menyebut juga lapisan induknya:
document.lapisanInduk.document.lapisanAnak.namaProperti
Tambahan "document" sebelum nama lapisan adalah karena Netscape kenyataannya memperlakukkan lapisan sebagai dokumen terpisah lapisan anak adalah bagian dari dokumen lapisan induknya.
Adalah mungkin untuk menyarangkan lapisan sampai tak terhingga Anda cukup tetap membungkus DIV-nya terus menerus. Misalkan kita mengubah perangkat contoh tadi sehingga child2Div berada dalam child1Div:
<DIV ID="parent1Div"> <DIV ID="child1Div"> <DIV ID="child2Div"></DIV> </DIV> </DIV>
Pada kasus ini untuk mengakses properti child2Div Anda harus menuliskan:
document.parent1Div.document.child1Div.document.child2Div.namaProperti
Konsep ini akan harus diterapkan pada variabel penunjuk kita. Inilah cara saya mendefinisikan variabel penunjuk untuk perangkat contoh aslinya:
function init() { if (ns4) { parent1 = document.parent1Div child1 = document.parent1Div.document.child1Div child2 = document.parent1Div.document.child2Div } if (ie4) { parent1 = parent1Div.style child1 = child1Div.style child2 = child2Div.style } }
Sekarang mari maju menghadapi beberapa masalah lebih lanjut....
Mengunjungi Properti CSS lagi:
Sayangnya Internet Explorer mempunyai sifat teknis yang membuat dilema yang membingungkan saya untuk waktu yang cukup lama. Ketika Anda mendefinisikan gaya lapisan Anda menggunakan tag STYLE, IE tidak membolehkan Anda membaca nilai awal propertinya. Maka pada IE jika Anda akan memeriksa lokasi sesaat dari parent1 menggunakan:
alert(parent1.left)
Akan Anda lihat bahwa Anda tidak menerima nilai apa pun. Ini terjadi pada semua properti CSS (left, top, width, height, visibility dll.).
Klik di sini untuk melihat contoh yang memeriksa properti lapisan. Pada Netscape semua bekerja dengan baik tetapi IE tidak akan menampilkan apa-apa sama sekali.
Saya masih tidak jelas mengapa Microsoft membuat IE seperti ini karena ini kelihatannya sedikit bodoh bagi saya. Hal ini terjadi hanya jika Anda menggunakan tag STYLE, dan hanya mempengaruhi nilai-nilai awal properti. Setelah Anda mengubah properti dengan JavaScript, Anda dapat mengaksesnya tanpa masalah.
Bagaimanakah hal ini mempengaruhi kita? Jika kita ingin memberikan nilai kepada properti seperti yang kita lakukan sebelumnya (xpos and ypos) kita perlu suatu cara untuk mengetahui lokasi sesaat lapisan dengan beberapa cara yang lain bagi IE4. Untungnya Microsoft menyertakan beberapa properti CSS nonstandar pada IE4:
Properti-properti tambahan ini tidak terpengaruh oleh masalah tag STYLE IE4 sehingga kita dapat menggunakannya untuk memperoleh lokasi sesaat lapisan. Maka berikut inilah kode baru kita dengan menambahkan properti xpos dan ypos pada variabel penunjuk kita:
function init() { if (ns4) { parent1 = document.parent1Div parent1.xpos = parent1.left parent1.ypos = parent1.top child1 = document.parent1Div.document.child1Div child1.xpos = child1.left child1.ypos = child1.top child2 = document.parent1Div.document.child2Div child2.xpos = child2.left child2.ypos = child2.top } if (ie4) { parent1 = parent1Div.style parent1.xpos = parent1.offsetX parent1.ypos = parent1.offsetY child1 = child1Div.style child1.xpos = child1.offsetX child1.ypos = child1.offsetY child2 = child2Div.style child2.xpos = child2.offsetX child2.ypos = child2.offsetY } }
Klik di sini untuk melihat contoh ini.
Setelah melakukannya Anda dapat mengubah lokasi lapisan seperti sebelumnya.
Klik di sini untuk melihat contoh penggunaan fungsi ini untuk memindahkan lapisan induk dan anak.
Ketampakan dan Persarangan:
Sekali lagi, jika Anda menggunakan tag STYLE untuk mendefinisikan lapisan Anda Anda tidak akan dapat memperoleh nilai ketampakan (visibility) awal pada IE4. Tetapi dalam pengalaman saya, memperoleh visibility sangat jarang diperlukan. Biasanya Anda sudah tahu apakah suatu lapisan terlihat atau tidak. Dan ingatlah bahwa ini hanya mempengaruhi nilai visibility awal setelah Anda mengubahnya dengan JavaSCript Anda kemudian dapat memperoleh nilainya.
Menampilkan dan menyembunyikan lapisan bersarang bekerja sangat mirip dengan yang Anda harapkan. Begitu Anda telah mendefinisikan variabel penunjuk, Anda dapat menggunakan fungsi menampilkan dan menyembunyikan yang sama seperti yang telah saya jelaskan pada pelajaran Menyembunyikan dan Menampilkan.
Tetapi ada satu hal yang perlu saya utarakan. Jika Anda tidak mendefinisikan visibility pada lapisan anak, nilai visibility adalah "diwariskan" mengambil nilai visibility lapisan induknya. Dalam kasus ini ketika Anda kemudian menyembunyikan atau menampilkan lapisan induk, semua lapisan anaknya berlaku sama. TETAPI... pada Netscape jika Anda mendefinisikan visibility pada lapisan-lapisan anak, atau mulai mengubahnya dengan JavaScript, Anda kehilangan kemampuan untuk menyembunyikan atau menampikan semua lapisan anak bersamaan. Di sini jika Anda menyembunyikan lapisan induknya, semua lapisan anaknya yang sedang tampak akan tetap terlihat.
Untuk menghindari hal ini, Anda harus mengatur visibility kembali menjadi "inherit" dan bukan "visible" ("show" pada Netscape). Jadi Anda jangan menggunakan fungsi showObj(), tetapi harus mengatur properti visibility secara manual:
mychild.visibility = "inherit"
Mengembalikan nilainya menjadi "inherit" berarti jika induknya ditampilkan, anaknya juga akan ditampilkan, dan jika induknya disembunyikan, anaknya juga akan disembunyikan.
Halaman Muka | Pelajaran Berikutnya: Menangkap Penekanan Tombol |