jQuery EasyUI_01 快速入门 基础入门&使用

已于 2022-07-11 08:30:09 修改
阅读量1.4k 收藏 6
点赞数 2
分类专栏： easyui 文章标签： easyui jquery 前端 JavaWeb
于 2022-05-05 01:28:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60786924/article/details/124580379
版权

目录

一、jQuery EasyUI 简介

        什么是 jQuery EasyUI

二、jQuery EasyUI 组件下载

三、轻松使用 jQuery 和 HTML5

        1. 直接在 HTML 声明组件。

        2. 编写 JavaScript 代码来创建组件。

 四、快速上手

开始使用 jQuery EasyUI

问题：如何编写多个快速导入 EasyUI 所需要的那些样式？

五、jQuery EasyUI 插件（官方）

属性

事件

方法

开始使用 jQuery EasyUI

一、jQuery EasyUI 简介

       1. jQuery EasyUI简介：封装大量的jQuery插件(简化ajax，jquery，css样式，布局)

       2. jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。

        什么是 jQuery EasyUI

        jQuery EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。

  • easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。
  • easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
  • 使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。
  • HTML 网页的完整框架。
  • easyui 节省了开发产品的时间和规模。
  • easyui 非常简单，但是功能非常强大。

二、jQuery EasyUI 组件下载

        可以从EasyUI官网： https://www.jeasyui.net/plugins 上下载您需要的 jQuery EasyUI 版本。

​

        点击 EasyUI 下载进入以下界面 （我们选择 jQuery EasyUI）​

        根据需求选择版本： ​

         下载完毕后，进行解压，然后导入自己需要使用 jQuery EasyUI 编写的项目文件中。

三、轻松使用 jQuery 和 HTML5

        jQuery EasyUI 提供易于使用的组件，它使 Web 开发人员快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。  有两个方法声明的 UI 组件:

        1. 直接在 HTML 声明组件。

<div class="easyui-dialog" style="width:400px;height:200px"
    data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
        dialog content.
</div>

        2. 编写 JavaScript 代码来创建组件。

<input id="cc" style="width:200px" />
$('#cc').combobox({
    url: ...,
    required: true,
    valueField: 'id',
    textField: 'text'
});

         插件内容：

            属性：设置插件的样式。图标，宽度，高度。

            事件：单击事件，双击

            方法：修改插件属性，状态。 

 四、快速上手

开始使用 jQuery EasyUI

        下载库，并在您的页面中引用 EasyUI CSS 和 JavaScript 文件。

        官方导入库的方式：

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js">
</script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js">
</script>

        jQuery EasyUI 的使用非常简单，只需要学会使用文档，基础的 HTML+CSS+JS+jQuery 常识就可以进行实现。       

         文档内容：

        JavaWeb使用JSP编写：

<!-- css -->
	<link rel="stylesheet" type="text/css" href="static/js/jquery-easyui-1.5.5.2/themes/default/easyui.css" charset="UTF-8" />
	<!-- jQuery -->
	<script type="text/javascript" src="static/js/jquery-easyui-1.5.5.2/jquery.min.js"
		charset="UTF-8">
		</script>
	<!-- easyui  js -->
	<script type="text/javascript" src="static/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js" charset="UTF-8">
			
		</script>
	<!-- 图标 -->
	<link rel="stylesheet" type="text/css"
		href="static/js/jquery-easyui-1.5.5.2/themes/icon.css" charset="UTF-8" />
	<!-- 汉化类库 -->
	<script type="text/javascript" src="static/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js" charset="UTF-8">
				
			</script>

        比如：我们需要实现 以EasyUI 文档为例的如下界面：

        JSP实现：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<!-- css -->
	<link rel="stylesheet" type="text/css" href="static/js/jquery-easyui-1.5.5.2/themes/default/easyui.css" charset="UTF-8" />
	<!-- jQuery -->
	<script type="text/javascript" src="static/js/jquery-easyui-1.5.5.2/jquery.min.js"
		charset="UTF-8">
		</script>
	<!-- easyui  js -->
	<script type="text/javascript" src="static/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js" charset="UTF-8">
			
		</script>
	<!-- 图标 -->
	<link rel="stylesheet" type="text/css"
		href="static/js/jquery-easyui-1.5.5.2/themes/icon.css" charset="UTF-8" />
	<!-- 汉化类库 -->
	<script type="text/javascript" src="static/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js" charset="UTF-8">
				
			</script>
