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学习笔记一的更多相关文章

  1. easyUI学习笔记二

    1．  拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <scr ...

  2. easyui学习笔记8—在手风琴中加载其他的页面

    在手风琴中加载其他页面和在表格中加载其他的页面有写类似的,就是请求另外一个页面显示数据. 1.先看看引用的资源文件 <link rel="stylesheet" href=& ...

  3. easyui学习笔记2—在行内进行表格的增删改操作

    第一篇笔记中记录了如何实现表格的增删改,那个是点击之后跳出来一个对话框然后进行的,这里是在表格本身上进行的操作,也很简单,但是这里发现一个版本问题,也可以说是兼容性问题. 1.首先我们看引用的js和c ...

  4. easyui学习笔记1—增删改操作

    最近公司要用easyui,这里自己看了官网几篇文章,遇到些问题,大多数的问题都是敲代码的时候笔误,其他有些地方确实需要注意一下,这里做些笔记. 1.在mysql中建好表之后修改id字段为递增字段,发现 ...

  5. easyUi 学习笔记 （二 ） 使用tabs 里datagridview 发送ajax请求 不访问后台的问题

    这个BUG 我花了一个半小时, 还是看不出哪里的问题,  于是就百度到这么一段话,我需要记住 <================================================= ...

  6. EasyUI学习笔记之panel

    <easyUI panel 属性:> <!--引入easyUI panel 组件 设置宽,高,定义标题(默认在左上角),设置图标iconCls:'icon-ok',引入工具tools ...

  7. EasyUI学习笔记---Datagrid真分页

    EasyUI Datagrid组件在我看来功能还是很强大的,在我使用过程中遇到分页请求的问题困扰了一天才解决,下面我就把我遇到的问题分享一下 //datagrid数据表格渲染 $("#dg& ...

  8. easyui学习笔记14-拓展的基本验证规则

    /** * 扩展的基本校验规则, */ $.extend($.fn.validatebox.defaults.rules, { minLength : { // 判断最小长度 validator : ...

  9. JQuery EasyUI学习笔记

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6690888.html  简介与准备 jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用 ...

随机推荐

  1. C#学习大纲

    一.C#:    1.进制转换    2.vs界面内容 熟悉软件    3.数据类型 :引用类型 值类型    4.变量 (存储数据)一个变量存储一个数据    5.类型转换    6.运算符:算数运 ...

  2. Codeforces Round #394 (Div. 2) - B

    题目链接:http://codeforces.com/contest/761/problem/B 题意:给定一个环形跑道.里面有n个障碍,跑道长度为L.然后有两个人在两个起点(起点可能相同),每个人都 ...

  3. 关于如何测试cpu性能的命令操作 linux系统

    for i in `seq 1 $(cat /proc/cpuinfo |grep "physical id" |wc -l)`; do dd if=/dev/zero of=/d ...

  4. CSAW CTF Qualification Round 2018 - shell->code

    原题 Linked lists are great! They let you chain pieces of data together. nc pwn.chal.csaw.io 9005 链接:h ...

  5. mysql中文乱码解决办法

    Windows 在C:\Program Files\MySQL\MySQL Server 5.5\bin目录下 MySQLInstanceConfig.exe执行 重新配置character_set_ ...

  6. hive之视图和索引

    一.视图 1.视图定义 视图其实是一个虚表,视图可以允许保存一个查询,并像对待表一样对这个查询进行操作,视图是一个逻辑结构,并不会存储数据. 2.视图的创建 通过创建视图来限制数据访问可以用来保护信息 ...

  7. Codeforces 776E: The Holmes Children （数论 欧拉函数）

    题目链接 先看题目中给的函数f(n)和g(n) 对于f(n),若自然数对(x,y)满足 x+y=n,且gcd(x,y)=1,则这样的数对对数为f(n) 证明f(n)=phi(n) 设有命题 对任意自然 ...

  8. 51nod 1384:全排列（STL)

    题目链接 记住next_permutation函数的用法,另外string在这里比char[]慢好多啊.. //#include<bits/stdc++.h> //using namesp ...

  9. Java Web学习总结（12）Filter过滤器

    一,Filter简介 Filter也称之为过滤器,Filter是对客户端访问资源的过滤,符合条件放行,不符合条件不放行,并且可以对目标资源访问前后进行逻辑处理. 二,Filter开发步骤 1)编写一个 ...

  10. cannot access Input/output error

    ls: cannot access  Input/output errorls: cannot open directory .: Input/output error 硬盘故障,只读或只写,你可以d ...