Rumah > hujung hadapan web > tutorial js > jQuery EasyUI menu dan butang untuk mencipta menu ringkas dan pautan buttons_jquery

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

WBOY
Lepaskan: 2016-05-16 15:31:34
asal
1451 orang telah melayarinya

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>
Salin selepas log masuk

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

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

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>
Salin selepas log masuk
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
Salin selepas log masuk
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan