jQuery EasyUI Plugin
jQuery EasyUI disediakan untuk membuat halaman web lintas-browser set lengkap komponen, termasuk datagrid kuat (data grid), treegrid (bentuk pohon), panel (Panel), combo (kombinasi tarik-turun) dan sebagainya. Pengguna dapat menggabungkan komponen ini juga dapat digunakan sendiri salah.
Plug-in daftar
Dasar (base)
- parser parser
- loader Easyloader
- diseret diseret
- Droppable dapat ditempatkan
- Resizable Ukuran Adjustable
- tab pagination
- kotak pencarian telusur
- Progress bar Progressbar
- balon tooltip
Layout (tata letak)
Menu (Menu) dan Button (Tombol)
Form (Formulir)
- Form Form
- kotak verifikasi Validatebox
- kombinasi combo
- combo box combobox
- pohon kombinasi Combotree
- Combogrid jaringan komposit
- Numberbox kotak digital
- Tanggal kotak Datebox
- Datetimebox Tanggal bingkai Waktu
- kalender kalender
- Spinner spinner
- Numberspinner nilai spinner
- Timespinner waktu spinner
- slider slider
Jendela (window)
Datagrid (Data Grid) dan Pohon (pohon)
widget
Easyui Setiap komponen memiliki sifat, metode dan event. Pengguna dapat dengan mudah meluas ke komponen-komponen.
milik
Hal ini didefinisikan dalam jQuery.fn. {Plugin} .defaults. Misalnya, atribut dialog didefinisikan dalam jQuery.fn.dialog.defaults.
peristiwa
Acara (fungsi callback) didefinisikan dalam jQuery.fn. {Plugin} .defaults.
cara
Metode panggilan sintaks: $ ( 'pemilih') Plugin ( 'metode', parameter) ;.
dimana:
- jquery pemilih adalah pemilih objek.
- Plugin adalah nama plug-in.
- Metode dengan plug untuk cocok dengan metode yang ada.
- parameter adalah objek parameter bisa menjadi objek, string ...
Metode ini didefinisikan dalam jQuery.fn. {Plugin} .methods. Setiap metode memiliki dua parameter: JQ dan param. Parameter pertama 'JQ' diperlukan, referensi ke objek jQuery. Parameter kedua 'param' mengacu pada parameter metode yang sebenarnya berlalu. Misalnya, untuk memperpanjang metode komponen dialog yang disebut pendekatan 'mymove', sebagai berikut:
$ .extend ($. Fn.dialog.methods, { mymove: function (JQ, newposition) { kembali jq.each (function () { $ (Ini) .dialog ( 'bergerak', newposition); }); } });
Sekarang Anda dapat memanggil metode 'mymove' untuk memindahkan kotak dialog (dialog) ke lokasi yang ditentukan:
$ ( '# Dd'). Dialog ( 'mymove', { kiri: 200, top: 100 });
Saya mulai menggunakan jQuery EasyUI
Ambil Library, dan referensi EasyUI CSS dan JavaScript file dalam halaman Anda.
<Link rel = "stylesheet" type = "text / css" href = "easyui / themes / default / easyui.css"> <Link rel = "stylesheet" type = "text / css" href = "easyui / tema / icon.css"> <Script type = "text / javascript" src = "easyui / jquery-1.7.2.min.js"> </ script> <Script type = "text / javascript" src = "easyui / jquery.easyui.min.js"> </ script>
Setelah Anda referensi EasyUI file yang diperlukan, Anda dapat menentukan komponen EasyUI melalui penggunaan tag atau JavaScript. Misalnya, untuk sebuah panel atas dengan fungsi lipat, Anda perlu menulis kode HTML sebagai berikut:
<Div id = "p" class = "easyui-panel" style = "width: 500px; height: 200px; padding: 10px;" title = "Panel saya" iconCls = "icon-save" dilipat = "true"> Isi panel </ Div>
Ketika membuat komponen dengan menandai, atribut 'Data-opsi' digunakan untuk mendukung nama properti sejak Versi 1.3 HTML5 kompatibel. Jadi Anda dapat menulis ulang kode di atas sebagai berikut:
<Div id = "p" class = "easyui-panel" style = "width: 500px; height: 200px; padding: 10px;" title = "Panel saya" Data-opsi = "iconCls: 'icon-save', dilipat: true"> Isi panel </ Div>
Kode berikut menunjukkan cara membuat combo box terikat acara 'onselect'.
<Input class = "easyui-combobox" name = "language" Data-opsi = " url: 'combobox_data.json', valueField: 'id', textField: 'teks', panelHeight: 'auto', onselect: function (record) { alert (record.text) } ">