Latest web development tutorials
×

jQuery EasyUI kuliah

jQuery EasyUI kuliah jQuery EasyUI pengantar singkat

jEasyUI aplikasi

jEasyUI Membuat CRUD Aplikasi jEasyUI Membuat data grid CRUD jEasyUI formulir aplikasi CRUD jEasyUI Buat pembaca RSS

jEasyUI Drag dan Drop

jEasyUI tarik dasar dan penurunan jEasyUI Buat penurunan keranjang belanja jEasyUI Buat kurikulum sekolah

jEasyUI Menu dan tombol

jEasyUI Membuat menu sederhana jEasyUI Membuat tombol link jEasyUI Membuat tombol menu jEasyUI Buat tombol perpecahan

jEasyUI tata ruang

jEasyUI Membuat layout perbatasan jEasyUI Membuat layout yang kompleks jEasyUI Buat panel lipat jEasyUI Buat tab jEasyUI Dinamis menambahkan tab jEasyUI Tambahkan tab AutoPlay jEasyUI Buat XP Style di panel sebelah kiri

jEasyUI Data Grid

jEasyUI Dikonversi ke HTML jaringan data tabel jEasyUI Mendapatkan baris data yang dipilih jEasyUI Tambahkan Bertanya jEasyUI Tambahkan toolbar jEasyUI Membuat toolbar yang kompleks jEasyUI Pengaturan kolom freeze jEasyUI Dinamis Perubahan kolom jEasyUI Format Kolom jEasyUI Mengatur semacam itu jEasyUI Pemesanan kustom jEasyUI Buat kombinasi kolom jEasyUI Tambahkan kotak centang jEasyUI kustom Pager jEasyUI Aktifkan editing inline jEasyUI Editor diperpanjang jEasyUI operasi kolom jEasyUI sel gabungan jEasyUI Buat Custom View jEasyUI Buat Ringkasan footer jEasyUI Ketentuan yang ditetapkan baris warna latar belakang jEasyUI Membuat kotak properti jEasyUI garis diperluas Tampilkan Detail jEasyUI Buat Pembagian jEasyUI Menampilkan data besar jEasyUI Menambahkan komponen halaman

jEasyUI jendela

jEasyUI Membuat jendela yang sederhana jEasyUI Kustom Jendela Toolbars jEasyUI Jendela dan Layout jEasyUI Buat dialog jEasyUI Sesuaikan kotak dialog

jEasyUI menu pohon

jEasyUI Gunakan tag untuk membuat menu pohon jEasyUI Buat menu pohon asynchronous jEasyUI Menambahkan menu pohon simpul jEasyUI Membuat menu pohon dengan kotak centang jEasyUI Drag dan drop kontrol menu pohon jEasyUI Beban menu tree node orangtua / anak jEasyUI Membuat pohon grid yang didasarkan jEasyUI Buat mesh pohon kompleks jEasyUI Dinamis dimuat jaringan pohon jEasyUI Menambahkan tab Grid pohon jEasyUI Lazy loading pohon jaringan simpul

jEasyUI bentuk

jEasyUI Menyerahkan formulir untuk membuat asynchronous jEasyUI bentuk Authentication jEasyUI Membuat kotak pohon drop-down jEasyUI Format kotak drop-down jEasyUI Filter data grid drop-down

jEasyUI Reference manual

jQuery EasyUI widget jQuery EasyUI penyebaran

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)

Layout (tata letak)

Menu (Menu) dan Button (Tombol)

Form (Formulir)

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)
    } ">