easyUI的常用API

简介

easyui是一种基于jQuery的用户界面插件集合。easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。easyui是个完美支持HTML5网页的完整框架。easyui节省您网页开发的时间和规模。easyui很简单但功能强大的。

EasyUI中大部分的控件都可以通过 Html / JS调出!

使用步骤

1.  官网下载框架包地址:http://www.jeasyui.com/download/index.php    2.  将框架包解压后, 整个文件夹复制到项目中,并将文件夹名称修改为easyui3.  引入必要的JS与CSS文件//引入 jQuery 核心库，这里采用的是 2.0<script type="text/javascript" src="easyui/jquery.min.js"></script>//引入 jQuery EasyUI 核心库，这里采用的是 1.3.6<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>//引入 EasyUI 中文提示信息<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>//引入 EasyUI 核心 UI 文件 CSS<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />//引入 EasyUI 图标文件<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />4.  编写组件 指定class属性即可

面板-- panel

基础面板

class属性设置为: easyui-paneltitle属性描述的是面板的标题Jquery对象的api.$obj.panel(par1);par1: 操作: 1.  open 打开2.  close 关闭3.  'expand',true : 展开4.  'collapse',true: 折叠data-options :描述面板功能, 键值对的集合, 键与值之间使用冒号连接, 多个键值对之间使用逗号连接
collapsible:true//折叠工具
minimizable:true//最小化
maximizable:true//最大化
closable:true"//可关闭
tools: 表示一个JSON数组, 数组中应存储JSON对象, 对象应包含图标和事件例如:"tools:[{'iconCls':'icon-reload','handler':'myload'}]"

面板嵌套

fit: 默认为false , 设置为true 表示面板大小自适应父容器案例:<div id="div4" class="easyui-panel" style="padding:20px;width:400px;height:200px;" title="面板嵌套的效果"
><div class="easyui-layout" data-options="fit:true"><div data-options="'region':'west',split:true" style="width:100px">左边的部分</div><div data-options="'region':'center'">右边的部分</div></div>
</div>

拖动组件:

<div class="easyui-draggable"  >可拖动的窗体
</div>

可变大小Resizable

class属性值:easyui-resizabledata-options:maxWidth:600 :最大宽度
maxHeight:600: 最大高度

Tooltip 提示框

当鼠标移入时 弹出的窗体, 在我们原生的HTML中, 也有提示窗,但是仅仅限于超链接 , 并且样式很一般在easyui中, 不依赖与超链接, 任意的组件 都可以通过class=easyui-tooltip实现提示框 !提示的内容通过title属性指定

进度条

默认此进度条 总进度为100  value指定是百分比
总是可以控制宽高的<div class="easyui-progressbar" data-options="value:80" style="width:500px;"></div>

消息

messager组件是一个JS操作的组件使用步骤:$.messager.show(pra1);pra1: 传递一个JSON格式的对象,  常用属性如下:title: 消息的标题msg : 消息的内容showType: 消息的类型-   show: 普通消息-   slide: 滑动消息-   fade: 淡入消息timeout: 毫秒延迟$.messager.pregress(pra1);-   pra1: 传递一个JSON格式的对象, 常用属性如下:-   title: 标题-   msg  : 内容-   pra1: 也可以传递一个字符串 ,  表示指令:-   常用close  用于关闭

选项卡

选项卡使用的class是: easyui-tabs在easyui-tabs元素中添加一个div就是一个子选项卡
子选项卡可以通过title属性来指定标题,
data-options添加关闭按钮
data-options="closable:true"<div class="easyui-tabs" style="width: 800px; height: 400px"><!-- 一个div就是一个子选项data-options添加关闭按钮data-options="closable:true"--><div title="选项卡的标题1" data-options="closable:true"><h3>第一个文章</h3></div><div title="选项卡的标题1" "><h3>第一个文章</h3></div>
</div>

折叠选项卡

选项卡使用的class是: easyui-accordion在easyui-tabs元素中添加一个div就是一个子选项卡
子选项卡可以通过title属性来指定标题,
data-options添加关闭按钮
data-options="closable:true"<div class="easyui-accordion" style="width:800px;height:400px;"><div title="选项卡的标题1" data-options="closable:true" style="padding: 10px;"><h3>easyui-兄弟连教程</h3></div><div title="选项卡的标题2" style="padding: 10px;"><h3>easyui-兄弟连教程</h3></div>
</div>

