jQuery EasyUI

最新推荐文章于 2024-06-19 21:34:23 发布

闫梅

最新推荐文章于 2024-06-19 21:34:23 发布

阅读量2k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/yantingmei/article/details/17336193

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery EasyUI

(1)简介

jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

jQuery EasyUI是基于JQuery的一个前台ui界面的插件，功能相对没extjs强大，但页面也是相当好看的。一些功能也足够开发者使用，相对于extjs更轻量。 jQuery EasyUI有以下特点：

1、基于jquery用户界面插件的集合

2、为一些当前用于交互的js应用提供必要的功能

3、使用 EasyUI你不需要写很多的javascript代码，通常只需要写HTML标记来定义用户界面即可

4、支持HTML5

5、开发产品时可节省时间和资源

6、简单，但很强大

jQuery EasyUI有诸多不足：

TreeGrid reload存在bug。

（2）Base（基础）

Parser（解析器）：

1.使用方法$.parser.parse(); // 解析所有页面

$.parser.parse('#cc'); // 解析指定节点

2.事件在解析器完成解析操作的时候触发$.parser.onComplete

EasyLoader(简单加载)：

1.方法：load

加载指定模块。当加载成功的回调函数被调用。
模块参数有效的类型包括：
● 一个单一的模块名称
● 模块数组
● ".css"后缀结尾的CSS文件
● ".js"后缀结尾的JS文件

2.事件当一个模块加载成功的时候触发onProgress

当一个模块以及他的依赖加载成功的时候触发onLoad

Draggable(拖动)：

1.使用方法返回属性对象 options，如果代理属性被设置则返回该拖动代理元素 proxy，允许拖动 enable，禁止拖动 disable

2.事件在拖动之前触发，返回false将取消拖动 onBeforeDrag

在目标对象开始被拖动时触发 onStartDrag

在拖动过程中触发，当不能再拖动时返回false onDrag

在拖动停止时触发 onStopDrag

Droppable（放置）：

事件：

在被拖拽元素到放置区内的时候触发，source参数表示被拖拽的DOM元素 onDragEnter

在被拖拽元素经过放置区的时候触发，source参数表示被拖拽的DOM元素onDragOver

在被拖拽元素离开放置区的时候触发，source参数表示被拖拽的DOM元素onDragLeave

在被拖拽元素放入到放置区的时候触发，source参数表示被拖拽的DOM元素onDrop

Resizable（调整大小）；

Pagination（分页）：pageSize：页面大小；pageList：用户可以改变页面大小；showPageList：定义是否显示页面导航列表；beforePageText：在输入组件之前显示一个label标签；afterPageText：在输入组件之后显示一个label标签；displayMsg：显示页面信息。

SearchBox（搜索框）：options：返回属性对象。menu：返回搜索类型菜单对象。textbox：返回文本框对象。selectName：选择当前搜索类型名。destroy：销毁该控件。

ProgressBar（进度条）：

onChange：在值更改的时候触发。

代码示例：

$('#p').progressbar({
	onChange: function(value){
		alert(value)
	}
});

Tooltip（提示框）

（3）Layout（布局）

Panel（面板）

<div id="p" class="easyui-panel" title="My Panel"     
        style="width:500px;height:150px;padding:10px;background:#fafafa;"   
        data-options="iconCls:'icon-save',closable:true,    
                collapsible:true,minimizable:true,maximizable:true">   
    <p>panel content.</p>   
    <p>panel content.</p>   
</div>

Tabs（选项卡）

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="Tab1" style="padding:20px;display:none;">   
        tab1    
    </div>   
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
        tab2    
    </div>   
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
        tab3    
    </div>   
</div>

Accordion（分类）

<script type="text/javascript">
	$(document).ready(function() {
	
	//$("#aa").accordion();
	 $("#aa").accordion({
	   animate:false,//定义在展开和折叠的时候是否显示动画效果
	   multiple:true//
	 });
		
	});
