Heim >Web-Frontend >js-Tutorial >jQuery EasyUI-Menüs und -Schaltflächen zum Erstellen einfacher Menüs und zum Verknüpfen von Buttons_jquery

jQuery EasyUI-Menüs und -Schaltflächen zum Erstellen einfacher Menüs und zum Verknüpfen von Buttons_jquery

WBOY
WBOYOriginal
2016-05-16 15:31:341453Durchsuche

Menü ist in einigen DIV-Tags definiert, wie unten gezeigt:

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

Wenn das Menü erstellt wird, wird es nicht angezeigt, um es anzuzeigen, oder die Methode „hide“, um es auszublenden:

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

Schaltfläche „Link erstellen“

Normalerweise werden Schaltflächen mit dem bb9345e55eb71822850ff156dfde57c8-Element erstellt, während Linkschaltflächen (Link-Schaltflächen) mit dem 3499910bf9dac5ae3c52d5ede7383485-Element erstellt werden. Eigentlich ist eine Link-Schaltfläche (Link-Schaltfläche) ein 3499910bf9dac5ae3c52d5ede7383485-Element, das als Schaltflächenstil angezeigt wird.

Um einen Link-Button zu erstellen, müssen Sie lediglich ein Klassenattribut namens „easyui-linkbutton“ zum 3499910bf9dac5ae3c52d5ede7383485-Element hinzufügen:

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

Wie Sie sehen können, ist die iconCls-Eigenschaft ein CSS-Klassenstil für Symbole, der ein Symbolbild auf der Schaltfläche anzeigt.

Manchmal müssen Sie eine Link-Schaltfläche deaktivieren oder aktivieren. Der folgende Code zeigt, wie Sie eine Link-Schaltfläche deaktivieren:

$(selector).linkbutton('disable'); // call the 'disable' method
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn