Mengekspresikan TI

Dengan berbagai Carousels luar sana, banyak Mootools juga, saya masih memutuskan untuk menulis Kelas Carousel saya sendiri, untuk beberapa alasan yang baik
1. Dicari fitur paging (untuk dapat melompat slide tertentu / langkah dalam korsel).
2. Dicari kebebasan dengan penempatan tombol KIRI dan KANAN / link, di mana pun aku suka.
3. Lebih kontrol atas Langkah Slide.

Aku berhasil membuat Carousel baru, dengan fitur di atas ... seperti di bawah ini ... Jangan ragu untuk menyarankan modifikasi yang anda akan membutuhkan!

Contoh saya terlihat seperti ini ... [ View Demo ]

Lihat Demo | Unduh Mootools Carousel Dengan Pager Versi 1.0 (download 1992 kali)

1. Carousel Pager

Anda dapat dengan mudah menambahkan paging untuk korsel Anda, cukup dengan menetapkan bendera paging, yang parater terakhir lewat sekaligus menciptakan instance dari MooCarousel ke true (ingin paging) atau false (donot ingin paging).

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = jumlah slide, sss = geser ukuran langkah

Dan ofcourse Anda dapat mengubah tampilan-n-merasa ini achors paging sesukamu dengan memodifikasi CSS mereka.

Carousel_paging {text-align: right; margin: 5px 10px 0 0;}.
Carousel_paging saat ini, carousel_paging halaman {outline: none; width:.... 15px; height: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

Carousel_paging a: hover, carousel_paging saat ini {background: # 4D4D9B; color: # ffffff;}...

Nah! ada masalah kecil sekalipun, Jangkar paging jika diatur, maka akan mendapatkan dihasilkan selalu setelah komponen Carousel. Aku ingin membuatnya dinamis juga, tetapi kemudian hanya untuk menjaga Script untuk meniup keluar dari proporsi, saya memutuskan untuk melewati itu.
Tapi Anda tahu Javascript sedikit, Anda dapat dengan mudah memodifikasi kode generasi paging di kelas MooCarousel untuk menyenangkan kebutuhan Anda.

2. Menyesuaikan Ikon Kiri & Kanan

Anda dapat mengubah PENEMPATAN, GAMBAR atau properti displat dari Tombol Kiri dan Kanan hanya dengan bermain-main dengan CSS. untuk dapat mengubah penempatan dari buttoms Kiri dan Kanan adalah alasan sebenarnya bagi saya untuk Kelas hak kita Carousel saya.
Karena ini Kelas MooCarousel, menerima id itu tombol ini, Anda sebenarnya dapat menempatkan tombol-tombol mana saja di halaman, jika Anda silahkan ... tidak harus dalam hirarki elemen, seperti dalam contoh saya.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; width: 23px; height: 20px; float: left; kursor: pointer;}

Carousel_container_r {background-position: 0-38px;}.

Carousel_container_l {background-position: 0-58px;}.

3. Menyesuaikan Langkah Slide

APA SAYA BERARTI LANGKAH Menyesuaikan SAYA SLIDE?
Carousels paling geser penuh dengan dari jendela terlihat. Jadi katakanlah Anda memiliki empat item (seperti dalam contoh saya di atas), akan geser semua empat item. Dengan Komponen Carousel, Anda melewati jumlah slide dan ukuran langkah pilihan Anda.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = jumlah slide, c_sss = geser ukuran langkah

Juga, dalam example1 saya, saya telah calcuted ukuran langkah slide, berdasarkan logika mana, aku tahu jumlah item, lebar pada setiap item dan margin yang diberikan setelah setiap item dalam CSS saya.

/ * Untuk korsel 1 * /

var c1_w = 92; Lebar / / korsel Barang

var c1_n = 10; Nomor / / Total Items korsel Perbandingan

var c1_pp = 4 / / Jumlah perpage Perbandingan Produk korsel

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp; / / sss = geser ukuran langkah

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + .5); / / ns = jumlah slide

c1_sss + = c1_marginFactor; / / sss = geser ukuran langkah, 51 untuk margin

Persyaratan: Mootools 1,2

Lihat Demo | Unduh Mootools Carousel Dengan Pager Versi 1.0 (download 1992 kali)

Mootools MooRating adalah (cross browser, tentu saja karena menggunakan kekuatan perpustakaan MooTools) sederhana, ringan dan sangat baik solusi berbasis peringkat. Hal ini tidak disebut sebagai "Bintang", hanya karena, citra Peringkat bisa sama yang Anda pilih (saya berikan Stars, Bar dan Hati dengan download, tapi Anda dapat membuat berbagai Anda sendiri dan hanya drop dalam).

Bagaimana hal itu terlihat seperti:

	Penilaian Mootools dengan gambar yang berbeda Lihat Demo
	Penilaian Mootools dengan nilai-nilai Persentase Lihat Demo
	Penilaian Mootools dengan nilai pecahan Lihat Demo

