jQuery EasyUI menu dan butang untuk mencipta menu ringkas dan pautan buttons_jquery

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

Buat 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'); // call the 'disable' method