EasyUi基础学习(一)—基本组件(上)
一、概述
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基础学习(一)—基本组件(上)的更多相关文章
- EasyUI 关于IE使用window组件上传文件
有时候IE会对使用window组件上传文件(第二次)不生效,解决方案是: 将该window每次打开的时候,使用: $('#adUploadWindow').window('refresh', 'pan ...
- vue 学习六 在组件上使用v-model
其实这个部分应该是属于component,为什么把这玩意单独拿出来呢,原因是它这个东西比较涉及到了vue的事件,以及v-model指令的使用,还是比较综合的.所以就拿出来啦 父组件 <templ ...
- Struts2基础学习(六)—文件的上传和下载
一.文件的上传 1.单个文件上传 Struts2使用拦截器完成了文件的上传,而且底层使用的也是FileUpload开源组件. 客户端注意事项: (1)method="post&qu ...
- 2019-10-9:渗透测试,基础学习,php文件上传,mysql基础
header("Content-Type:text/html;charst="utf-8")设置头部信息,解决编码问题setcookie("loginStrin ...
- Yaf零基础学习总结3-Hello Yaf
Yaf零基础学习总结3-Hello Yaf 上一次我们已经学习了如何安装yaf了,准备工作做好了之后我们来开始实际的编码了,码农都知道一个经典的语句就是“Hello World”了,今天我们开始入手Y ...
- salesforce零基础学习(八十九)使用 input type=file 以及RemoteAction方式上传附件
在classic环境中,salesforce提供了<apex:inputFile>标签用来实现附件的上传以及内容获取.salesforce 零基础学习(二十四)解析csv格式内容中有类似的 ...
- salesforce lightning零基础学习(十五) 公用组件之 获取表字段的Picklist(多语言)
此篇参考:salesforce 零基础学习(六十二)获取sObject中类型为Picklist的field values(含record type) 我们在lightning中在前台会经常碰到获取pi ...
- Vue – 基础学习(2):组件间 通信及参数传递
Vue – 基础学习(2):组件间 通信及参数传递
- salesforce lightning零基础学习(十七) 实现上传 Excel解析其内容
本篇参考: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader https://github.com/SheetJS/sheetjs ...
随机推荐
- .NET Core log4net 使用
log4net .NET Core 版使用,log4net 2.0.7版发布也有一段时间了,从2.0.6 版开始就已经支持.NET Core. 之前有介绍NLog .NET Core版的使用,ASP. ...
- 前端学PHP之日期与时间
前面的话 在Web程序开发时,时间发挥着重要的作用,不仅在数据存储和显示时需要日期和时间的参与,好多功能模块的开发,时间通常都是至关重要的.网页静态化需要判断缓存时间.页面访问消耗的时间需要计算.根据 ...
- 一种基于路网图层的GPS轨迹优化方案
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 GPS数据正常情况下有20M左右的偏移,在遇到高楼和桥梁等情况 ...
- c#基础语句——分支语句
一.if...else... if是如果的意思,else是另外的意思,if后面跟(),括号内为判断条件,如果符合条件则进入if语句执行命令.如果不符合则不进入if语句.else后不用加条件,但是必须与 ...
- 【2017-2-17】C#基础 - 定义变量,输入输出
1.初学C#. C#是专门为.NET的应用而开发的语言,他吸收了C++.Visual Basic.Delphi.Java等语言的优点,提高了程序开发的效率. 2.Visual Studio.NET的集 ...
- Window下JDK安装与配置
今天项目组开会,由于.Net平台的限制无法满足现有业务需求,项目计划从.Net平台转Java平台,采用Java+Spark+Hadoop,之前关于Java和Hadoop的书也买的有只是平时看的少,最近 ...
- C++ protected访问权限思考
看了云风关于protected的思考,自己也总结了下. C++的访问权限有三个 private.protected.public. 如果不包括继承的话,比较好理解,可以分为类外和类内两部分.类外不能访 ...
- 1625: [Usaco2007 Dec]宝石手镯
1625: [Usaco2007 Dec]宝石手镯 Time Limit: 5 Sec Memory Limit: 64 MB Submit: 919 Solved: 618 [Submit][S ...
- 1270: [BeijingWc2008]雷涛的小猫
1270: [BeijingWc2008]雷涛的小猫 Time Limit: 50 Sec Memory Limit: 162 MBSubmit: 905 Solved: 430[Submit][ ...
- Android:百度地图 + 百度导航
地图SDK 开发指南:http://lbsyun.baidu.com/index.php?title=androidsdk/guide/introduction 导航SDK开发指南:http://lb ...