Unduh Mootols Star Rating Script (download 718 kali)

Penilaian data: Jumlah Utuh, Desimal atau Persentase
Saat ini script dirancang untuk menampilkan data rating sebagai nilai keseluruhan (1,2,3,4,5), dalam desimal (1,24, 3,45 dll) atau dalam persentase (12%, dll 55%). Pilihan untuk menampilkan data dalam format apapun yang disebutkan dapat diatur hanya dengan mengubah nilai beberapa bendera dalam javascript (moorating.js)
Pada dasarnya ada dua e dua bendera untuk bermain dengan, untuk menampilkan nilai-nilai dalam format pilihan Anda ...

var inpercent = false; / / Set bendera ini menjadi true, jika Anda memerlukan nilai-nilai persentase yang akan ditampilkan
var isFractional = false / / Set ini menjadi true, jika Anda ingin nilai pecahan seperti 1,24, 1,25 4,56 daripada 1,2 ... 5

Dan saya tidak berpikir ada penjelasan yang diperlukan untuk ini. Selain itu. Script ini sangat sederhana. Jika Anda tahu javascripting sedikit, Anda bisa memodifikasi script untuk mendapatkan semacam nilai yang ditampilkan. Untuk misalnya jika Anda ingin tiga tempat desimal untuk ditampilkan ... hanya men-tweak script seperti di bawah ini ...

if (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = formatNumber (x, 3);.} / / 2 diubah menjadi 3
else {moostartval [i] innerHTML = Math.round (x).;

Memperbarui Nilai Rating:
I havent repot menulis script AJAX untuk memperbarui nilai Ratings, karena saya tahu dari pengalaman saya yang TIDAK SELALU melakukannya berniat untuk memperbarui PENILAIAN segera sebagai sesuatu tingkat pengguna. Anda bebas untuk melakukan apapun yang Anda inginkan dengan nilai dinilai, Update menggunakan AJAX atau Menyerahkan atau Atur seting bentuk field tersembunyi, untuk disampaikan dengan seluruh formulir dll

fungsi updateRating (id, rating) {
/ / Alert (id + "," + rating);
/ / DO APA PUN DENGAN PENILAIAN ATAS
}

Ada fungsi dalam javascript disebut "updateRating". Fungsi ini telah lulus ID dari Div Penilaian, untuk mengidentifikasi untuk yang peringkat (jika ada lebih dari satu peringkat pada halaman) telah diupdate dan nilai rating [updateRating (id, rating)]. Anda bisa memilih untuk apa pun yang Anda inginkan dengan nilai-nilai ini, sebagai i disebutkan sebelumnya.

Penilaian Gambar: Bintang, Hearts, Bar atau apapun yang Anda silahkan
Mengubah rating untuk setiap jenis di atas (bintang, hati dll) sangat sederhana. Hanya membuat gambar yang mirip dengan yang disediakan dan menjatuhkannya masuk Ingat, jika Anda mengubah nama gambar, jangan membuat perubahan yang diperlukan dalam file CSS, lihat di bawah.

Moostar {margin: 0px; padding: 0px; overflow: hidden; width: 84px; height: 20px; float: left; background: url ('stars.gif') repeat-x;}.
Moostar span {float: left; margin: 0px; padding: 0px; display: block; width: 84px; height: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}.
.. Moostar Curr {background: url ('stars.gif') meninggalkan 25px;}

Kebanyakan peringkat widget menggunakan bintang-bintang dan setengah gambar dengan mouse kegiatan untuk setiap bintang. Ratings Moo menggunakan gambar sprite sederhana seperti gambar latar belakang untuk mencapai efek visual yang diperlukan dengan overhead yang sangat rendah.

Persyaratan: Mootools 1,2
Unduh Mootols Star Rating Script (download 718 kali)

Saya telah mencari slider disematkan ganda (slider dengan dua tombol, minimum dan maksimum) menggunakan mootools. Padahal, aku menemukan slider ganda disematkan beberapa baik dilakukan dalam forum Mootools, satunya masalah adalah bahwa semua berkat slider memiliki penanda jarak yang dipilih. Akhirnya! Saya memutuskan untuk membuat sendiri. Nah! Saya tidak menggunakan kode asli dan memodifikasi untuk memiliki latar belakang slider yang menunjukkan rentang yang dipilih secara visual, seperti dalam contoh saya di bawah ini. Daerah BIRU menunjukkan kisaran nilai yang dipilih.

Lihat Versi 2.2 Demo | Unduh Mootools ganda Pinned Versi Slider 2.2 (download 11768 kali)

Anda dapat dengan mudah mengubah tampilan dan nuansa dari berbagai indikator (warna biru pada contoh di atas), tombol slider, lagu slider dengan memodifikasi slider.css seperti yang diperlukan.

Jangan drop me komentar jika Anda merasa berguna.