iCarousel
Fabio Zendhi Nagao ( http://zend.lojcomm.com.br )
iCarousel merupakan open source (gratis) javascript alat untuk membuat korsel seperti widget.
abstrak:
Salah satu masalah yang paling umum web developer biasanya menghadapi terkait untuk terus memutar sebuah fragmen dari konten. Ini bisa menjadi presentasi headline, fragmen kecil dari berita atau daftar thumbnail. Sifat dari hal yang sedang diputar tidak peduli terlalu banyak di sini karena semua jenis aplikasi berbagi selalu ide yang sama: Memutar. Tujuan ini dapat dicapai dengan cara yang berbeda seperti memudar dan bergulir. Nah di sini adalah iCarousel menjadi berguna. Ini adalah satu langkah maju mencoba untuk menggeneralisasi semua jenis widget memberikan presentasi yang kaya dan membuat tugas mudah untuk dilakukan.
contoh:
- Sederhana ticker berita
- Vertikal scroller berita dengan onClickPrevious dan onClickNext acara
- gambar horisontal scroller
- gambar vertikal scroller
- scroller teks vertikal
- image slider horisontal
kompatibilitas browser:
iCarousel kompatibel dan diuji di Internet Explorer , Firefox (dan teman-teman mozilla nya), Opera dan Safari (terima kasih Kamicane untuk mengujinya). Tetapi harus bekerja di browser lain juga ... Jika Anda berhasil menemukan browser lain yang kompatibel, tolong beritahu saya;)
fitur:
iCarousel sepenuhnya dikonfigurasi. Anda dapat mengubah pilihan default hanya initializating kelas dengan obyek dalam JSON. Berikut adalah opsi yang tersedia:
- (Objek) animasi
- (String) jenis (default "fadeNscroll", nilai-nilai: [ "fadeNscroll", "scroll", "fade"]).
- (String) arah (default "kiri", nilai-nilai: [ "top", "kiri"]) - hanya diperlukan oleh "scroll" Jenis.
- (Int) jumlah (default 1) - Jumlah item untuk gulir :: diperlukan hanya dengan "scroll" Jenis.
- (Fungsi) transisi (default Fx.Transition.Cubic.easeInOut).
- (Int) durasi (default 500)
- (Objek) memutar
- (String) jenis (default "manual", nilai-nilai: [ "manual", "auto"]).
- (Int) Interval (default 5000 ms) - hanya diperlukan oleh "auto" Jenis.
- (String) onMouseOver (default "berhenti", nilai-nilai: [ "berhenti", "lanjutkan"]) - hanya diperlukan oleh "auto" Jenis.
- (Objek) Item
- (String) klass (default "item")
- (Int) ukuran (default 100) - Ukuran yang relevan item :: diperlukan hanya dengan "scroll" Jenis.
- (String) idPrevious (default "sebelumnya")
- (String) idNext (default "berikutnya")
- (String) idToggle (default "beralih")
bagaimana cara menggunakan:
Pertama-tama, iCarouse dibangun di atas Mootools v1.1, sehingga kedua perpustakaan diperlukan.
Dapatkan Mootools di http://mootools.net dan iCarousel sini . Gunakan IceBeat Packito untuk melihat mootools ketergantungan .
Dengan skrip di tangan, termasuk mereka antara "kepala" definisi Anda:
- < Kepala >
- .
- . <! - // Kode sini // ->
- .
- < Skrip Jenis = "text / javascript" src = "js / mootools.js" > </ Script >
- < Skrip Jenis = "text / javascript" src = "js / icarousel.js" > </ Script >
- .
- . <! - // Dan di sini // ->
- .
- </ Kepala >
Menginisialisasi kelas iCarousel:
- baru iCarousel ( "container" , {
- animasi: {
- Jenis: "memudar" ,
- transisi: Fx.Transitions.linear,
- memutar: {
- Jenis: "auto"
- }
- }
- });
Itu saja, pada tingkat ini Anda harus dapat melihat iCarousel menciptakan ticker berita dengan unsur-unsur dengan "item" kelas.
lisensi:
Ini bagian dari kode dirilis di bawah lisensi Open Source MIT, yang memungkinkan Anda untuk menggunakannya dan memodifikasinya dalam setiap keadaan. Untuk lebih jelasnya baca di bawah ini:
MIT License
Copyright (c) 2007 Fabio Zendhi Nagao - http://zend.lojcomm.com.br
Dengan ini diberikan izin, bebas biaya, kepada siapa saja yang memperoleh salinan perangkat lunak ini dan file dokumentasi terkait ( "Perangkat Lunak"), untuk memanfaatkan Perangkat Lunak tanpa pembatasan, termasuk tanpa batasan hak untuk menggunakan, menyalin, memodifikasi, menggabungkan , mempublikasikan, mendistribusikan, mensublisensikan, dan / atau menjual salinan Perangkat Lunak, dan untuk mengizinkan orang yang diberi Perangkat Lunak ini untuk melakukannya, asalkan tunduk pada persyaratan berikut:
Pemberitahuan hak cipta di atas dan pemberitahuan izin ini harus dimasukkan dalam semua salinan atau bagian substansial dari Perangkat Lunak.
PERANGKAT LUNAK INI DISEDIAKAN "APA ADANYA", TANPA JAMINAN APAPUN, TERSURAT MAUPUN TERSIRAT, TERMASUK NAMUN TIDAK TERBATAS PADA JAMINAN DIPERDAGANGKAN, KESESUAIAN UNTUK TUJUAN TERTENTU DAN PELANGGARAN. DALAM KEADAAN APAPUN PENULIS ATAU HAK CIPTA PEMEGANG BERTANGGUNG JAWAB ATAS KLAIM, KERUSAKAN ATAU KEWAJIBAN LAIN, BAIK DALAM TINDAKAN KONTRAK, KESALAHAN ATAU LAINNYA, YANG TIMBUL DARI, ATAU BERHUBUNGAN DENGAN PERANGKAT LUNAK ATAU PENGGUNAAN ATAU MASALAH LAINNYA DI PERANGKAT LUNAK.
men-download:
iCarousel tersedia dalam format berikut:
- Versi dikemas : Ultra versi terkompresi (3.40KB) - The siap untuk digunakan "karena" versi.
- versi lengkap : Full version (8.60KB) - Untuk pengembang yang perlu mengubah atau hanya mempelajarinya.
versi sejarah:
2007/05/22: v1.001
- [Berubah] (pilihan) animation.type [scroll -> fadeNscroll (default), sekarang gulir tidak pudar apapun (benar-benar cepat)]
- [Menambahkan] (metode) Goto (indeks) - menggunakan iCarousel.goTo (n) untuk menghidupkan ke elemen-n dari koleksi barang
- [Menambahkan] (peristiwa) onClickPrevious, onClickNext, onPrevious, onNext, onGoTo
- [Berubah] onMouseOver: "berhenti" perilaku sekarang membersihkan waktu animasi di onMouseEnter dan mulai lagi pada onMouseLeave
- [Berubah] Contoh saya untuk menggambarkan penggunaan onPrevious dan onNext
- [Berubah] Contoh II untuk menggambarkan penggunaan onClickPrevious dan onClickNext
- [Berubah] Contoh V untuk menggambarkan onMouseEnter baru, perilaku onMouseLeave
- [Menambahkan] Contoh VI untuk menggambarkan penggunaan Goto
2007/05/09: v1.0 - Rilis publik pertama