首页 > 其他 > 详细

EasyUI-LinkButton

时间:2014-03-02 07:05:14      阅读:718      评论:0      收藏:0      [点我收藏+]

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

bubuko.com,布布扣

上图就是 带有边框以及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:平铺类型的超链接按钮

bubuko.com,布布扣

参考代码:

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

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

 

3:按钮的icon位置的改变

bubuko.com,布布扣

 

这里的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日

EasyUI-LinkButton,布布扣,bubuko.com

EasyUI-LinkButton

原文:http://www.cnblogs.com/xingchen/p/3575114.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!