</head>
<body>
<body class="easyui-layout">   
    <div data-options="region:'north',title:'标题',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'权限',split:true" style="height:100px;"></div>   
    <div data-options="region:'west',title:'列表',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'内容'" style="padding:5px;background:#eee;"></div>   
</body> 
<h3>普通超链接</h3>
<a>超链接</a>
<button>普通按钮</button>
<!-- 通过jQuery EasyUI 实现把超链接转换 按钮 -->
<a class="easyui-link button" id="abtn">超链接按钮</a>
<script type="text/javascript">
/* 该区域为设置相对应的一些来自 jQuery EasyUI 中的样式设置 */
	$("#abtn").linkbutton({
		width:'100px',
		height:'200px',
		//图标添加
		iconCls:'icon-search',
		//按钮的大小
		size:'large',
		//设置jQuery EasyUI中点击事件
	onClick:function(){
		alert(123);
		//方法调用
		$(this).linkbutton('disable');
	}
	});
</script>
</body>
</html>

        实现效果如图（后台管理框架）：

问题：如何编写多个快速导入 EasyUI 所需要的那些样式？

        使用 include 指令：

      以JavaWeb为例创建一个（NewFile1.jsp）需要导入的样式以及类库：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- css -->
	<link rel="stylesheet" type="text/css" href="static/js/jquery-easyui-1.5.5.2/themes/default/easyui.css" charset="UTF-8" />
	<!-- jQuery -->
	<script type="text/javascript" src="static/js/jquery-easyui-1.5.5.2/jquery.min.js"
		charset="UTF-8">
		</script>
	<!-- easyui  js -->
	<script type="text/javascript" src="static/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js" charset="UTF-8">
			
		</script>
	<!-- 图标 -->
	<link rel="stylesheet" type="text/css"
		href="static/js/jquery-easyui-1.5.5.2/themes/icon.css" charset="UTF-8" />
	<!-- 汉化类库 -->
	<script type="text/javascript" src="static/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js" charset="UTF-8">
				
			</script>

        另一个jsp页面进行引入

        引入：

	<!-- 通过指令进行引入 -->
	<%@ include file="NewFile1.jsp" %>

        实现与上方图片效果一致（引入式）：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<!-- 通过指令进行引入 -->
	<%@ include file="NewFile1.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<body class="easyui-layout">   
    <div data-options="region:'north',title:'标题',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'权限',split:true" style="height:100px;"></div>   
    <div data-options="region:'west',title:'列表',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'内容'" style="padding:5px;background:#eee;"></div>   
</body> 
<h3>普通超链接</h3>
<a>超链接</a>
<button>普通按钮</button>
<!-- 通过jQuery EasyUI 实现把超链接转换 按钮 -->
<a class="easyui-link button" id="abtn">超链接按钮</a>
<script type="text/javascript">
/* 该区域为设置相对应的一些来自 jQuery EasyUI 中的样式设置 */
	$("#abtn").linkbutton({
		width:'100px',
		height:'200px',
		//图标添加
		iconCls:'icon-search',
		//按钮的大小
		size:'large',
		//设置jQuery EasyUI中点击事件
	onClick:function(){
		alert(123);
		//方法调用
		$(this).linkbutton('disable');
	}
	});
</script>
</body>
</html>

        其它的 EasyUI 格式都可以通过文档拿到样式，然后根据自己的风格进行修改。

五、jQuery EasyUI 插件（官方）

        easyui 的每个组件都有属性、方法和事件。用户可以很容易地对这些组件进行扩展。

