2、EasyUi:常用的插件button

40 阅读 0 评论 27 点赞

我是靠谱客的博主细腻故事，最近开发中收集的这篇文章主要介绍2、EasyUi:常用的插件button，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

主要看这几样：

属性、事件、方法

1、按钮 button

属性【有2种写法，写法1：直接写到标签上；写法2，在js代码中写】

写法1、直接给标签，添加data-options属性，来实现    语法格式：
<标签 class="easyui-样式名"  data-options="属性名:值,属性名:值">   //注意：值为字符串，因此需要使用单引号，引起来

例如：
   <!--方式1、使用easyUI-->
   <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">池佳文</a> //icon-cancel是从easyUI的图标库中，获取的

    
写法2：通过js代码，来实现----------常用这种
    <标签 id="tag"></标签>
    
    $("#tag").插件名({
    	属性名:值,
    	属性名:值,
    });
    
例如：
    <a href="#" id="btn1">池佳文</a>
    <script>
         $("#btn1").linkbutton({
            iconCls:'icon-ok'
         })
    </script>

事件【有2中写法】

注意：原生的js那种绑定事件的方式，都是通用的，可以的，但是这里指的是easyUI提供的那种绑定事件的方式

写法1、直接在标签上写
<标签 class="easyui-样式名"  data-options="属性名:值,属性名:值,事件名:事件函数名"></标签>

写法2、在js代码中写----------常用这种
 $("#tag").插件名({
    	属性名:值,
    	属性名:值,
		事件名:事件函数名,    //写法2.1
  		事件名:function(){   //写法2.2   ----2.1和2.2都行

		}
    });

方法

需求：我想点击按钮后，让按钮变长


调用格式：
$("标签").easyui插件('方法名',方法传入的参数);

例如：
 $("a").linkbutton('resize',{width:300,height:100})

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>easyUi---Demo1</title>
    <!-- 1、引入easyUI的css样式 -->
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <!-- 2、引入js :jquery、easyui【注意：引入的顺序，必须先引入jquery，后引入easyUI】 -->
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/easyui-lang-zh_CN.js"></script>
</head>
<body>
    <!--方式1、使用easyUI-->
    <!--1.1 data-options属性：给标签，绑定属性、事件    1.2 绑定事件：onClick:testEvent-->
   <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',size:'large',onClick:testEvent">池佳文</a>

   <!--方式2、使用easyUI：通过js代码来实现-->
   <a href="#" id="btn1">小明</a>
</body>
<script>
    // 2.1 绑定属性、事件
     $("#btn1").linkbutton({
        iconCls:'icon-ok',  //iconCls ：给按钮，设置图标
        size:'large',   //size ：给按钮，设置大小的
        disabled:false ,  //disabled：给按钮，设置是否禁用，true表示禁用状态;false:表示不禁用
        onClick:function(){  //2.2 绑定事件   给标签，通过js的方式，绑定事件
             // alert("js点击了-----------")
             //2.3 调用easyUI提供的方法------------调用改变大小的resize方法
             $("#btn1").linkbutton('resize',{width:300,height:100})
        }
     })
     //1.2
     function testEvent(){
         alert("我被点击了------------------------")
         //1.3 调用easyUI方法：调用按钮的disable方法----用于禁用该按钮【看文档，来使用】   a:first选中第一个a标签
         $("a:first").linkbutton('disable')
     }
</script>
</html>