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 , tandis que les boutons de lien (Link Buttons) sont créés à l'aide de l'élément Donc, en fait, un bouton de lien (Link Button) est un élément 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

<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