Sekilas Javascript Framework terpopuler II

Perpustakaan script.aculo.us bukan Framework itu sendiri, melainkan sebuah add-on untuk Framework Prototype. Fokus mereka adalah terutama user interface - efek visual dan terutama perilaku antarmuka. script.aculo.us menyediakan enam efek inti: Opacity, Skala, Morph, Pindah, Sorot dan Paralel. Efek kombinasi menggunakan ini untuk mencapai efek yang lebih rumit banyak. Ada juga koleksi besar pengguna memberikan kontribusi efek untuk memilih dari. Antarmuka perilaku. diimplementasikan dalam objek seperti Draggables, Droppables dan Sortables. Akhirnya, Kerangka script.aculo.us menyediakan kontrol lengkap
untuk dipilih, termasuk Slider, dan autocompletion Pada Editor Place, untuk beberapa nama.

Core Effects

Efek inti tujuh tercantum di atas merupakan dasar dari perpustakaan script.aculo.us Efek Visual JavaScript. Sintaks dasar untuk memulai berpengaruh adalah: Effect.EffectName baru (elemen, diperlukan-params, [pilihan]);. Parameter elemen dapat berupa string yang berisi ID dari elemen atau elemen DOM itu sendiri. Argumen yang dibutuhkan-params tergantung pada efek yang disebut dan tidak mungkin dibutuhkan. Bahkan, efek kebanyakan tidak memiliki parameter yang diperlukan. Parameter pilihan adalah hash yang menyediakan parameter apapun kustomisasi tambahan untuk efek. Pilihan bisa lebih umum atau efek khusus. Berikut beberapa kode yang mengubah opacity sebuah elemen ,5-1 dalam transisi linier dari dua detik:

1	new Effect.Opacity( 'my_element'
2	,
3	{
4	duration:   2.0,
5	transition: Effect.Transitions.linear,
6	from:       1.0,
7	to:         0.5
8	}
9	);

Ini adalah efek kombinasi yang termasuk dalam script.aculo.us:

• Effect.Appear, Effect.Fade
• Effect.Puff
• Effect.DropOut
• Effect.Shake
• Effect.SwitchOff
• Effect.BlindDown, Effect.BlindUp
• Effect.SlideDown, Effect.SlideUp
• Effect.Pulsate
• Effect.Squish
• Effect.Fold
• Effect.Grow
• Effect.Shrink

Ada juga metode utilitas Effect.toggle () untuk menampilkan unsur-unsur sementara dengan Slide Muncul / Fade, atau animasi Blind. Semua efek kombinasi didasarkan pada Efek Core, dan dapat digunakan sebagai dasar untuk menulis efek Anda sendiri.

Berikut ini adalah contoh dari Effect.Shake () fungsi, yang bergerak elemen sedikit ke kiri, kemudian ke kanan, berulang kali:

1	<a href="#" onclick="new Effect.Shake('span_shake', 0.33, 15); return false;">Click me to shake!</a>

Parameter adalah: ID dari elemen, durasi efek, dan jarak untuk memindahkan elemen, dalam piksel. Hanya parameter pertama diperlukan.

Behaviors.

Modul Perilaku berisi kelas yang memungkinkan Anda menambahkan perilaku khusus untuk elemen dalam dokumen. Mereka termasuk: draggable, Droppables, dan sortable.

Sebuah objek draggable adalah salah satu Anda dapat bergerak menggunakan mouse. Sintaksnya adalah: baru draggable ('id_of_element', [pilihan]);. Pilihannya adalah objek yang dapat berisi hash sifat opsional banyak. Misalnya, pengaturan pilihan untuk kembali {: true, snap: [40, 40]} akan menyebabkan elemen untuk kembali ke lokasi yang disediakan dalam properti snap. Anda juga dapat mengatur pilihan untuk {gulir: jendela} telah browser gulir untuk menjaga elemen dalam tampilan.

Droppables digunakan dalam hubungannya dengan Draggables. Unsur Droppables bereaksi ketika draggable dijatuhkan ke atasnya. Untuk menambahkan draggable ke Droppables pada halaman, menggunakan Droppables.add () metode kelas. Pada contoh berikut, elemen 'shopping_cart' yang ditambahkan ke objek Droppables. Sifat menerima mengatakan itu bahwa kelas dari objek harus berupa tipe 'produk.' Melepaskan tombol kiri mouse dalam wadah Droppables akan menyebabkan teks 'shopping_cart_text' elemen yang akan diperbarui dengan teks alt elemen:

1	Droppables.add( 'shopping_cart'
2	,
3	{
4	accept: 'products'
5	,
6	onDrop: function(element)
7	{
8	$('shopping_cart_text').update('Dropped the ' + element.alt + ' on me.');
9	} 1
10	}
11	);

