Pelajari pemalam jQuery EasyUI EasyUI dengan mudah untuk mencipta menu dan buttons_jquery

1. Cipta menu ringkas dengan EasyUI

Menu ditakrifkan dalam beberapa teg DIV, seperti ditunjukkan di bawah:

<div id="mm" class="easyui-menu" style="width:120px;">
 <div onclick="javascript:alert('new')">New</div>
 <div>
 <span>Open</span>
 <div style="width:150px;">
 <div><b>Word</b></div>
 <div>Excel</div>
 <div>PowerPoint</div>
 </div>
 </div>
 <div icon="icon-save">Save</div>
 <div class="menu-sep"></div>
 <div>Exit</div>
</div>

Apabila menu dibuat, ia tidak akan dipaparkan Panggil kaedah 'tunjukkan' untuk memaparkannya atau kaedah 'sembunyikan' untuk menyembunyikannya:

$('#mm').menu('show', {
 left: 200,
 top: 100
});

2. Butang penciptaan EasyUI
1 EasyUI mencipta butang pautan (Butang Pautan)
Biasanya, butang dibuat menggunakan elemen manakala butang pautan (Butang Pautan) dibuat menggunakan elemen Jadi sebenarnya butang pautan (Butang Pautan) ialah elemen

Untuk membuat Butang Pautan, anda hanya perlu menambah atribut kelas yang dipanggil 'easyui-linkbutton' pada elemen

<div style="padding:5px;background:#fafafa;width:500px;border:1px solid #ccc">
 <a href="#" class="easyui-linkbutton" iconCls="icon-cancel">Cancel</a>
 <a href="#" class="easyui-linkbutton" iconCls="icon-reload">Refresh</a>
 <a href="#" class="easyui-linkbutton" iconCls="icon-search">Query</a>
 <a href="#" class="easyui-linkbutton">text button</a>
 <a href="#" class="easyui-linkbutton" iconCls="icon-print">Print</a>
</div>
 
<div style="padding:5px;background:#fafafa;width:500px;border:1px solid #ccc">
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-cancel">Cancel</a>
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-reload">Refresh</a>
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search">Query</a>
 <a href="#" class="easyui-linkbutton" plain="true">text button</a>
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-print">Print</a>
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help"></a>
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-back"></a>
</div>

Seperti yang anda boleh lihat, sifat iconCls ialah gaya kelas CSS untuk ikon yang memaparkan imej ikon pada butang.

Kadangkala anda perlu melumpuhkan Butang Pautan atau mendayakannya Kod berikut menunjukkan cara untuk melumpuhkan Butang Pautan:
$(selector).linkbutton('disable'); // panggil kaedah 'disable'

2. EasyUI mencipta butang menu (Butang Menu)
Butang Menu mengandungi butang dan komponen menu Apabila anda mengklik atau menggerakkan tetikus ke atas butang, menu yang sepadan akan dipaparkan.

Untuk menentukan Butang Menu, anda harus menentukan Butang Pautan dan menu Berikut ialah contoh:

<div style="background:#fafafa;padding:5px;width:200px;border:1px solid #ccc">
 <a href="#" class="easyui-menubutton" menu="#mm1" iconCls="icon-edit">Edit</a>
 <a href="#" class="easyui-menubutton" menu="#mm2" iconCls="icon-help">Help</a>
</div>
<div id="mm1" style="width:150px;">
 <div iconCls="icon-undo">Undo</div>
 <div iconCls="icon-redo">Redo</div>
 <div class="menu-sep"></div>
 <div>Cut</div>
 <div>Copy</div>
 <div>Paste</div>
 <div class="menu-sep"></div>
 <div iconCls="icon-remove">Delete</div>
 <div>Select All</div>
</div>
<div id="mm2" style="width:100px;">
 <div>Help</div>
 <div>Update</div>
 <div>About</div>
</div>

Sekarang Butang Menu telah ditentukan, anda tidak perlu menulis sebarang kod javascript.

3. EasyUI mencipta butang belah (Butang Pisah)

Butang Pisah Mengandungi Butang Pautan dan Menu. Apabila pengguna mengklik atau menuding tetikus di atas kawasan anak panah ke bawah, menu yang sepadan akan dipaparkan. Contoh ini menunjukkan cara membuat dan menggunakan Butang Pisah.

Kami mencipta Butang Pisah dan Butang Pautan:

<div style="border:1px solid #ccc;background:#fafafa;padding:5px;width:120px;">
 <a href="#" class="easyui-splitbutton" menu="#mm" iconCls="icon-edit">Edit</a>
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help"></a>
</div>
<div id="mm" style="width:150px;">
 <div iconCls="icon-undo">Undo</div>
 <div iconCls="icon-redo">Redo</div>
 <div class="menu-sep"></div>
 <div>Cut</div>
 <div>Copy</div>
 <div>Paste</div>
 <div class="menu-sep"></div>
 <div>
 <span>Open</span>
 <div style="width:150px;">
 <div>Firefox</div>
 <div>Internet Explorer</div>
 <div class="menu-sep"></div>
 <div>Select Program...</div>
 </div>
 </div>
 <div iconCls="icon-remove">Delete</div>
 <div>Select All</div>
</div>

Sekarang Butang Split telah ditentukan, anda tidak perlu menulis sebarang kod javascript.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.