Jumat, 06 April 2012
DROPDOWN
Mari kita mulai menambahkan jQuery untuk membuat karya menuangkan menu dropdown. Hal pertama yang harus kita lakukan adalah men-download jquery jika kita belum mendapatkannya dan menyertakannya pada halaman kami. Tambahkan baris berikut ke kepala dokumen Anda memastikan bahwa Anda mendapatkan bagian atas path file yang benar:
Internet Lahan src="jquery.js">
Sekarang kita dapat mulai menulis kode jQuery yang akan melihat langkah slide.
Sekarang mari kita mulai menambahkan kode jQuery. Masih di bagian kepala, di bawah di mana Anda termasuk file jQuery, tambahkan berikut ini:
jQuery Lightbox
Lightbox jQuery besar plug-in di website dengan Dreamweaver dan tutorial jQuery. Pelajari Lightbox html jQuery, cara set-up kait script, dan pasang style sheet yang diperlukan untuk membuat musim semi Lightbox jQuery ke dalam hidup dan menampilkan gambar Anda dengan cara yang penuh gaya dan modern. Ini adalah suatu Lightbox tutorial jQuery fantastis bahwa Anda akan memiliki contoh Lightbox pertama jQuery Anda dalam menit.
Script
Karena ini adalah script berbasis jQuery, kita perlu memuat di perpustakaan jQuery pertama. Untuk melakukan itu kita tambahkan
Overlay dan variabel kontainer adalah apa yang membuat latar belakang transparan dan kotak kontainer putih masing-masing. Pada titik ini mereka belum dimasukkan ke dalam halaman, kami hanya pengaturan mereka. jQuery benar-benar membuat bagian ini sederhana karena kita hanya bisa lewat di markup sewenang-wenang dan itu mengurus semua suntikan DOM.
dekat, prev dan berikutnya adalah link yang berfungsi sebagai navigasi kita di dalam lightbox itu. Demo di sini hanya membuat mereka sebagai teks tetapi cukup mudah untuk menggunakan CSS untuk melakukan penggantian gambar pada mereka jika Anda ingin tampilan yang lebih grafis.
Fancybox dan Lightbox
Pemasangan Di Template Blogger
Isi file:
1. jquery.fancybox-1.3.1.css
2. jquery.fancybox-1.3.1.js
3. jquery.mousewheel-3.0.2.pack.js (opsional)
Unggah (upload) file jquery.fancybox-1.3.1.js dan jquery.mousewheel-3.0.2.pack.js (opsional) ke hostingan Anda (saya menggunakan Fileave.com untuk menitipkan file js).
Buka file jquery.fancybox-1.3.1.css dengan notepad, copy semua kode di dalamnya
Tempatkan kode JQuery berikut di atas (bila belum ada)
Selanjutnya tempatkan kode berikut setelah kode JQuery tersebut (ganti http://hostingan-anda.com/jquery.fancybox-1.3.1.js dengan alamat hostingan file Anda)
Simpan template Anda
jQuery
jQuery adalah javascript library, jQuery mempunyai semboyan “write less, do more”. jQuery dirancang untuk memperingkas kode-kode javascript. JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript.
Sebelum anda memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript.
Library jQuery mempunyai kemampuan :
• Memanipulasi elemen HTML
• Memanipulasi CSS
• Penanganan event HTML
• Efek-efek javascript dan animasi
• Modifikasi HTML DOM
• AJAX
• Menyederhanakan kode javascript lainnya
Kemudian untuk memulai mempelajari jQuery, anda harus mendownload jquery. Setiap anda menulis kode javascript dengan menggunakan jquery, jangan lupa untuk memasukan file jquery.js kedalam kode javascript anda.
Bagi Web Developer jQuery akan sangat menyederhanakan kode-kode JavaScript, seperti saat digunakan untuk penanganan event, interaksi Ajax yang cepat. jQuery ini dirancang untuk mengubah cara Kita menulis JavaScript.
Maka kita bisa memperlakukan banyak hal dengan JQuery. Pemanggilan objek container bisa dilakukan sama seperti anda memperlakukannya di CSS.
Cascading Style Sheets 3 (CSS 3)
"CSS3" beralih ke halaman ini. Untuk kode bandara CSS3, lihat Montréal / Les Cedres Airport.
Tidak seperti CSS2, yang merupakan spesifikasi tunggal besar mendefinisikan berbagai fitur, CSS3 dibagi menjadi beberapa dokumen terpisah yang disebut "modul". Setiap modul menambahkan kemampuan baru atau memperluas fitur didefinisikan dalam CSS2, lebih menjaga kompatibilitas ke belakang. Bekerja pada CSS tingkat 3 mulai sekitar waktu penerbitan rekomendasi CSS2 asli. Para CSS3 awal draft diterbitkan pada bulan Juni 1999.
Karena modularisasi, modul yang berbeda memiliki stabilitas yang berbeda dan status. Pada November 2011, ada lebih dari lima puluh CSS modul diterbitkan dari Kelompok Kerja CSS. Tiga dari mereka-Selectors Level 3, Ruang nama dan Warna-menjadi Rekomendasi W3C pada tahun 2011.
Beberapa modul (termasuk Backgrounds and Borders, Queries Media, dan Multi-kolom Tata Letak antara lain) memiliki Calon Rekomendasi (CR) status dan dianggap cukup stabil. Pada tahap CR, implementasi disarankan untuk menjatuhkan awalan vendor.
CSS3 Borders
Dengan CSS3, Anda dapat membuat perbatasan bulat, menambahkan bayangan ke kotak, dan menggunakan gambar sebagai perbatasan - tanpa menggunakan program desain, seperti Photoshop.
Dalam bab ini Anda akan mempelajari tentang sifat-sifat perbatasan berikut:
* Border-radius
* Kotak-shadow
* Border-gambar
Baru Perbatasan Properti
Properti Deskripsi CSS
perbatasan-image Sebuah properti stenografi untuk mengatur semua perbatasan citra-* 3 properti
border-radius Sebuah properti stenografi untuk menentukan semua empat perbatasan-*-radius 3 properti
kotak-bayangan Atase satu atau lebih drop-bayangan ke kotak 3
CSS3 Backgrounds
CSS3 berisi beberapa properti latar belakang baru,
yang memungkinkan kontrol yang lebih besar dari elemen latar belakang.
Dalam bab ini Anda akan mempelajari tentang sifat-sifat latar belakang berikut:
* Background-ukuran
* Latar belakang asal-
Properti background-ukuran menentukan ukuran gambar latar belakang.
Sebelum CSS3, ukuran gambar latar belakang ditentukan oleh ukuran sebenarnya dari gambar. Dalam CSS3 adalah mungkin untuk menentukan ukuran gambar latar belakang, yang memungkinkan kita untuk kembali menggunakan gambar latar belakang dalam konteks yang berbeda.
Anda dapat menentukan ukuran dalam pixel atau persentase. Jika Anda menentukan ukuran sebagai persentase, ukuran relatif terhadap lebar dan tinggi dari elemen induk.
Regangkan gambar latar belakang untuk sepenuhnya mengisi area konten:
div
{
background:url(img_flwr.gif);
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-size:100% 100%;
background-repeat:no-repeat;
}
Dalam aturan font-wajah baru @ Anda harus terlebih dahulu menentukan nama font (misalnya myFirstFont), kemudian arahkan ke file font. Untuk menggunakan font untuk elemen HTML, lihat nama font (myFirstFont) melalui properti font-family: File "Sansation_Bold.ttf" adalah file lain font, yang berisi karakter berani untuk font Sansation.
Browser akan menggunakan ini setiap kali sepotong teks dengan "myFirstFont" font-keluarga harus dibaca sebagai huruf tebal.
Dengan cara ini Anda dapat memiliki banyak @ font-face aturan untuk font yang sama.