easyUI linkbutton组件

最新推荐文章于 2022-09-16 10:51:41 发布

weixin_34138521

最新推荐文章于 2022-09-16 10:51:41 发布

阅读量106

点赞数

文章标签： javascript ViewUI

本文介绍了一个使用easyUI框架中linkbutton组件的示例。通过HTML、CSS及JavaScript实现按钮的功能，并展示了如何使用JavaScript来配置按钮的属性如禁用、启用、调整大小等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

easyUI linkbutton组件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="easyui/jquery.min.js"></script>
    <script src="easyui/jquery.easyui.min.js"></script>
    <script src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="js/test007.js"></script>
    <link rel="stylesheet" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" href="easyui/themes/icon.css">
</head>

<body style="margin:20px">
    <a href="#" class="easyui-linkbutton">linkbutton</a>
    <a href="#" id="box">link2button</a>
    <a href="#" id="pox">link2_2button</a>
</body>

</html>

$(function(argument) {
    var obj = {
        // id:'pox',//修改id
        // disabled:true,//禁用按钮
        // toggle:true,//反复开关按钮
        // selected:true,//默认选中状态
        // group:'sex',//两个以上进行分组；与toggle一起使用；
        // plain:true,//简洁效果
        // text:'buttonText',//innerHTML的效果
        // iconCls:'icon-add',//图标的cssName
        // iconAlign:'right',// 图标的定位
        // size:'large',//按钮大小
    };
    $('#box').linkbutton(obj);
    $('#pox').linkbutton(obj);
    $('#box').linkbutton('disable'); //要放到这里才有效果
    $('#box').linkbutton('enable');
    $('#box').linkbutton('resize',{width:'100%',height:32});//设置大小
    $('#box').linkbutton('select');//选中
});