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. 记一次用Linux curl命令获取Django　url返回值异常的问题

    问题描述: curl 检测 URL 返回值以判断服务器是否正常 原命令:curl -I -m 10 -o /dev/null -s -w %{http_code} --insecure $url 问题 ...

  2. Linux学习笔记2-CentOS7安装tomcat8

    1.下载tomcat:apache-tomcat-8.5.16.tar.gz 下载地址:http://mirrors.tuna.tsinghua.edu.cn/apache/tomcat/tomcat ...

  3. 20個命令行工具監控 Linux 系統性能

    對於每個系統管理員或網路管理員來說,每天要監控和調試 Linux 系統性能問題都是非常困難的工作.我已經有5年 Linux 管理員的工作經歷,知道如何監控系統使其保持正常運行.為此,我們編寫了對於 L ...

  4. Matomo（Piwik）安装说明-----------基于LNPM环境

    Matomo(Piwik)安装说明 安装前环境检查 Piwik要求PHP版本高于PHP5.5(选用PHP7.2) Piwik需要pdo和pdo_mysql或mysqli支持(选用mysqli) Piw ...

  5. 三、MVC_JsonResult类型

    一.Ajax或者页面请求获取数据,不通过WebApi的时候,使用JsonResult作为返回Json数据格式的类型 二.代码呈现 public class HomeController : Contr ...

  6. [数论]原根与指标，BSGS

    刚学了这方面的知识,总结一下.推荐学习数论方面的知识还是看书学习,蒟蒻看的是<初等数论>学的. 这里也推荐几个总结性质的博客,学习大佬的代码和习题. 原根:https://blog.csd ...

  7. OkHttp源码剥离导入到eclipse中

    1.里面有两个类关于Android版本的我稍微修改过了,没有用的. 2.可以直接导入eclipse中,maven里面的jar包可能还有不需要的冗余,可以自己去剔除. https://github.co ...

  8. 【Leetcode周赛】从contest-71开始。（一般是10个contest写一篇文章）

    Contest 71 () Contest 72 () Contest 73 (2019年1月30日模拟) 链接:https://leetcode.com/contest/weekly-contest ...

  9. 01.java8入门

    函数式编程的不变模式 import java.util.Arrays; /** * 函数式编程的不变模式 */ public class ArrStream { public static void ...

  10. The main Method

    The main Method You can call static methods without having any objects. For example, you never const ...