📌  相关文章
📜  EasyUI jQuery 链接按钮小部件(1)

📅  最后修改于: 2023-12-03 14:40:55.809000             🧑  作者: Mango

EasyUI jQuery 链接按钮小部件

EasyUI是一款基于jQuery的UI插件集合，其中包含了许多方便实用的小部件，如链接按钮小部件。

介绍

链接按钮小部件是一种常用于网页导航栏、工具栏等处的交互元素，类似于常规按钮，但是作为链接使用。

链接按钮小部件提供了丰富的配置选项，例如可以指定链接地址、图标、文本、宽度、高度、禁用状态等。

使用方法

  1. 引入jQuery和EasyUI的CSS文件和JS文件。

    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.5/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.9.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.9.5/jquery.easyui.min.js"></script>

  2. 创建一个链接按钮。

    <a href="#" class="easyui-linkbutton">Click me</a>

  3. 配置链接按钮的属性。

    <a href="#" class="easyui-linkbutton" data-options="
     iconCls:'icon-save',
     plain:true,
     size:'large',
     width:'120',
     height:'40',
     disabled:true,
     onclick:function(){alert('Save');}
">Save</a>

  4. 绑定点击事件。

    $('.easyui-linkbutton').click(function(){
     alert('Click me');
});
属性

下表列出了链接按钮小部件的常用属性。

| 属性名 | 描述 | | :--------------- | :----------------------------------------------------------- | | iconCls | 当前按钮的图标样式 | | plain | 是否渲染样式为平面化 | | size | 当前按钮的大小，可选值为：small、medium、large | | width | 当前按钮的宽度 | | height | 当前按钮的高度 | | disabled | 当前按钮是否禁用 | | toggle | 是否为切换按钮 | | selected | 当toggle属性为true时，选定状态的初始值 | | onclick | 当前按钮的点击事件的回调函数，如：onclick:function(){alert('click me');} | | href | 当前按钮的链接地址 | | target | 当前按钮链接打开方式，可选值为：_blank、_self、_parent、_top | | group | 当toggle属性为true时有效，分组名，同组的切换按钮只能选定一项 |

例子

以下是一个完整的例子，演示了如何创建并配置一个链接按钮。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>EasyUI LinkButton Widget</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.5/themes/icon.css">
    <script type="text/javascript" src="jquery-easyui-1.9.5/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.9.5/jquery.easyui.min.js"></script>
</head>
<body>
    <!-- 创建一个链接按钮 -->
    <a href="#" class="easyui-linkbutton" data-options="
        iconCls:'icon-save',
        plain:true,
        size:'large',
        width:'120',
        height:'40',
        disabled:true,
        onclick:function(){alert('Save');}
   ">Save</a>

   <script>
        // 绑定点击事件
        $('.easyui-linkbutton').click(function(){
            alert('Click me');
        });
   </script>
</body>
</html>
参考文献