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. Python之获取文件夹中文件列表以及glob与fnmatch模块的使用

    获取文件夹中的文件列表 print(os.listdir("../secondPackage")) # ['__init__.py', 'secondCookBook.py', ' ...

  2. 【JAVA】 04-Java中的多线程

    链接: 笔记目录:毕向东Java基础视频教程-笔记 GitHub库:JavaBXD33 目录: <> <> 内容待整理: 多线程引入 概述 多线程: 进程:正在执行中的程序,其 ...

  3. 在pythonanywhere部署你的第一个应用

    pythonanywhere是一个免费的托管python的代码,可以测试你的web应用,用起来还是比较方便的,现在就来介绍如何在pythonanywhere部署你的应用. 下载你的代码 我的代码是托管 ...

  4. 常用颜色的RGB分布

    RGB色彩模式是工业界的一种颜色标准,它通过对红(RED).绿(GREEN).蓝(BLUE)三种基本颜色的相互组合从而叠加出各种颜色.RGB色彩模式为每一个红.绿.蓝分类了0-255范围内的亮度值. ...

  5. RabbitMQ ——简单队列

    一 .概述 我们不从开始就讲述基本的概念,尤其是在Rabbitmq之中有些概念确实比较难以理解,我们首先做的就是将光放提供的消息模型 进行实现,然后再总结一下Rabbitmq之中的基本概念. 二 .基 ...

  6. JAVA- 内部类及匿名内部类

    普通类,我们平时见到的那种类,就是一个后缀为.java的文件中,直接定义的类,比如 public Cat{ private String name; private int age; } 内部类, 内 ...

  7. EBCDIC to ASCII

    EBCDIC to ASCII https://www.ibm.com/support/knowledgecenter/SSZJPZ_11.7.0/com.ibm.swg.im.iis.ds.parj ...

  8. chrome插件研发手册

    chrome插件研发手册 一:需求前景 对于研发的小伙伴来说,总会遇到这样的需求,想要通过代码操作已有网站的行为动作,如:自动填充表格内容(表单内容太多,想一键将表单内容填充):自动登录网站(网站登录 ...

  9. Redis服务器中有75％受到恶意软件感染

    尽管由于配置错误的服务器和应用程序而导致新的网络攻击不断出现,但人们仍然忽略安全警告. 近两个月前,中国知名黑客组织东方联盟研究人员警告说,一项针对开放Redis服务器的大规模恶意软件活动现在已经发展 ...

  10. 人生苦短_我用Python_javascript_var_function_简单笔记_001

    <!--Javascript_var_001:--> <html> <head> <meta charset="UTF-8"> &l ...