easyui的学习

本文详细介绍了EasyUI的学习过程,从下载插件到引入样式,再到HTML结构的搭建,包括设置属性、添加事件和方法。重点讲解了页面布局如panel、tabs、accordion和layout的使用,以及表单组件如form、ValidateBox、TextBox、NumberBox、DateBox和ComboBox的实现。此外,还涵盖了窗口组件Window、Messager和Tree的使用。
摘要由CSDN通过智能技术生成

easyui的学习

1、官网下载插件包

https://www.jeasyui.com/

在这里插入图片描述

2、引入下载好的插件里面样式

因为是基于jQ实现,所以也要引入jQ,引入的是插件包里面的jQ
   <link rel="stylesheet" href="../jquery-easyui-1.10.8/demo/demo.css">
    <link rel="stylesheet" href="../jquery-easyui-1.10.8/themes/icon.css">
    <link rel="stylesheet" href="../jquery-easyui-1.10.8/themes/default/easyui.css">
 <script src="../jquery-easyui-1.10.8/jquery.min.js"></script>
    <script src="../jquery-easyui-1.10.8/jquery.easyui.min.js"></script>
    <script src="../jquery-easyui-1.10.8/jquery.easyui.mobile.js"></script>

3、HTML结构

有两种书写方式:
  1、基于HTML标签+设置类名:class=”easyui-样式名”
  2、基于编程实现
1)基于HTML标签+设置类名

设置linkbutton

<div class="easyui-linkbutton">按钮</div>
2)基于编程实现插件样式
给HTML标签设置id名,然后使用插件名方法,就可以让那个HTML标签变成插件的样子,这里使用了jQ。
<div id="btn">按钮</div>
    <script>
    $("#btn").linkbutton()
 </script>

4、设置属性的方法

同样有两种方法
1、基于HTML标签的,在行内设置data-options=””,在里面添加属性,
 data-options="iconCls:'icon-ok',width:200"
2、基于编程实现,直接在圆括号里面以对象的形式添加属性,以键值对的形式添加
  <div id="btn">按钮</div>
    <script>
    $("#btn").linkbutton({
     
        iconCls:'icon-ok',
         height:100         
    })
</script>

5、添加事件和方法

   要注意事件和方法是两回事,事件是由easyui提供我们的,所以我们要参照api文档去调用,下面是api文档地址
https://www.jeasyui.cn/document/index/index.html#

   方法是事件的响应,方法呢是要经过调用才能执行的,所以呢,方法一般是放在事件里面去执行的,是两回事,我们也可以通过按钮的点击事件去执行方法,做出一些响应。添加事件的方式有两种:
   1)基于HTML结构:在里面设置data-options="事件名:方法名"
   2)基于编程实现:在插件名方法的圆括号中,以键值对的形式:事件名:方法名
     也可以直接定义:onClick:function(){},
   两种方法都要注意的是事件是驼峰命名法:第二个单词首字母大写

1)基于HTML结构:在里面设置data-options="事件名:方法名"
  <div class="easyui-linkbutton" data-options="iconCls:'icon-ok',width:200,onClick:ob">按钮</div>

2)基于编程实现:在插件名方法的圆括号中,以键值对的形式:事件名:方法名
     也可以直接定义:onClick:function(){},
     div id="btn">按钮</div>
    <script>

    $("#btn").linkbutton({
     
        iconCls:'icon-ok',
        onClick:ob
         
    })
</script>

6、引用按钮组

  引用按钮组:是用来把需要用到的按钮放到一块,这样的话形成了一个按钮组,然后可以通过外层的div给他设置的类名来使用这个按钮组,按钮组通过tools这个属性进行添加。下面就是我们准备的一个按钮组,然后给我们准备的div.id=tt的元素绑定了一个按钮组。但是这个东西不好用,因为我们基本看不到那个按钮,所以最好还是别用了

 <div id="tt">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">按钮</a>
    <div id="d">123456</div>
    </div>
 <script>
        $("#d").panel({
      
        //   引用按钮组
        //   tools:按钮组,使用选择器的方式引过来
          tools:"#tt",
        })
</script>

7、页面布局:panel(面板)

  这个框架是由easyui提供的,所以属性呢,也是由easyui提供,设置看api文档。
  面板作为承载其它内容的容器。这是构建其他组件的基础(比如:layout,tabs,accordion等)。它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置。

 $("#d").panel({
          title:"你好",
          width:500,
          height:200,
          iconCls:"icon-large-shapes",
          closable:true,
          maximizable:true,
          minimizable:true,
          collapsible:true,
          titleDirection:"up",
        //   引用按钮组
        //   tools:按钮组,使用选择器的方式引过来
          tools:"#tt",

        })

在这里插入图片描述
在这里插入图片描述

8、页面布局:tabs(选项卡)

   选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单,包括关闭按钮和其他自定义按钮。tabs提供了一些方法,我们通过按钮的点击事件作为回应

    <button onclick="test()">exists</button>
    <button onclick="sel()"
Combotree 是 easyui 中的一个组件,它可以同时显示树形结构和下拉框,可以方便地选择树形结构中的节点。下面是 combotree 的使用记录: 1. 引入 easyui 的 css 和 js 文件: ```html <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.14/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.14/themes/icon.css"> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.14/jquery.easyui.min.js"></script> ``` 2. 在 HTML 中添加 combotree 组件: ```html <input id="tree" class="easyui-combotree" style="width:200px;"> ``` 3. 初始化 combotree 组件: ```javascript $('#tree').combotree({ url: 'tree_data.json', // 树形结构数据的 URL method: 'get', // 数据请求方式 required: true, // 是否必填 panelHeight: 'auto', // 下拉框高度 multiple: true, // 是否允许多选 checkbox: true, // 是否显示复选框 onlyLeafCheck: true, // 是否只允许选择叶子节点 onLoadSuccess: function(node, data) { // 数据加载完成后的回调函数 console.log('load tree data success.'); } }); ``` 4. tree_data.json 文件内容如下: ```json [{ "id": 1, "text": "Node 1", "children": [{ "id": 11, "text": "Node 1.1" },{ "id": 12, "text": "Node 1.2" }] },{ "id": 2, "text": "Node 2", "children": [{ "id": 21, "text": "Node 2.1" },{ "id": 22, "text": "Node 2.2", "children": [{ "id": 221, "text": "Node 2.2.1" },{ "id": 222, "text": "Node 2.2.2" }] }] }] ``` 5. 运行代码后,会显示一个下拉框,点击下拉框会显示树形结构。可以选择节点,也可以多选。 以上就是 combotree 的使用记录,希望对你有帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值