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 的框架,集成了各种用 ...
随机推荐
- 手模手配置Eslint，看懂脚手架中的Eslint
使用ESLint前:eslint是干嘛的,我这样写有什么问题,怎么还报错了,太麻烦想去掉这个插件,脚手架中关于eslint文件里的配置是什么意思?怎么设置配置项和规则达到自己想要的检测效果呢?怎么集成 ...
- CSS中的伪元素选择器
定义 伪元素选择器:就是有连续两个冒号的选择器,如::first-line::first- letter.::before 和::after E::first-letter文本的第一个单词或字(如中文 ...
- A星寻路
逻辑代码 using System.Collections.Generic; using System.Text; using UnityEngine; namespace Game { public ...
- quotacheck - 扫描文件系统,创建,检测并修补配额文件
总览(SYNOPSIS) quotacheck [ -agucfinvdFR ] filesystem 描述(DESCRIPTION) quotacheck 察看每一个文件系统,建立当前磁盘使用情况表 ...
- go语言从例子开始之Example34.速率限制
速率限制(英) 是一个重要的控制服务资源利用和质量的途径.Go 通过 Go 协程.通道和打点器优美的支持了速率限制. Example: package main import "fmt&qu ...
- Spark 读取HBase数据
Spark1.6.2 读取 HBase 1.2.3 //hbase-common-1.2.3.jar //hbase-protocol-1.2.3.jar //hbase-server-1.2.3.j ...
- sed使用---转义字符
https://blog.csdn.net/wangcg123/article/details/50667883 单引号里面,s表示替换,三根斜线中间是替换的样式,特殊字符需要使用反斜线”\”进行转义 ...
- pgsql SQL监控，查询SQL执行情况
SELECT procpid, START, now() - START AS lap, current_query FROM ( SELECT backendid, pg_stat_get_back ...
- $emit 和 $on 进行平行组件之间的传值
效果图: 注:$emit 和 $on 的事件必须在一个公共的实例上,才能够触发: $emit 触发 $on 接收 需求: 1.有A.B.C三个组件,同时挂载到入口组件中: 2.将A组件中的数据传递到C ...
- Jmeter下载文件和保存文件
Jmeter下载文件: 任意在网上搜索一张图片,地址为https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&a ...