Perilaku lalu, disebut sortable, adalah cara cepat untuk menginisialisasi elemen draggable banyak dalam elemen kontainer. Bila Anda membuat sortable baru, script.aculo.us menangani penciptaan Droppables draggable sesuai. Formatnya adalah sebagai berikut: Sortable.create ('id_of_container', [pilihan]);. Obyek sortable juga menyediakan beberapa fungsi yang berguna. Para Sortable.serialize () fungsi serializes yang sortable dalam format yang sesuai untuk HTTP GET atau permintaan POST. Ini dapat digunakan untuk mengirimkan urutan sortable melalui panggilan Ajax. Para Sortable.sequence () fungsi mengambil nilai-nilai dalam objek array berurutan.

Controls

Editor di tempat memungkinkan untuk AJAX yang didukung "on-the-fly" textfield. Sintaksnya adalah sebagai berikut: Ajax.InPlaceEditor baru (elemen, url, {pilihan});. Konstruktor mengambil tiga parameter: yang pertama adalah unsur yang harus mendukung di tempat editing, yang kedua adalah URL untuk menyerahkan nilai berubah menjadi (server harus merespon dengan nilai diperbarui), yang ketiga adalah hash pilihan. Komponen sisi server mendapat nilai baru sebagai "nilai" parameter (metode POST), dan harus mengirimkan nilai baru sebagai tubuh respon.

Ajax.InPlaceCollectionEditor ini adalah berbasis AJAX "on-the-fly" lapangan dengan kotak pilih bukan bidang teks Ajax.InPlaceEditor. Konstruktor terlihat seperti ini: baru Ajax.InPlaceCollectionEditor (elemen, url, {Koleksi: [Array], [moreOptions]});. Konstruktor mengambil tiga parameter: yang pertama adalah unsur yang harus mendukung di tempat editing, yang kedua adalah url untuk menyerahkan nilai berubah menjadi (sekali lagi, server harus menanggapi dengan nilai diperbarui), yang ketiga adalah hash dari pilihan . Dalam bahwa hash dari pilihan harus menjadi field yang disebut koleksi yang adalah array dari nilai-nilai untuk menempatkan di dalam kotak pilih Anda. Komponen sisi server mendapat nilai baru sebagai "nilai" parameter dan harus mengirimkan nilai baru sebagai tubuh respon:

1	new Ajax.InPlaceCollectionEditor(
2	'editme',
3	'/demoajaxreturn.html',
4	{ collection: ['one','two','three'],
5	ajaxOptions: {method: 'get'} }
6	);

Ada juga yang sangat fleksibel Ajax.Autocompleter kontrol yang memungkinkan Anda untuk memilih apa wadah untuk mengisi dengan saran. Berikut ini adalah contoh yang menyediakan: id dari field id dari wadah untuk mengisi, url dari script sisi server, dan pilihan hash. Yang terakhir ini meliputi:

• Nama parameter untuk string diketik oleh pengguna pada bidang autocompletion.
• jumlah minimum karakter yang harus dimasukkan dalam kolom input sebelum permintaan Ajax dibuat.
• Sebuah fungsi kustom untuk menggantikan fungsi built-in yang menambahkan teks item daftar dengan bidang masukan. Fungsi kustom disebut setelah elemen telah diperbarui (yaitu ketika pengguna telah memilih entri).
• ID dari elemen untuk menampilkan sementara permintaan Ajax sedang berlangsung. Elemen ini akan disembunyikan setelah permintaan selesai. Hal ini berguna untuk menampilkan ikon animasi seperti pemintal atau jam pasir selama pemrosesan.

1	new Ajax.Autocompleter( "autocomplete",
2	"autocomplete_choices",
3	"/url/on/server",
4	{
5	paramName:    "value",
6	minChars:     2,
7	updateElement:addItemToList,
8	indicator:    'indicator1'
9	}
10	);

Kontrol Autocompleter.Local adalah sama dengan Ajax.Autocompleter kecuali bahwa ia menggunakan array lokal string untuk mengisi wadah saran. Ini berguna untuk daftar statis atau di mana koneksi yang lambat mungkin menjadi masalah.

Frameworks srcipt.aculo.us memiliki kontrol slider besar yang dapat digunakan untuk memilih nilai-nilai satu atau beberapa dari berbagai diberikan, bahkan satu set nilai tetap. Seperti kontrol lain, menciptakan satu dapat yang sederhana seperti memanggil konstruktor Control.Slider () dengan ID atau elemen untuk pegangan dan trek, atau Anda dapat memberikan objek hash dengan sejumlah pilihan, seperti dalam contoh berikut:

1	var mySlider = new Control.Slider(  'slider',
2	'track',
3	{
4	axis:'vertical',
5	minimum: 60,
6	maximum: 360,
7	alignX: -10,
8	alignY: -5,
9	handleImage: 'slider_handle',
10	}
11	);

Berikut adalah cara kami akan membuat kontrol slider yang memilih dari satu set nilai tetap:

1	var sliderLimited = new Control.Slider( 'slider_Limited',
2	'track_Limited',
3	{
4	minimum: 2,
5	maximum: 45,
6	increment: 9,
7	alignX: -5,
8	alignY: -5,
9	values: [2, 10, 15, 30, 45]
10	}
11	);

Jika kontrol ini tidak sesuai dengan kebutuhan Anda, ingatlah bahwa ada puluhan user-disampaikan kontrol dan lebih yang ditambahkan setiap hari!