easyui创建链接按钮(Link Button)

easyui创建链接按钮(Link Button)

原文地址：http://www.expert58.com/news/1986.html

Normally a button is created using <button/> element. A link button is created using <a/> element, so in fact a link button is a <a/> element but show a button style.

通常一个按钮是通过< button/ >元素来创建的。创建一个链接按钮使用<a/ >元素, 所以事实上一个链接按钮是一个< a/ >元素, 但显示一个按钮样式。

链接按钮的效果：

To create a link button, all you want to do is to add the class attribute named 'easyui-linkbutton' to the <a/> element:

创建一个链接按钮,你所要做的就是给< a/ >元素添加“easyui-linkbutton” 样式:

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

As you can see, the iconCls attribute is a icon CSS class that show an icon image on button.

如您所见, iconCls属性是一个图标css样式, 将button显示为icon图标的css样式。

Sometime you decide to disable a link button or enable it, below code demostrate how to disable a link button:

有时你决定禁用或启用某个链接按钮, 可以使用下面的代码禁用链接按钮：

$(selector).linkbutton('disable');