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()"