pemalam jQuery EasyUI


jQuery EasyUI menyediakan set lengkap komponen untuk mencipta halaman web merentas penyemak imbas, termasuk grid data (grid data), grid pepohon (jadual pokok), panel (panel), kombo (kombinasi lungsur turun) )dll . Pengguna boleh menggunakan komponen ini secara gabungan atau menggunakan salah satu daripadanya secara individu.

Senarai pemalam

Asas (Asas)

  • Parser parser

  • Easyloader loader

  • Boleh Diseret

  • Boleh Dijatuhkan

  • Boleh Diubah Saiz

  • Paging penomboran

  • Kotak carian kotak carian

  • Bar kemajuan bar kemajuan

  • Kotak gesaan petua alat

Reka letak (susun atur)

  • Panel panel

  • Halaman tab tab/ Tab

  • Panel Runtuh Akordion

  • Reka Letak Reka Letak

Menu (menu) dan Butang ( Butang)

  • Menu Menu

  • Butang Pautan Butang Pautan

  • Butang Menu Butang Menu

  • Butang Pisah Butang Pisah

Borang (borang)

  • Borang borang

  • Kotak pengesahan kotak pengesahan

  • Kombo kombinasi

  • Kombo kombo box

  • Pokok gabungan kombotree

  • Grid gabungan kobogrid

  • Kotak nombor kotak nombor

  • Kotak tarikh kotak tarikh

  • Kotak masa tarikh

  • Kalendar

  • Spinner Spinner

  • Numberspinner value spinner

  • Pemutar masa pemintal masa

  • Peluncur gelangsar

Tetingkap

  • Tetingkap Tetingkap

  • Kotak dialog dialog

  • Kotak mesej mesej

Grid Data (grid data) dan Pokok (pokok)

  • Grid data Datagrid

  • Grid Hartanah Propertygrid

  • Pokok Pokok

  • Treegrid Tree Grid

Plug-in

Setiap komponen easyui mempunyai sifat, kaedah dan acara. Pengguna boleh melanjutkan komponen ini dengan mudah.

Harta Sifat

ditakrifkan dalam jQuery.fn.{plugin}.defaults. Sebagai contoh, sifat dialog ditakrifkan dalam jQuery.fn.dialog.defaults. Acara

acara

(fungsi panggil balik) juga ditakrifkan dalam jQuery.fn.{plugin}.defaults.

Kaedah

Sintaks untuk memanggil kaedah: $('selector').plugin('method', parameter);

di mana:

  • pemilih ialah pemilih objek jquery.

  • pemalam ialah nama pemalam.

  • kaedah ialah kaedah sedia ada yang sepadan dengan pemalam.

  • parameter ialah objek parameter, yang boleh menjadi objek atau rentetan...

    Kaedah

ditakrifkan dalam kaedah jQuery.fn.{plugin}. Setiap kaedah mempunyai dua parameter: jq dan param. Parameter pertama 'jq' diperlukan dan merujuk kepada objek jQuery. Parameter kedua 'param' merujuk kepada parameter sebenar yang dihantar kepada kaedah. Sebagai contoh, untuk melanjutkan kaedah bernama 'mymove' bagi komponen dialog, kodnya adalah seperti berikut: 

$.extend($.fn.dialog.methods, {
    mymove: function(jq, newposition){
		return jq.each(function(){
			$(this).dialog('move', newposition);
		});
    }
});

Kini anda boleh memanggil kaedah 'mymove' untuk mengalihkan kotak dialog (dialog) ke kedudukan yang ditentukan : 

$('#dd').dialog('mymove', {
    left: 200,
    top: 100
});

Mulakan dengan jQuery EasyUI

Muat turun perpustakaan dan rujuk fail EasyUI CSS dan JavaScript dalam halaman anda. 

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/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 merujuk fail EasyUI yang diperlukan, anda boleh menentukan komponen EasyUI melalui penanda atau menggunakan JavaScript. Sebagai contoh, untuk mendahului panel dengan fungsi boleh lipat, anda perlu menulis kod HTML berikut: 

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
    title="My Panel" iconCls="icon-save" collapsible="true">
    The panel content
</div>

Apabila membuat komponen melalui penanda, atribut 'pilihan data' digunakan untuk menyokong keserasian HTML5 sejak versi 1.3 Harta. nama. Jadi, anda boleh menulis semula kod di atas seperti berikut: 

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
    title="My Panel" data-options="iconCls:'icon-save',collapsible:true">
    The panel content
</div>

Kod di bawah menunjukkan cara mencipta kotak kombo yang mengikat acara 'onSelect'.

rreeee