微信公众号：​​程序yuan​​
关注可了解更多的教程。问题或建议，请公众号留言;

​​查看--> 全套EasyUI示例目录​​

5.LinkButton按钮组件

 

【EasyUI篇】LinkButton按钮组件_javascript

【EasyUI篇】LinkButton按钮组件_LinkButton_02

 

JSP文件

<%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Droppable</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/LinkButton.js"></script>
    <style rel="stylesheet" type="text/css">
    </style>
</head>
<body style="margin-left: 200px; margin-top: 200px;">

    <%--<a href="#" class="easyui-linkbutton" iconCls="icon-ok">按钮</a>--%>
    <a id="box">

    </a>
    <a id="pox"></a>

    <button id="btn1">
        禁用按钮
    </button>
    <button id="btn2">
        启用按钮
    </button>
    <button id="btn3">
        选择按钮
    </button>
    <button id="btn4">
        取消选择按钮
    </button>

</body>
</html>

JS文件

$(function () {

    //全局修改
    // $.fn.linkbutton.defaults.disabled = true;

    $('#box').linkbutton({

//------------- 属性列表 ---------------
        //将按钮重新定义一个id名称
        // id:'box1',
        //按钮文字
        text:"提交",
        //按钮图标
        iconCls:"icon-save",
        //设置图标的位置 left(默认) right
        iconAlign:'left',
        //禁用按钮
        // disabled:true,
        //设置按钮初始化时是否为选中状态，默认为false
        // selected:false,
        //设置true,则允许用户切换其状态是否被选中，可以实现checkbox复选效果，默认为false
        // toggle:true,
        //要是用单选框效果，需要与toggle配合使用
        // group:'sex',
        //设置扁平化效果，默认为false,
        // plain:true,

    });
//------------- 方法列表 -----------------
    //返回属性对象
    console.log($('#box').linkbutton('options'));

    //禁用按钮
    $("#btn1").click(function () {
        $("#box").linkbutton('disable');
    });

    //启用按钮
    $("#btn2").click(function () {
        $("#box").linkbutton('enable');
    });

    //选择按钮
    $("#btn3").click(function () {
        $("#box").linkbutton('select');
    });

    //取消选择按钮
    $("#btn4").click(function () {
        $("#box").linkbutton('unselect');
    });

    $('#pox').linkbutton({
        text:"取消",
        iconCls:'icon-cancel',
        toggle:true,
        group:'sex',
    });

});

效果图

【EasyUI篇】LinkButton按钮组件_EasyUI_03

 

------------------------------------------------

关注小编微信公众号获取更多资源

【EasyUI篇】LinkButton按钮组件_EasyUI_04