EasyUI-LinkButton

EasyUI-LinkButton，带有超级链接的button

上图就是 带有边框以及Icon图标的按钮

参考代码：

<a href="http://www.baidu.com" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true">Cut</a>
<a href="#" class="easyui-linkbutton">Text Button</a>

从上面的代码中我们可以看出，使用超链接按钮是非常的方便的，设置class="easyui-linkbutton" 通过 disable的属性我们还可以设置该超链接按钮是否处于可用状态。

2：平铺类型的超链接按钮

参考代码：

<ahref="#"class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-cancel'">Cancel</a>

我们只需要设置 plain 属性值就可以了哦

 

3：按钮的icon位置的改变

 

这里的icon排列再按钮的右侧，上面的icon排列再按钮的左侧，

我们可以通过下面的代码来动态的设置

1. <selectonchange="$('#button-bar a').linkbutton({iconAlign:this.value})">
2. <optionvalue="left">Left</option>
3. <optionvalue="right">Right</option>
4. </select>

 

 

 

Jason

2014年03月01日