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 的框架,集成了各种用 ...
随机推荐
- 屏幕坐标点转UGUI坐标【包含屏幕适配】
using UnityEngine; public class ScreenToUI : MonoBehaviour { public const float UI_Width = 1366f; pu ...
- raw, SOCK_RAW - Linux IPv4 raw socket.
总 览 #include <sys/socket.h> #include <netinet/in.h> raw_socket = socket(PF_INET, SOCK_RA ...
- Redis线上环境做Keys匹配操作！你可以离职了！
转自:https://blog.csdn.net/bntx2jsqfehy7/article/details/84207884一.一个新闻 新闻内容如下:php工程师执行redis keys * 导致 ...
- apt-get update 101错误解决办法
在一次装好Ubuntu系统, 执行 sudo apt-get update 时,报了错 " W: Failed to fetch http://security.ubuntu.com/ubu ...
- Go的学习 sort
1.排序操作主要都在 sort包中,导入就可以使用了 2.sort.Ints对整数进行排序 package main; import ( "fmt" "sort" ...
- 爬虫技术：scrapy 知识点一
---恢复内容开始--- 1.scrapy框架 每一步的解释: step1:引擎从爬虫器获取要爬行的初始请求. step2:引擎在调度程序中调度请求,引擎把这个初始请求传递给调度器,并向调度器索要下一 ...
- 【leetcode】609. Find Duplicate File in System
题目如下: Given a list of directory info including directory path, and all the files with contents in th ...
- Java并发与多线程与锁优化
前言 目前CPU的运算速度已经达到了百亿次每秒,所以为了提高生产率和高效地完成任务,基本上都采用多线程和并发的运作方式. 并发(Concurrency):是指在某个时间段内,多任务交替处理的能力.CP ...
- HDU 6058 Kanade's sum —— 2017 Multi-University Training 3
Kanade's sum Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tota ...
- 超全Altium Designer16 总结--Altium Designer
原址:http://blog.csdn.net/qq_29350001/article/details/52199356 以前是使用DXP2004来画图的,后来转行.想来已经有一年半的时间没有画过了. ...