【连载】研究EasyUI系统— LinkButton组件

来源：互联网发布：软件系统设计方案模板编辑：程序博客网时间：2024/06/05 03:59

　　linkbutton是easyui框架中的按钮组件，也是其他诸如MenuButton等各种形式按钮组件的父组件。linkbutton基于html中<a>标签创建，用户可以在按钮中添加图标和文字，是一种很常用的组件。
linkbutton效果图
　　上图中的“取消”和“登陆”按钮就是linkbutton。来看一下具体代码。
　　
　　linkbuttonDemo.php

<html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/easyui.css" />        <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />        <script type="text/javascript" src="easyui/jquery.min.js"></script>        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>        <title>linkbuttonDemo</title>        <style>            .container {                text-align: center;                width: 100%;            }            .inputContainer {                width:400px;                margin: auto;                margin-top: 20px;            }            .inputLabel {                font-size: 13px;                padding-right: 10px;                font-weight: bold;            }            .inputButton {                margin-top: 40px;            }        </style>    </head>    <body>        <div class="easyui-window" id="winButton">            <div class="container">                <div class="inputContainer">                    <label class="inputLabel">请输入账号</label>                    <input class="easyui-textbox" data-options="height:28,width:240">                </div>                <div class="inputContainer">                    <label class="inputLabel">请输入密码</label>                    <input class="easyui-textbox" type="password" data-options="height:28,width:240">                </div>                <a id="btnCancel" class="easyui-linkbutton inputButton" href="javascript:void(0)"></a>                <a id="btnLogin" class="easyui-linkbutton inputButton" href="javascript:void(0)" style="margin-left: 20px"></a>            </div>        </div>        <script>            $("#winButton").window({                title:'LinkButton示例',                width:480,                height:240,                collapsible:false,                minimizable:false,                maximizable:false            });            $("#btnCancel").linkbutton({                iconCls:'icon-cancel',                width:80,                height:30,                text:'取消',                onClick:function() {                    $('#winButton').window('close');                }            });            $("#btnLogin").linkbutton({                iconCls:'icon-ok',                width:80,                height:30,                text:'登陆'            });        </script>    </body></html>

　　上例代码我们只对“取消”按钮做了事件处理，点击“取消”按钮，隐藏整个对话框（window组件），但未对“登陆”按钮做任何处理，用户可以根据实际项目编写对应代码。
　　
　　linkbutton组件属性

属性名称属性值类型属性默认值描述 width 数值 null 组件宽度。 height 数值 null 组件高度。 id 字符串 null 组件id。 disabled 布尔值 false 是否禁用组件。 toggle 布尔值 false 值为true时可设定按钮处于选中或未选中状态。
1.3.3及以上版本支持。 selected 布尔值 false 如值为true,用户可将按钮设为选中状态。
1.3.3及以上版本支持。 group 字符串 null 通过设置组名将按钮分组。 plain 布尔值 false 值为true时按钮外观无凸起效果。 text 字符串 ” 按钮标题。 iconCls 字符串 null 按钮图标样式。 iconAlign 字符串 ‘left’ 按钮图标位置。
有’left’、’right’、’top’、’bottom’四个值。
1.3.2及以上版本支持。 size 字符串 ‘small’ 按钮大小。有’small’、’large’四个值。
1.3.6及以上版本支持。

　　disabled属性决定是否禁用按钮，一旦按钮禁用，按钮就无法点击，相关的事件也无法触发。下图展示“登陆”按钮禁用时的状态。
linkbutton组件disabled属性效果图
　　我们先看下面的效果图和一段代码，然后将toggle、selected、group三者结合起来讲述。
linkbutton组件group、toggle、selected属性效果图

　　linkbuttonToggleDemo.php

<html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/easyui.css" />        <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />        <script type="text/javascript" src="easyui/jquery.min.js"></script>        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>        <title>linkbuttonToggleDemo</title>    </head>    <body>        <div class="container">            <a id="btn1" class="easyui-linkbutton" href="javascript:void(0)"></a>            <a id="btn2" class="easyui-linkbutton" href="javascript:void(0)" style="margin-left: 20px"></a>            <a id="btn3" class="easyui-linkbutton" href="javascript:void(0)" style="margin-left: 20px"></a>            <a id="btn4" class="easyui-linkbutton" href="javascript:void(0)" style="margin-left: 20px"></a>        </div>        <script>            $("#btn1").linkbutton({                iconCls:'icon-ok',                width:80,                height:30,                text:'按钮1',                toggle:true,                group:'g1'            });            $("#btn2").linkbutton({                iconCls:'icon-add',                width:80,                height:30,                text:'按钮2',                toggle:true,                group:'g1'            });            $("#btn3").linkbutton({                iconCls:'icon-save',                width:80,                height:30,                text:'按钮3',                toggle:true,                group:'g1'            });            $("#btn4").linkbutton({                iconCls:'icon-cancel',                width:80,                height:30,                text:'按钮4',                toggle:true,                group:'g1'            });        </script>    </body></html>

　　linkbuttonToggleDemo.php是上图的具体实现代码。可以看到，按钮2处于”selected”状态（即按下状态），这就是”selected”属性的效果，按钮的”selected”属性设置为true时，该按钮即为按下状态。
　　“toggle”属性的作用为是否允许按钮可以处于按下状态，如果为true,那么用户点击该按钮时，按钮就呈现按下状态，再点击一下，又恢复正常。
　　“group”属性对按钮分组，组名可以根据需要任意取名，本例为”g1”，且四个按钮group属性值都一样，均为”g1”，表明四个按钮属于同一组。分组属性一般配合toggle属性使用，在同一分组内的多个按钮，同一时刻只允许一个按钮处于”selected”状态（即按下状态）。上图中按钮2处于按下状态，一旦点击其他按钮（如按钮1）后，按钮1处于按下状态，按钮2同时复原。
　　plain指定外观是否为凸起。下图中左侧按钮plain属性为true，右侧为false。
linkbutton组件plain属性效果图
　　text属性指定按钮文字，如“取消”、“登陆”。
　　iconCls指定图标样式，本文代码中的图标样式均为easyui框架自带。为方便查看，我们会将系统自带的图标样式做一个整理，单独一文呈现。
　　iconAlign指定图标位置，默认为”left”（左侧），本文效果图中按钮的图标均在左侧。除此之外，还可以是”right”、”top”、”bottom”（分别为右侧、顶部、底部）。
　　size属性指定按钮大小，只有两个值”small”和”large”,效果如下。
linkbutton组件size属性效果图

　　linkbutton组件方法

方法名称参数描述 options 无返回所有属性。 resize param 调整按钮大小。1.4及以上版本支持。 disable 无禁用按钮。 enable 无启用按钮。 select 无使按钮处于选中状态。1.3.3及以上版本支持。 unselect 无取消按钮的选中状态。1.3.3及以上版本支持。

　　resize方法参数是一个json对象，含宽度和高度，layout一文有介绍。
　　（http://blog.csdn.net/redeg/article/details/65443712）
　　其他方法很简单，不多做介绍。
　　
　　linkbutton组件事件

事件名称参数描述 onClick 无点击按钮时触发。1.3.6及以上版本支持。

　　该方法已在linkbuttonDemo.php中描述，此处不赘述。另外，用户也可直接使用<a>标签中js原生的onclick事件，效果是一样的。

0 0