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 的框架,集成了各种用 ...
随机推荐
- docker ssh连接不上
docker ssh连接报下面的错 Last login: Thu Apr 13 09:17:23 2017 from localhost Connection to 127.0.0.1 closed ...
- azkaban简单使用
步骤 1.通过web服务器创建项目,项目名称和描述都是必须填的2.上传zip包 job定义 1.简单的job一个job就是一个properties文件,只不过文件是以.job结尾,文件里面定义了job ...
- 转载一篇别人分享的VSFTPD.CONF的中文解释方便以后查询
# 服务器以standalong模式运行,这样可以进行下面的控制 listen=YES # 接受匿名用户 anonymous_enable=YES # 匿名用户login时不询问口令 no_anon_ ...
- Django中的APP
3. Django中的APP: 什么是APP?以及为什么要用APP? project --> 项目 (老男孩教育大学校) APP --> 应用 (Linux学院/Python学院/大数据学 ...
- Codeforces Round #392 (Div. 2) - B
题目链接:http://codeforces.com/contest/758/problem/B 题意:给定n个点灯的情况,灯只有四种颜色RBGY,然后如果某个灯坏了则用'!'表示,现在要求将坏的灯( ...
- 8VC Venture Cup 2017 - Elimination Round - A
题目链接:http://codeforces.com/contest/755/problem/A 题意:给定一个正整数N,问你是否存在一个数M使得N*M+1不是素数(M的范围在[1,1000]). 思 ...
- Hibernate纯sql查询VO对象封装
hibernate 纯sql查询返回结果集(未关联映射)组装VO的问题//须保证别名字段与Vo字段一致 //引号中为vo对象属性需与sql查询返回字段一致.addScalar("chname ...
- vue星级评分组件
<template> <div class="Rating-gray"> <i v-for="(item,index) in itemCla ...
- SQL执行顺序和coalesce以及case when的用法
1.mysql的执行顺序 from on join where group by having select distinct union //UNION 操作符用于合并两个或多个 SELECT ...
- 为什么js的"关联数组"不能转成json字符串而对象可以?
定义这么一个js的“关联数组”: var arr = new Array(); arr[; arr[; alert(JSON.stringify(arr)); 得到的结果如图: [] 一句话,你的 a ...