easyUI学习笔记一
1.引用js文件
<script type="text/javascript" src = jquery-easyui/jquery.min.js> </script>
<script type="text/javascript" src = jquery-easyui/jquery.easyui.min.js> </script>
<script type="text/javascript" src = jquery-easyui/locale/easyui-lang-zh_CN.js> </script>
<script type="text/javascript" src ="index.js"></script> <!-- 自定义js -->
2.引用css文件
<link rel="stylesheet" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" href="jquery-easyui/themes/icon.css">
3.第一个demo
<!DOCTYPE html>
<html>
<head>
<title>easyui学习</title>
<script type="text/javascript" src = jquery-easyui/jquery.min.js> </script>
<script type="text/javascript" src = jquery-easyui/jquery.easyui.min.js> </script>
<script type="text/javascript" src = jquery-easyui/locale/easyui-lang-zh_CN.js> </script>
<link rel="stylesheet" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" href="jquery-easyui/themes/icon.css">
</head>
<body>
<div class="easyui-dialog" style="width:500px;height:500px" data-options="title:'标题 ',collapsible:true,iconCls:'icon-ok'">
内容部分</div> </body>
</html>
4.js调用dialog
<div id ="box" title="标题" style="width:500px;height:500px">
内容部分
</div>
$(function(){
$('#box').dialog();
})
5.可拖动
$(function(){
$('#box').draggable();
})
6.拖放Droppable
<!DOCTYPE html>
<html>
<head>
<title>easyui学习</title>
<script type="text/javascript" src = jquery-easyui/jquery.min.js> </script>
<script type="text/javascript" src = jquery-easyui/jquery.easyui.min.js> </script>
<script type="text/javascript" src = jquery-easyui/locale/easyui-lang-zh_CN.js> </script> <script type="text/javascript" src ="index.js"></script> <!-- 自定义js --> <link rel="stylesheet" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" href="jquery-easyui/themes/icon.css">
</head>
<body>
<div id="dd" style="width: 600px;height: 600px;background-color:red;" ></div> <div id ="box" title="标题" style="width:500px;height:500px;background-color: green;">
<span id="span">内容部分</span>
</div> <!-- <div id ="box" title="标题" style="width:500px;height:500px">
内容部分
</div> -->
</div> </body>
</html>
$(function(){
$("#dd").droppable({
accept:'#box',
onDragEnter:function(e,source){
$(this).css("background-color",'blue');
},
onDragLeave:function(e,source){
$(this).css("background-color",'red');
}
});
$('#box').draggable();
})
easyUI学习笔记一的更多相关文章
- easyUI学习笔记二
1． 拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <scr ...
- easyui学习笔记8—在手风琴中加载其他的页面
在手风琴中加载其他页面和在表格中加载其他的页面有写类似的,就是请求另外一个页面显示数据. 1.先看看引用的资源文件 <link rel="stylesheet" href=& ...
- easyui学习笔记2—在行内进行表格的增删改操作
第一篇笔记中记录了如何实现表格的增删改,那个是点击之后跳出来一个对话框然后进行的,这里是在表格本身上进行的操作,也很简单,但是这里发现一个版本问题,也可以说是兼容性问题. 1.首先我们看引用的js和c ...
- easyui学习笔记1—增删改操作
最近公司要用easyui,这里自己看了官网几篇文章,遇到些问题,大多数的问题都是敲代码的时候笔误,其他有些地方确实需要注意一下,这里做些笔记. 1.在mysql中建好表之后修改id字段为递增字段,发现 ...
- easyUi 学习笔记 （二 ） 使用tabs 里datagridview 发送ajax请求 不访问后台的问题
这个BUG 我花了一个半小时, 还是看不出哪里的问题, 于是就百度到这么一段话,我需要记住 <================================================= ...
- EasyUI学习笔记之panel
<easyUI panel 属性:> <!--引入easyUI panel 组件 设置宽,高,定义标题(默认在左上角),设置图标iconCls:'icon-ok',引入工具tools ...
- EasyUI学习笔记---Datagrid真分页
EasyUI Datagrid组件在我看来功能还是很强大的,在我使用过程中遇到分页请求的问题困扰了一天才解决,下面我就把我遇到的问题分享一下 //datagrid数据表格渲染 $("#dg& ...
- easyui学习笔记14-拓展的基本验证规则
/** * 扩展的基本校验规则, */ $.extend($.fn.validatebox.defaults.rules, { minLength : { // 判断最小长度 validator : ...
- JQuery EasyUI学习笔记
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6690888.html 简介与准备 jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用 ...
随机推荐
- REINDEX - 重建索引
SYNOPSIS REINDEX { DATABASE | TABLE | INDEX } name [ FORCE ] DESCRIPTION 描述 REINDEX 基于存储在表上的数据重建索引, ...
- Kvm--03 kvm克隆，桥接网络，热添加
目录 1.Kvm克隆 1). 完整克隆 2). 链接克隆 2.kvm虚拟机的桥接网络 3.在线热添加网卡,cpu 1). 热添加网卡 2). 热添加内存 3). 热添加cpu参数 1.Kvm克隆 1) ...
- standard_key.kmp
[KeyRemap]keyVersion=2B33554467=[eraseeof]S36=[bof]B33554466=[pagedn]S35=[eof]B33554465=[pageup]B10= ...
- 【Leetcode周赛】从contest-41开始。（一般是10个contest写一篇文章）
Contest 41 ()(题号) Contest 42 ()(题号) Contest 43 ()(题号) Contest 44 (2018年12月6日,周四上午)(题号653—656) 链接:htt ...
- linux 性能测试之基准测试工具
https://niyunjiu.iteye.com/blog/316302 system: lmbench unixbench5.1.2 ubench freebench nbench ltp xf ...
- vue新建项目之标准路由配置--父子嵌套界面
配置路由所有用到的地方总共四步或者说四处 1.index.js(src--router--index.js) 父子界面嵌套---需要配置子路由 import Vue from 'vue' import ...
- javascaipt中数组元素删除方法delete和splice
一.用delete 删除数组中元素(少用) 说明:delete: 只是被删除的元素变成了 undefined ,即数组长度不变 //定义数组 var array=["aa",&qu ...
- PhpStorm中如何使用database工具
环境:ubuntu18.4 mysql5.7 一. 打开database 1.选择View—>Tool Windows—>Database单击打开. 2.新增数据连接 选择 “+”—> ...
- Java中的两种异常类型及其区别？
Java中的两种异常类型是什么?他们有什么区别? Throwable包含了错误(Error)和异常(Excetion两类) Exception又包含了运行时异常(RuntimeException, 又 ...
- JAVA 利用 jmc或jvisualvm 监控 本地或者远程JVM
本地检测之间到$JAVA_HOME/bin 下的目录点击jmc 或者jvisualvm,然后选择你要监控的app 可是一般我们生产环境项目都是部署在远程,这个时候想要监控怎么办 1.监控tomcat ...