</script>
</head>

<body>

  <div id="aa"  style="width:300px;height:200px;">
    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
        <p>Accordion is a part of easyui framework for jQuery. 
        It lets you define your accordion component on web page more easily.</p>
    </div>
    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
        content2
    </div>
   <div title="Title3">
        content3
    </div>
</div>
  
</body>

（4）Menu and Button(菜单和按钮)
menu(菜单)：

使用$.fn.menu.defaults重写默认值对象。

菜单组件通常用于快捷菜单。他是构建其他菜单组件的必备基础组件。比如：menubutton和splitbutton。它还可以用于导航和执行命令

LinkButton（按钮）

使用$.fn.linkbutton.defaults重写默认值对象。

按钮组件使用超链接按钮创建。它使用一个普通的<a>标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。

MenuButton（菜单按钮）

扩展自$.fn.linkbutton.defaults。使用$.fn.menubutton.defaults重写默认值对象。

菜单按钮是下拉菜单的一部分。它伴随着linkbutton和menu组件。在用户点击linkbutton之前菜单是隐藏的，当用户用鼠标点击或移动到linkbutton上面的时候菜单才会显示。

SplitButton（分割按钮）

扩展自$.fn.linkbutton.defaults。用于$.fn.splitbutton.defaults重写默认值对象。

类似菜单按钮，分割按钮也与linkbutton和菜单有关系。menubutton和splitbutton之间的区别是,splitbutton分为两部分。它只会在鼠标移动到splitbutton按钮右边的时候才会显示出“分割线”。

（5）Form(表单)

ValidateBox（验证框）

使用$.fn.validatebox.defaults重写默认值对象。

validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值，它将会更改输入框的背景颜色，并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交

ComboBox（下拉列表框）

扩展自$.fn.combo.defaults。使用$.fn.combobox.defaults重写默认值对象。

下拉列表框显示一个可编辑文本框和下拉式列表，用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。

NumberBox（数值输入框）

扩展自$.fn.validatebox.defaults。使用$.fn.numberbox.defaults重写默认值对象。

数值输入框是用来限制用户只能输入数值型数据的。他可以转换一个输入的元素到其他类型，比如：数字、百分比、货币等。更多的输入类型定义依赖于'formatter'和'parser'函数。

Calendar（日历）

使用$.fn.calendar.defaults重写默认值对象。

日历控件显示一个月的日历，允许用户选择日期和移动到下一个或上一个月。默认情况下，一周的第一天是周日。它可以通过设置'firstDay'属性的值来更改设置

（6）Window（窗口）

扩展自$.fn.panel.defaults。使用$.fn.window.defaults重写默认值对象。

窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。

Dialog（对话框窗口）

<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"   
        data-options="iconCls:'icon-save',resizable:true,modal:true">   
    Dialog Content.    
</div>

Messager（消息窗口）

（7）表格和树
DataGrid（数据表格）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'easyui02.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/themes/icon.css">

<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {

		$("#tt").datagrid({
			rownumbers : true,
			url : "${pageContext.request.contextPath}/datagrid_data1.json",
			columns : [ [ {
				field : "ck",
				checkbox : true
			}, {
				field : "itemid",
				title : "Itemid",
				width : 50
			}, {
				field : "attr1",
				title : "Attrl",
				width : 50
			}, {
				field : "status",
				title : "Status",
				width : 50
			} ] ],
			singleSelect : true,
			pagination : true,
			pageList : [ 3, 5, 8 ],
			pageSize : 3
		});
	})
</script>
</head>

<body>
	
	<table id="tt" border="1px" align="center" cellpadding="0"
		cellspacing="0">
		<thead>


		</thead>
		<tbody>

		</tbody>
	</table>
</body>
</html>

闫梅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery EasyUI

jQuery EasyUI(1)简介jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。jQuery EasyUI是基于JQuery的一个前台ui界面的插件，
复制链接

扫一扫

专栏目录