LinkButton（按钮）

使用$.fn.iLinkbutton.defaults重写默认值对象。

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

使用案例

创建按钮

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

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

也可以使用Javascript创建按钮。

<a id="btn" href="#">topjui</a>

$('#btn').iLinkbutton({
    iconCls: 'icon-search'
});

处理按钮的点击

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

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

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

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

使用jQuery绑定点击事件。

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

$(function(){
    $('#btn').bind('click', function(){
        alert('topjui');
    });
});

属性

属性名	属性值类型	描述	默认值
form	string	绑定form表单：submit / reset / clear	null
width	number	组件的宽度。	null
height	number	组件的高度。	null
id	string	组件的ID属性。	null
disabled	boolean	为true时禁用按钮。	false
toggle	boolean	为true时允许用户切换其状态是被选中还是未选择，可实现checkbox复选效果。	false
selected	boolean	定义按钮初始的选择状态，true为被选中，false为未选中。	false
group	string	指定相同组名称的按钮同属于一个组，可实现radio单选效果。	null
plain	boolean	为true时显示简洁效果。	false
text	string	按钮文字。	''
iconCls	string	显示在按钮文字左侧的图标(16x16)的CSS类。(如：fa fa-book)	fa fa-cog
btnCls	string	按钮样式，内置的样式有：topjui-btn-green/red/brown/black/blue/orange/purple	topjui-btn-green
iconAlign	string	按钮图标位置。可用值有：'left','right','top','bottom'	left
size	string	按钮大小。可用值有：'small','large'。	small

事件

事件名	事件参数	描述
onClick	none	在点击按钮的时候触发。

方法

方法名	方法参数	描述
options	none	返回属性对象。
resize	param	重置按钮。见下方代码示例。
disable	none	禁用按钮。见下方代码示例。
enable	none	启用按钮。见下方代码示例。
select	none	选择按钮。
unselect	none	取消选择按钮。

方法代码示例

resize方法示例：

$('#btn').iLinkbutton('resize', { width: '100%', height: 32 });

disable方法示例：

$('#btn').iLinkbutton('disable');

enable方法示例：

$('#btn').iLinkbutton('enable');