Menus et boutons jQuery EasyUI pour créer des menus simples et lier des boutons_jquery

Le menu est défini dans certaines balises DIV, comme indiqué ci-dessous :

 <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>

Lorsque le menu est créé, il ne sera pas affiché. Appelez la méthode 'show' pour l'afficher ou la méthode 'hide' pour le masquer :

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

Bouton Créer un lien

Normalement, les boutons sont créés à l'aide de l'élément bb9345e55eb71822850ff156dfde57c8, tandis que les boutons de lien (Link Buttons) sont créés à l'aide de l'élément 3499910bf9dac5ae3c52d5ede7383485 Donc, en fait, un bouton de lien (Link Button) est un élément 3499910bf9dac5ae3c52d5ede7383485 affiché sous forme de style de bouton.

Pour créer un bouton de lien, il vous suffit d'ajouter un attribut de classe appelé 'easyui-linkbutton' à l'élément 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>

Comme vous pouvez le voir, la propriété iconCls est un style de classe CSS pour icône qui affiche une image d'icône sur le bouton.

Parfois, vous devez désactiver un bouton de lien ou l'activer. Le code suivant montre comment désactiver un bouton de lien :

$(selector).linkbutton('disable'); // call the 'disable' method