一、概述

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

     jQuery EasyUI是基于JQuery的一个前台ui界面的插件，功能相对没extjs强大，但页面也是相当好看的，同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用，相对于extjs更轻量。

jQuery EasyUI有以下特点:

(1)基于jquery用户界面插件的集合。

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

(3)EasyUI支持两种渲染方式分别为javascript方式，$('#p').panel({...})和html标记方式，class="easyui-panel"。

(4)支持HTML5(通过data-options属性)。

 

二、加载UI组件的方式

     有两种加载方式: 使用class方式加载、使用JS调用加载。

1.使用class方式加载

     格式:easyui-组件名

<body style="height: 100%;width: 100%" >

          <div class="easyui-dialog" title="标题" style="height: 200px;width: 400px">

              这里是内容

          </div>

  </body>

效果:

     

 

2.使用JS调用加载

JS代码

	$(function(){

		$("#myDialog").dialog({

			title:'JS调用',

			width:400,

			height:200

		});

	});

HTML代码

<body style="height: 100%;width: 100%" >

          <div id="myDialog">

              现在使用JS调用

          </div>

  </body>

结果:

    

 

三、DRAGGABLE(拖动)组件

1.属性列表

 

		$("#myDiv").draggable({

			revert:'true',

		});

 

2.事件

 

		$("#myDiv").draggable({

			//在拖动之前触发，返回false将取消拖动。

			onBeforeDrag:function(e){

				alert("拖动前...");

				return false;

			},

			//在开始拖动时触发

			onBeforeDrag:function(e){

				alert("拖动时...");

			},

			//在拖动过程中触发

			onDrag:function(e){

				alert("拖动ing...");

			},

			//在拖动时停止触发

			onStopDrag:function(e){

				alert("拖动停止了...");

			},

		});

 

3.方法

		//禁止拖动

		$("#myDiv").draggable("disable");

		//允许拖放

		$("#myDiv").draggable("enable");

 

四、Droppable(放置)组件

     所谓放置，就将一个物体入某一个物体内触发各种效果，这个组件不依赖于其他组件。

1.属性

    以上属性表面上看上去是没有变化的，但是如果disabled为true，不会触发任何效果。

 

2.事件

 

HTML代码

<div id="divOne" style="height: 300px;width: 500px;background-color: #98FB98">

     One

</div>

<div id="divTwo" style="height: 100px;width: 100px;background-color: #EE00EE">

     Two

</div>

JS代码

		$("#divTwo").draggable();

		$("#divOne").droppable({

			accept:"#divTwo",

			disabled:true,

			//被拖拽元素到放置区内的时候触发

			onDragOver : function (e, source) {

				$(this).css("background", "blue");

			},

			//在被拖拽元素经过放置区的时候触发

			onDragEnter : function (e, source) {

				$(this).css("background", "orange");

			},

			//在被拖拽元素离开放置区的时候触发

			onDragLeave : function (e, source) {

				$(this).css("background'", "green");

			},

			//在被拖拽元素放入到放置区的时候触发

			onDrop : function (e, source) {

				$(this).css("background", "maroon");

			},

		});

结果:

    

 

3.方法

 

五、Resizeable(调整大小)组件

     调整大小就是可以对元素可以拖着调整大小，这个组件不依赖于其他组件。

1.属性

 

2.事件

		$('#rr').resizable({

			onStartResize : function (e) {

				console.log("开始改变大小时！");

			},

			onResize : function (e) {

				console.log("调整大小时期触发！");

				//return false;

			},

			onStopResize : function (e) {

				console.log("停止调整大小时触发！");

			},

		});

	});

 

3.方法