布局layout

通过class=easyui-layout实现
布局包含了东西南北中五个位置分别通过data-options中的region属性指定:北: north南: south西: west东: east中: center<div class="easyui-layout" style="width:800px;height:300px"><div data-options="region:'north',split:true" style="height:70px">1</div><div data-options="region:'south',split:true" style="height:70px">2</div><div data-options="region:'east',split:true" style="width:70px">3</div><div data-options="region:'west',split:true" style="width:70px">4</div><div data-options="region:'center',split:true" >5</div></div>

window窗口

class属性值为 easyui-window扩展自panel 使用方式基本一致 !
title:  窗口标题, 类型为string重写了一些data-options属性 :
collapsible: 是否可折叠 , 类型boolean 默认true
minimizable: 是否显示最小化按钮 , 类型boolean 默认true
maximizable: 是否显示最大化按钮 , 类型boolean 默认true
closable: 是否显示关闭按钮 . 类型boolean 默认true
shadow: 默认true , 是否显示窗体阴影
...

dialog 提示窗

class属性值为 easyui-dialogtitle: 设置窗口标题data-options="iconCls:'图标class'" :设置窗口图标JS方式:$("div选择器").dialog(pra1);pra1: JSON类型的数据 键值对如下:1.  title : 提示窗标题2.  width : 窗口宽度, 可忽略px , 默认为px3.  height: 窗口高度. 可忽略px , ...

必须要HTML配合JS才能完成的一个特殊组件步骤: 1.  先通过HTML元素, 创建菜单列表-   编写一个div , calss指定为easyui-menu-   在这个div中添加子元素, -   直接子元素 就是一级菜单 -   子元素子元素就是二级菜单-   ....-   data-options="'iconCls':'icon-help'" 给子选项添加图标2.  将菜单的显示 , 绑定到鼠标的右键上 , 并取消原网页的右键效果//绑定事件到右键点击上$(document).on("contextmenu",function(e){e.preventDefault();//取消原网页的右键菜单效果$("#xdl_menu").menu('show',{'left':e.pageX,'top':e.pageY});//menu函数, 传递两个参数 1. show 表示显示, 2. 是一个JSON格式的对象, 表示菜单左上角显示的位置});     3.  给菜单中的条目 添加点击事件给最外层的菜单div添加: data-options="'onClick':函数名称"点击事件函数的编写, 需要设计一个形式参数, 会接受到被点击的元素对象!

案例
HTML部分:
<h1>右键点击网页的任意部分, 弹出菜单
</h1>
<div id="xdl_menu" class="easyui-menu" style="width:120px" data-options="'onClick':menuClick"><div id="m1">吃饭</div><div id="m2">睡觉</div><div id="m3">打涛涛</div><div id="m4">学技术<div  id="m5" style="width:140px"><div  id="m5_1">学Java</div><div>学PHP</div><div>学H5</div><div>学UI</div></div></div><div data-options="'iconCls':'icon-help'">帮助</div>
</div>

JS部分function menuClick(item){console.info("用户选择了",item.id);              }$(document).on("contextmenu",function(e){e.preventDefault();$("#xdl_menu").menu('show',{'left':e.pageX,'top':e.pageY});});

MenuButton

菜单按钮需要指定class属性为:easyui-menubuttondata-options:menu: 指定弹出的菜单项的选择器(被指定的元素与子元素使用块级元素div)注意, 如果需要处理点击事件, 给单个元素添加onclick即可

案例:<a href="void(0)" class="easyui-menubutton" data-options="'menu':'#menu_div'">下载</a><div id="menu_div"><div data-options="iconCls:'icon-remove'">笔记</div><div data-options="iconCls:'icon-print'">课件</div><div data-options="iconCls:'icon-edit'">代码</div></div>

分页组件

分页组件 是用来生成快捷的分页工具栏的
指定class为 easyui-paginationdata-options属性:total:数据的总数量pageSize:单页数据的长度onSelectPage:当用户翻页时触发的事件:此事件存在两个形式参数参数1. 用户翻页动作产生的新页码参数2. 新页请求的数据长度