属性

        属性是定义在 jQuery.fn.{plugin}.defaults。比如，dialog 的属性是定义在         jQuery.fn.dialog.defaults。

事件

        事件（回调函数）也是定义在 jQuery.fn.{plugin}.defaults。

方法

        调用方法的语法：$('selector').plugin('method', parameter);

其中：

  • selector 是 jquery 对象选择器。
  • plugin 是插件名称。
  • method 是与插件相匹配的已存在方法。
  • parameter 是参数对象，可以是对象、字符串...

        方法是定义在 jQuery.fn.{plugin}.methods。每个方法有两个参数：jq 和 param。第一个参数 'jq' 是必需的，引用 jQuery 对象。第二个参数 'param' 引用方法传递的实际参数。比如，要扩展 dialog 组件的方法名为 'mymove' 的方法，代码如下：

$.extend($.fn.dialog.methods, {
mymove: function(jq, newposition){
return jq.each(function(){
$(this).dialog('move', newposition);
});
}
});

        现在您可以调用 'mymove' 方法来移动对话框（dialog）到指定的位置：

$('#dd').dialog('mymove', {
left: 200,
top: 100
});

开始使用 jQuery EasyUI

        下载库，并在您的页面中引用 EasyUI CSS 和 JavaScript 文件。


<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js">
</script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js">
</script>

        一旦您引用了 EasyUI 必要的文件，您就可以通过标记或者使用 JavaScript 来定义一个 EasyUI 组件。比如，要顶一个带有可折叠功能的面板，您需要编写如下 HTML 代码：


<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
title="My Panel" iconCls="icon-save" collapsible="true">
The panel content
</div>

        当通过标记创建组件，'data-options' 属性被用来支持自版本 1.3 以来 HTML5 兼容的属性名称。所以您可以如下重写上面的代码：

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
title="My Panel" data-options="iconCls:'icon-save',collapsible:true">
The panel content
</div>

        下面的代码演示了如何创建一个绑定 'onSelect' 事件的组合框。

<input class="easyui-combobox" name="language"
data-options="
url:'combobox_data.json',
valueField:'id',
textField:'text',
panelHeight:'auto',
onSelect:function(record){
alert(record.text)
}">

 

