使用须知
如何开始
安装
全局元素
样式重置
文字
颜色
徽章
提示框
表格
图标
栅格
原生组件
Panel
Accordion
Tabs
Layout
DataGrid
DataList
PropertyGrid
Tree
TreeGrid
LinkButton
Menu
MenuButton
SplitButton
SwitchButton
TabButton
Pagination
ProgressBar
SearchBox
Form
CheckBox
RadioBox
TextBox
PasswordBox
FileBox
TagBox
Combo
ComboBox
ComboGrid
ComboTree
ComboTreeGrid
ComboFilter
NumberBox
NumberSpinner
Calendar
DateBox
DateRangeBox
DateTimeBox
DateTimeRangeBox
TimeSpinner
DateTimeSpinner
Slider
ValidateBox
ImagesBox
Window
Dialog
Messager
Draggable
Droppable
Resizable
Tooltip
MaskedBox
扩展组件
头像
上传
时间轴
聊天
用户面板
消息面板
统计数据面板
Echart面板
圆形统计图
评论
相册
评分
文件
滚动条
二维码
条形码
天气
AT
编辑器
课程表
日程表
项目管理
客户管理
浏览器
FAQ
兼容插件
IconFont
Font Awesome
Ueditor
Ckeditor
Echarts
Plupload
Cropper
BaiduMap
AMap
Colpick
Nprogress
Gantt
GanttEditor
Raty
WebUploader
匿名
匿名 您还未登录

LinkButton

Document
Native
Basic
Plain LinkButton
LinkButton Size
Icon Align on LinkButton
Toggle Button
Button Group
Style LinkButton
Fluid LinkButton
Plus
Extend

LinkButton Document

使用$.fn.linkbutton.defaults重写默认值对象。
按钮组件使用超链接按钮创建。它使用一个普通的<a>标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。

文档汉化:

汉化人:王锦阳
汉化语言:简体中文
个人博客:http://blog.sina.com.cn/richie696

用法:

创建按钮

使用标签创建按钮更加简单。

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

也可以使用Javascript创建按钮。

					
<a id="btn" href="#">easyui</a>    
<script type="text/javascript">
$('#btn').linkbutton({    
    iconCls: 'icon-search'   
});  
</script>  
					
				

处理按钮的点击

点击按钮会将用户引导到其他页面。

					
<a href="otherpage.php" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>   
					
				

下面的示例提示了一个警告信息。

					
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'"   
				        onclick="javascript:alert('easyui')">easyui</a>   
					
				

使用jQuery绑定点击事件。

					
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>  
<script type="text/javascript">
$(function(){    
    $('#btn').bind('click', function(){    
        alert('easyui');    
    });    
});  
</script>
					
				

属性:

属性名 属性值类型 描述 默认值
width number 组件的宽度。(该属性自1.4版开始可用) null
height number 组件的高度。(该属性自1.4版开始可用) null
id string 组件的ID属性。 null
disabled boolean 为true时禁用按钮。 false
toggle boolean 为true时允许用户切换其状态是被选中还是未选择,可实现checkbox复选效果。(该属性自1.3.3版开始可用) false
selected boolean 定义按钮初始的选择状态,true为被选中,false为未选中。(该属性自1.3.3版开始可用) false
group string 指定相同组名称的按钮同属于一个组,可实现radio单选效果。(该属性自1.3.3版开始可用) null
plain boolean 为true时显示简洁效果。 false
text string 按钮文字。 ''
iconCls string 显示在按钮文字左侧的图标(16x16)的CSS类ID。 null
iconAlign string 按钮图标位置。可用值有:
'left','right' (该属性自1.3.2版开始可用)
'top','bottom' (该属性自1.3.6版开始可用)
left
size string 按钮大小。可用值有:'small','large'。(该属性自1.3.6版开始可用) small

事件:

事件名 参数 描述
onClick none 在点击按钮的时候触发。(该事件自1.3.6版开始可用)

方法:

方法名 方法属性 描述
options none 返回属性对象。
resize param 重置按钮。该方法自1.4版开始可用)
代码示例:
							
$('#btn').linkbutton('resize', {
  width: '100%',
  height: 32
});
							
						
disable none 禁用按钮。 
代码示例:
							
$('#btn').linkbutton('disable');
							
						
enable none 启用按钮。 
代码示例:
							
$('#btn').linkbutton('enable');
							
						
select none 选择按钮。(该方法自1.3.3版开始可用)
unselect none 取消选择按钮。(该方法自1.3.3版开始可用)