案例
HTML部分<div class="easyui-pagination" style="border:1px solid #bbb;background-color: #e2e2e2;"
data-options="total:200,pageSize:10,onSelectPage:test"
>
</div>JS部分function test(pageNumber,pageSize){console.info("页数",pageNumber,"数据的长度",pageSize);}

日期选择组件

class属性为:easyui-calendar可以通过data-options指定事件:1.  选择的日期发生改变时onChange:函数名编写函数时, 存在两个形式参数:参数1. 选择的新日期参数2. 之前的旧日期2.  选择日期时onSelect:函数名编写函数时, 存在一个形式参数:参数1. 选择的日期案例:HTML部分:
<div class="easyui-calendar" style="width:300px;height:200px"
data-options="onChange:change_1,onSelect:select_1"
></div>JS部分:function change_1(newDate,oldDate){console.info("新日期:",newDate.toLocaleString(),"旧日期:",oldDate.toLocaleString());}//选择的日期 参数1.选择的日期function select_1(date){console.info("选择的日期:",date.toLocaleString());}

easyUI的常用API相关推荐

c++ string replace_JAVA应用程序开发之String类常用API
[本文详细介绍了JAVA应用开发中的String类常用API,欢迎读者朋友们阅读.转发和收藏!] 1 基本概念 API ( Application Interface 应用程序接口)是类中提供的接口, ...
常用API（Object、String、StringBuffer、用户登陆注册)
常用API 今日内容介绍 u Object u String u StringBuilder 第1章 Java的API及Object类在以前的学习过程中,我们都在学习对象基本特征.对象的使用以及对象 ...
Selenium Web 自动化 - Selenium常用API
Selenium Web 自动化 - Selenium常用API 2016-08-01 目录 1 对浏览器操作 1.1 用webdriver打开一个浏览器 1.2 最大化浏览器&关闭浏 ...
【Netty】NIO 网络通信 SelectionKey 常用 API 简介
文章目录 I . SelectionKey 简介 II . SelectionKey 事件简介 III . SelectionKey 常用 API 简介 I . SelectionKey 简介 1 . ...
JavaScript一些常用 API整理汇总
JavaScript一些常用 API整理汇总 Array new Set() 数组去重 const arr = [3,4,4,5,4,6,5,7]; console.log(new Set(arr)) ...
Math工具类常用API使用案例
对基础API的使用能够熟练掌握,能极大提高开发效率.有些知识是很简单,但并不是我们不学习和掌握它们的借口,越是简单的东西,在关键时刻越是能起到至关重要的作用,就好比我们花很长时间解决的一个BUG,结果 ...
Hibernate一级缓存常用API
一级缓存特点: 当我们通过session的save,update saveOrupdate进行操作时,如果一级缓存中没有对象,会将这些对象从数据库中查询到,存储到一级缓存. 当我们通过session的 ...
Object类、常用API
# [Object类.常用API] ## 主要内容 * Object类 * Date类 * DateFormat类 * Calendar类 * System类 * StringBuilder类 * 包 ...
jedis常用API
2019独角兽企业重金招聘Python工程师标准>>> 一.Redis Client介绍 1.1.简介 Jedis Client是Redis官网推荐的一个面向java客户端,库文件实 ...
Java --- 常用API
常用API 方法重载: 方法名相同,方法接收的参数不同 static: 修饰的类,可以直接使用类名进行调用方法名说明 public static abs(int a) 返回参数的绝对值 publi ...

easyUI的常用API

简介

EasyUI中大部分的控件都可以通过 Html / JS调出!

使用步骤

面板-- panel

基础面板

面板嵌套

拖动组件:

可变大小Resizable

Tooltip 提示框

进度条

消息

选项卡

折叠选项卡

布局layout

window窗口

dialog 提示窗

Menu

Menu右键菜单

MenuButton

分页组件

日期选择组件

easyUI的常用API相关推荐

最新文章

热门文章

easyUI的常用API

简介

EasyUI中大部分的控件 都可以通过 Html / JS调出!

使用步骤

面板-- panel

基础面板

面板嵌套

拖动组件:

可变大小Resizable

Tooltip 提示框

进度条

消息

选项卡

折叠选项卡

布局layout

window窗口

dialog 提示窗

Menu

Menu右键菜单

MenuButton

分页组件

日期选择组件

easyUI的常用API相关推荐

最新文章

热门文章

EasyUI中大部分的控件都可以通过 Html / JS调出!