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 07cb10094d7fc1aeafbde86dbf86ce42 manakala butang pautan (Butang Pautan) dibuat menggunakan elemen 3499910bf9dac5ae3c52d5ede7383485 Jadi sebenarnya butang pautan (Butang Pautan) ialah elemen 3499910bf9dac5ae3c52d5ede7383485

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

<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