EasyUi基础学习(一)—基本组件(上)的更多相关文章

  1. EasyUI 关于IE使用window组件上传文件

    有时候IE会对使用window组件上传文件(第二次)不生效,解决方案是: 将该window每次打开的时候,使用: $('#adUploadWindow').window('refresh', 'pan ...

  2. vue 学习六 在组件上使用v-model

    其实这个部分应该是属于component,为什么把这玩意单独拿出来呢,原因是它这个东西比较涉及到了vue的事件,以及v-model指令的使用,还是比较综合的.所以就拿出来啦 父组件 <templ ...

  3. Struts2基础学习(六)—文件的上传和下载

    一.文件的上传 1.单个文件上传      Struts2使用拦截器完成了文件的上传,而且底层使用的也是FileUpload开源组件. 客户端注意事项: (1)method="post&qu ...

  4. 2019-10-9：渗透测试，基础学习，php文件上传，mysql基础

    header("Content-Type:text/html;charst="utf-8")设置头部信息,解决编码问题setcookie("loginStrin ...

  5. Yaf零基础学习总结3-Hello Yaf

    Yaf零基础学习总结3-Hello Yaf 上一次我们已经学习了如何安装yaf了,准备工作做好了之后我们来开始实际的编码了,码农都知道一个经典的语句就是“Hello World”了,今天我们开始入手Y ...

  6. salesforce零基础学习（八十九）使用 input type=file 以及RemoteAction方式上传附件

    在classic环境中,salesforce提供了<apex:inputFile>标签用来实现附件的上传以及内容获取.salesforce 零基础学习(二十四)解析csv格式内容中有类似的 ...

  7. salesforce lightning零基础学习(十五) 公用组件之 获取表字段的Picklist(多语言)

    此篇参考:salesforce 零基础学习(六十二)获取sObject中类型为Picklist的field values(含record type) 我们在lightning中在前台会经常碰到获取pi ...

  8. Vue – 基础学习(2):组件间 通信及参数传递

    Vue – 基础学习(2):组件间 通信及参数传递

  9. salesforce lightning零基础学习(十七) 实现上传 Excel解析其内容

    本篇参考: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader https://github.com/SheetJS/sheetjs ...

随机推荐

  1. libevent学习总结

    1. 信息隐藏:看*-internal.h文件 如bufferevent_private结构体在bufferevent_async.c中使用时: static inline struct buffer ...

  2. 读书笔记 effective c++ Item 25 实现一个不抛出异常的swap

    1. swap如此重要 Swap是一个非常有趣的函数,最初作为STL的一部分来介绍,它已然变成了异常安全编程的中流砥柱(Item 29),也是在拷贝中应对自我赋值的一种普通机制(Item 11).Sw ...

  3. C语言中NULL的定义

    用C语言编程不能不说指针,说道指针又不能不提NULL,那么NULL究竟是个什么东西呢? C语言中又定义,定义如下: #undef NULL #if defined(__cplusplus) #defi ...

  4. 做了个新的UWP类库 Sharp2D

    C#开发UWP的时候如果要实现高斯模糊效果的话,最好的选择似乎是微软的Win2D 但是Win2D太过庞大了,仅仅是庞大其实也没啥问题,毕竟net core就很庞大,但Win2d是一个Winmd组件 w ...

  5. loadrunner入门篇-Controller控制器

    Controller组件是LR的控制中心,主要包括场景设计和场景执行两部分.在VuGen中编辑完脚本并将脚本加载到Controller组件中,即开始对脚本运行时的场景进行设计,当场景设计完成后,即可执 ...

  6. 辗转相除法求H.C.F小结

    辗转相除法 大纲: 问题 原理 反思 1.     问题 一个试题,请完成以下填空 下列程序是利用辗转相除法求H.C.F(最大公约数) include <stdio.h> int main ...

  7. android sdk 深入理解adb

    adb 服务器-客户端程序包括3部分 1.客户端(client) 在开发机器上运行,可通过adb命令行呼叫客户端,ADT插件和DDMS同样需要adb客户端   2.服务端(server) 在开发机器上 ...

  8. 基于 Koa平台Node.js开发的KoaHub.js的控制器，模型，帮助方法自动加载

    koahub-loader koahub-loader是基于 Koa平台Node.js开发的KoaHub.js的koahub-loader控制器,模型,帮助方法自动加载 koahub loader I ...

  9. koahub软件市场微信编辑器源码，可下载

    管理过公众平台的小伙伴都知道,公众平台最重要的是图文的编辑和发布,由于微信公众平台的图文编辑页面比较简陋,功能和样式的比较少,所以一般都是使用专业的微信图文编辑器,koahub软件市场里有一款专门编辑 ...

  10. UI 自定义视图 ,视图管理器

    一>自定义label - textField 视图 自定义视图:系统标准UI之外,自己组合而出的新的视图 iOS 提供了很多UI组件 ,借助它们,我们可以做各种程序 尽管如此,实际开发中,我们还 ...