EasyuiAPI：菜单

Posted 2020-06-28

一、LinkButton（按钮）

1.通过标签创建：

<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘">easyui</a>

2.通过JS调用：

　　html代码：

<a id="btn" href="#">easyui</a>    

　　JS代码：

$(‘#btn‘).linkbutton({    
    iconCls: ‘icon-search‘   
});  

二、菜单按钮

1.通过标签创建：

<a href="javascript:void(0)" id="mb" class="easyui-menubutton"data-options="menu:‘#mm‘,iconCls:‘icon-edit‘">Edit</a>   
<div id="mm" style="width:150px;">   
    <div data-options="iconCls:‘icon-undo‘">Undo</div>   
    <div data-options="iconCls:‘icon-redo‘">Redo</div>   
    <div class="menu-sep"></div>   
    <div>Cut</div>   
    <div>Copy</div>   
    <div>Paste</div>   
    <div class="menu-sep"></div>   
    <div data-options="iconCls:‘icon-remove‘">Delete</div>   
    <div>Select All</div>   
</div> 

2.通过JS调用:

　　html代码：

<a href="javascript:void(0)" id="mb">Edit</a>   
<div id="mm" style="width:150px">   
　　...    
</div>  

　　JS代码：

$(‘#mb‘).menubutton({    
    iconCls: ‘icon-edit‘,    
    menu: ‘#mm‘   
}); 

三、SplitButton（分割按钮）

1.通过标签调用：

<a href="javascript:void(0)" id="sb" class="easyui-splitbutton"data-options="menu:‘#mm‘,iconCls:‘icon-ok‘" onclick="javascript:alert(‘ok‘)">Ok</a>   
<div id="mm" style="width:100px;">   
    <div data-options="iconCls:‘icon-ok‘">Ok</div>   
    <div data-options="iconCls:‘icon-cancel‘">Cancel</div>   
</div>  

2.通过JS调用：

　　html代码：

<a href="javascript:void(0)" id="sb" onclick="javascript:alert(‘ok‘)>Ok</a>   
<div id="mm" style="width:100px;">   
　　...    
</div> 

　　JS代码：

$(‘#sb‘).splitbutton({    
    iconCls: ‘icon-ok‘,    
    menu: ‘#mm‘   
});  

四、SwitchButton（开关按钮）

1.通过标签调用：

 <input class="easyui-switchbutton" checked> 
 <input class="easyui-switchbutton" data-options="onText:‘Yes‘,offText:‘No‘">

2.通过JS调用：

　　html代码：

<a href="javascript:void(0)" id="sb" onclick="javascript:alert(‘ok‘)>Ok</a>   
<div id="mm" style="width:100px;">   
　　...    
</div>  

　　JS代码：

<input id="sb" style="width:200px;height:30px"> 
<script type="text/javascript"> 
  $(function(){ 
    $(‘#sb‘).switchbutton({ 
      checked: true, 
      onChange: function(checked){ 
        console.log(checked); 
      } 
    }) 
  }) 
</script>