佐佑时代

LinkButton（按钮）

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


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


使用案例

创建按钮


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

                    topjui

也可以使用Javascript创建按钮。


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

处理按钮的点击


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

            topjui

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

            topjui

使用jQuery绑定点击事件。

        topjui
        
                $(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 重置按钮。
代码示例：
                            $('#btn').iLinkbutton('resize', {
                                width: '100%',
                                height: 32
                            });
disable none 禁用按钮。
代码示例：
                            $('#btn').iLinkbutton('disable');
enable none 启用按钮。
代码示例：
                            $('#btn').iLinkbutton('enable');
select none 选择按钮。
unselect none 取消选择按钮。