linkbutton(按钮) · easyUI

### LinkButton（按钮）使用$.fn.linkbutton.defaults重写默认值对象。按钮组件使用超链接按钮创建。它使用一个普通的<a>标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。 ![](https://box.kancloud.cn/2016-07-19_578d91352e6f9.png) #### #### 使用案例 ##### 创建按钮使用标签创建按钮更加简单。 1. **<a** id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'"**>**easyui**</a>** <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a> 也可以使用Javascript创建按钮。 1. <a id="btn" href="#">easyui</a> 1. $('#btn').linkbutton({ 1. iconCls: 'icon-search' 1. }); <a id="btn" href="#">easyui</a> $('#btn').linkbutton({ iconCls: 'icon-search' }); ##### 处理按钮的点击点击按钮会将用户引导到其他页面。 1. **<a** href="otherpage.php" class="easyui-linkbutton" data-options="iconCls:'icon-search'"**>**easyui**</a>** <a href="otherpage.php" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a> 下面的示例提示了一个警告信息。 1. **<a** href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" 1. onclick="javascript:alert('easyui')"**>**easyui**</a>** <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="javascript:alert('easyui')">easyui</a> Bind click handler using jQuery. 1. **<a** id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'"**>**easyui**</a>** <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a> 1. $(function(){ 1. $('#btn').bind('click', function(){ 1. alert('easyui'); 1. }); 1. }); $(function(){ $('#btn').bind('click', function(){ alert('easyui'); });}); #### #### 属性 <table class="doc-table"><tbody><tr><th>属性名</th> <th>属性值类型</th> <th>描述</th> <th>默认值</th></tr><tr><td>id</td> <td>string</td> <td>组件的ID属性。</td> <td>null</td></tr><tr><td>disabled</td> <td>boolean</td> <td>为true时禁用按钮。</td> <td>false</td></tr><tr><td>toggle</td> <td>boolean</td> <td>为true时允许用户切换其状态是被选中还是未选择，可实现checkbox复选效果。（该属性自1.3.3版开始可用）</td> <td>false</td></tr><tr><td>selected</td> <td>boolean</td> <td>定义按钮初始的选择状态，true为被选中，false为未选中。（该属性自1.3.3版开始可用）</td> <td>false</td></tr><tr><td>group</td> <td>string</td> <td>指定相同组名称的按钮同属于一个组，可实现radio单选效果。（该属性自1.3.3版开始可用）</td> <td>null</td></tr><tr><td>plain</td> <td>boolean</td> <td>为true时显示简洁效果。</td> <td>false</td></tr><tr><td>text</td> <td>string</td> <td>按钮文字。</td> <td>''</td></tr><tr><td>iconCls</td> <td>string</td> <td>显示在按钮文字左侧的图标(16x16)的CSS类ID。</td> <td>null</td></tr><tr><td>iconAlign</td> <td>string</td> <td>按钮图标位置。可用值有： 'left','right'（该属性自1.3.2版开始可用） 'top','bottom'（该属性自1.3.6版开始可用）</td> <td>left</td></tr><tr><td>size</td> <td>string</td> <td>按钮大小。可用值有：'small','large'。（该属性自1.3.6版开始可用）</td> <td>small</td></tr></tbody></table> #### #### 事件 | 事件名 | 事件参数 | **描述** | |-----|-----|-----| | onClick | none | 在点击按钮的时候触发。**（该事件自1.3.6版开始可用）** | #### #### 方法 <table class="doc-table"><tbody><tr><th>方法名</th> <th>方法参数</th> <th>描述</th></tr><tr><td>options</td> <td>none</td> <td>返回属性对象。</td></tr><tr><td>resize</td> <td>param</td> <td>重置按钮。（该方法自1.4版开始可用） 代码示例：<pre>$('#btn').linkbutton('resize', { width: '100%', height: 32 });</pre></td></tr><tr><td>disable</td> <td>none</td> <td>禁用按钮。 代码示例：<pre>$('#btn').linkbutton('disable'); </pre></td></tr><tr><td>enable</td> <td>none</td> <td>启用按钮。 代码示例：<pre>$('#btn').linkbutton('enable'); </pre></td></tr><tr><td>select</td> <td>none</td> <td>选择按钮。（该方法自1.3.3版开始可用）</td></tr><tr><td>unselect</td> <td>none</td> <td>取消选择按钮。（该方法自1.3.3版开始可用）</td></tr></tbody></table>