£轻描～淡写°
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EasyUI Jquery 学习笔记 —— Form（表单）详细版
cccloveforever的博客
04-09 1365
微调器（spinner）是创建其他微调器组件（比如：数值微调器 numberspinner、时间微调器 timespinner，等等）的基础组件。时间微调器（timespinner）是基于微调器（spinner）创建的。密码框会通过显示圆点的方式来保护您输入的密码文本，同时输入框中会提供一个眼睛的图标来通过点击的动作查看您输入的密码，来确保您输入的密码正确无误。与日期框（datebox）相似，日期时间框（datetimebox）允许用户选择要显示的带有指定格式的日期和时间的日期和时间。
easyui（基础布局）
XiaoLiangyaya的博客
05-07 251
一、概括 什么是easyUI？ jQuery EasyUI是一组基于jQuery的UI插件集合体，能帮助web开发者更轻松的打造出功能丰富并且美观的UI界面 为什么学？ ①.使用easyui 不需要写很多代码，只需要编写一些简单 HTML 标记，就可以定义用户界面 ②.easyui 是个完美支持 HTML5 网页的完整框架 ③.easyui 能节省网页开发的时间和规模 ④.easyui 很简单但功能很强大，容易上手 用在哪？ ...
jQuery EasyUI快速入门02
m0_67768699的博客
05-05 529
目录 一、全局path定义 二、页面缓存 三、tree组件实现JSON数据绑定 四、动态添加选项卡 五、完整的菜单栏和选项卡页面显示
easyUI详解教程
woaini886353的博客
05-06 3385
教程 概述 这个教程的目的是说明如何使用easyui框架容易的创建网页。首先，你需要包含一些js和css文件： <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <script type="text/javascript" src="../jquery-1.4.2.min.js"></script> <script type="text/javascrip
jQuery EasyUI快速入门01
m0_67768699的博客
05-04 1113
目录 一、jQuery EasyUI框架概述 1、什么是jQuery EasyUI? 2、jQuery Easy的作用 3、EasyUI的目录说明 二、WEB项目搭建EasyUI环境 1、导入需要的css样式文件。 2、导入相关的js文件 3、完整导入： 三、EasyUI入门示例 1、标准开发步骤 2、 代码模板 四、EasyUI的三大基础概念 1、 属性设置 2、事件触发设置 3、方法调用设置
使用easyui前端框架构建一个crud应用（看完这篇就够了）
最新发布
沐雨橙风ιε的博客
11-09 1484
easyui是博主最喜欢的前端框架，因为它提供了多种主题和圆润好看的各种组件。这篇文章将会详细地介绍easyui前端框架的使用，通过创建一个crud应用来帮助大家快速掌握easyui的使用。
jQuery Easyui快速入门教程
10-21
jQuery EasyUI是一组基于JQuery的UI插件集合，而JQueryEasyUI的目标就是帮助开发者更轻松的打造出功能丰富并且美观的UI界面，下面小编带领大家一起学习jquery easyui入门知识，一起看看吧
jQueryEasyUI入门
07-22
教程名称：jQuery EasyUI入门课程目录：【】02.[jQueryEasyUI]第2章使用EasyUI【】03.[jQueryEasyUI]第3章Draggable(拖动)组件【】04.[jQueryEasyUI]第4章Droppable(放置)组件【】05.[jQueryEasyUI]第5章Resizable...
jQueryEasyUI入门共2页.pdf.zip
11-22
jQueryEasyUI入门共2页.pdf.zip
从零开始学习jQuery系列教程
12-30
本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章是入门第一篇, 主要是简单介绍jQuery, 通过简单示例指导大家如何编写jQuery代码以及搭建开发环境. 详细讲解了如何在Visual Studio中配合使用jQuery.
从零开始学习jQuery
07-11
从零开始学习jQuery，欢迎新生下载使用！很好适合自学
《jQuery+EasyUI开发指南》源码
03-07
《jQuery+EasyUI开发指南》源码,书籍自带源码
超实用的jQuery-EasyUI视频教程（30集）
07-22
教程名称：超实用的jQuery-EasyUI视频教程（30集）课程目录：【】jQuery-EasyUI视频教程（01-02集）【】jQuery-EasyUI视频教程（03-04集）【】jQuery-EasyUI视频教程（05-06集）【】jQuery-EasyUI视频教程（07-08集）【】jQuery-EasyUI视频教程（09-10集）【IT教 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
EasyUI–环境配置详解
程序员大阳
03-13 5561
需要预先说明的一点是，不管是EasyUI也好，Bootstrap也罢，都可以认为是在CSS、Javascript、jQuery上再封装了一层。所以我们来看一个十分简单的例子：<a href="#" class="easyui-linkbutton">搜索</a>其中easyui-linkbutton，不就在CSS里面定义了一个.easyui-linkbutton的样式么，猫哥也可以开发一个CatBr
EasyUI学习笔记(一)——EasyUI入门
u012369153的专栏
12-05 4564
初识EasyUIEasyUI
jQuery EasyUI详细入门学习一
从放弃到开始
11-25 490
 前言：当你看到这篇文章的时候，首先，你需要有一定的javascript与jquery的基础，要不你真的是不明白的。所以请先学习javaCript与html等基础知识，然后再来学习jQuery easyui,当然如果你一定要先学这个，可能学习起来有点吃力。 jQuery 有差不多2000多个插件，而jQuery EasyUI只是其中的一个插件，对于后端人员来说，会使用这个也不错了。    ...
easyui 获取options_jQuery EasyUI 下拉框及值的获取
06-06
获取下拉框选中的值可以使用以下代码： ```javascript // 获取下拉框的值 var value = $('#combobox').combobox('getValue'); // 获取下拉框的文本 var text = $('#combobox').combobox('getText'); ``` 如果需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值