转行学开发，代码100天——2018-03-28

按照所下载教学视频，今天已进行到jQuery UI的学习中。注：本人所用教学视频不是太完整，介绍的内容相对简单，有些只是带过。其他时间中，仍需继续针对各知识模块进行补充学习。

今天记录一下jQuery UI的引用和使用初体验

在开发之前，到jQuery UI官网下载库文件。https://jqueryui.com/

库文件引用：

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">

<script type="text/javascript" src ="jquery-ui.min.js"></script>

<!DOCTYPE html>

<html>

<head>

    <title>jQuery UI 01——draggable</title>

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>

    <link rel="stylesheet" type="text/css" href="jquery-ui.min.css">

    <script type="text/javascript" src ="jquery-ui.min.js"></script>

    <script type="text/javascript" src="draggable.js"></script>

</head>

<body>

 <div id ="div1" style="width: 100px ;height: 100px;border: 1px solid red;">

    DIV1

 </div>

 <div id="div2" style="width: 200px;height: 300px; border:1px solid yellow;">DIV2</div>

</body>

</html>

本例中，创建两个DIV盒子，一个实现拖动效果，一个实现允许拖入效果

其中，自定义js文件draggable.js文件中

$(document).ready(function()

{

    $("#div1").draggable();

    $("#div2").droppable();

    $("#div2").on("drop",function(event,ui)

        {

            $("#div2").text("drop ok!")

        });

});

DIV1实现被拖动，DIV2允许被拖入，即将div1拖进div2中时，实现DIV2文本的修改。

初始状态：

拖动完成：

疑问：在拖动中，如果只是div1盒子少量进入div2中时，并不会修改div2中的 文本，当大部分拖进div2中时，才会修改div2中的文本。

这种现象源于这个方法的何种内部逻辑？

day12—jQuery ui引入及初体验的更多相关文章

  1. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  2. javascript/jquery模板引擎——Handlebars初体验

    Handlebars.js下载地址:http://handlebarsjs.com/ 最近自己在建一个站,采用完全的前后端分离的方式,现在正在做前端的部分.其中有项功能是需要ajax调用后端接口,返回 ...

  3. Jenkins下构建UI自动化之初体验

    一.缘 起 笔者之前一直在Windows环境下编写UI自动化测试脚本,近日在看<京东系统质量保障技术实战>一书中,萌生出在jenkins下构建UI自动化测试的想法 二.思 路 首先,在Li ...

  4. 使用 jQuery UI 和 jQuery 插件构建更好的 Web 应用程序

    简介: 对于那些使用 JavaScript 和 jQuery 库从桌面应用程序转向 Web 应用程序的开发人员来说,他们还不习惯去考虑应用程序基本的外观,因为这些以前都是由操作系统来处理的.了解 jQ ...

  5. jquery ui 与 easy ui同时引入 展示效果冲突的问题

    jquery ui 由于在定位控件的时候跟easy UI 控件名相同,同时引入会导致冲突 如果需要两个都存在,可以去jquery ui下载定制版ui 脚本文件

  6. 【Knockout.js 学习体验之旅】（1）ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  7. Struts2 JQuery UI常用插件

    一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行 注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...

  8. python--爬虫入门（七）urllib库初体验以及中文编码问题的探讨

    python系列均基于python3.4环境 ---------@_@? --------------------------------------------------------------- ...

  9. jQuery UI常用插件使用

    一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行 注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...

随机推荐

  1. [Python3] 017 字典的内置方法

    目录 1. Python3 中如何查看 dict() 的内置方法 2. 少废话,上例子 (1) 清理大师 clear() (2) 拷贝君 copy() (3) get(key, default=Non ...

  2. 2 python: Unicode 和list 列表

    1 unicode 2 list 列表及其内置函数等 3 不一样的for语句 Python 的 for 语句依据任意序列(链表或字符串)中的子项,按它们在序列中的顺序来进行迭代 >>> ...

  3. java NIO介绍

    前言 我们在写java程序的时候,为了进行优化,把全部的精力用在了处理效率上,但是对IO的关注却很少.这也可能是由以前java早期时JVM在解释字节码时速度慢,运行速率大大低于本地编译代码,因此以前往 ...

  4. IE， Chrome和Firefox浏览器 差异对比

    最近的项目中使用Extjs5.6, 其中主要的一个特点就是js文件的动态加载,之前使用Firefox浏览器对js文件进行调试,打断点时,只对当次调试有效,刷新之后,由于动态加载的js文件(文件名后面加 ...

  5. asp.net中的<% %>,<%= %>,<%# %><%$ %>的使用

    原文:https://www.cnblogs.com/Hackerman/p/3857630.html 首先我们来看一下<% %>的使用 在aspx的页面中只能使用服务器控件和一般的控件, ...

  6. C# http post请求帮助类

    using System; using System.Collections.Specialized; using System.IO; using System.Net; using System. ...

  7. opengl 单缓冲与双缓冲

    1.说明 GLUT_SINGLE  指定单缓存窗口 GLUT_DOUBLE  指定双缓存窗口 应用程序使用单缓冲绘图时可能会存在图像闪烁的问题. 这是因为生成的图像不是一下子被绘制出来的,而是按照从左 ...

  8. luogu2046 海拔

    题目链接[NOI2010]海拔 首先有个性质就是海拔只会有\(0\)和\(1\)两种. 证明:海拔下降和人数乘积为总消耗,确定了海拔下降总数,如果有个地方可以使得单位消耗最小,那么全部消耗不会更劣. ...

  9. Java类加载器初识

    类加载器基本概念 类加载器(class loader)用来加载 Java 类到 Java 虚拟机中.一般来说,Java虚拟机使用Java类的方式如下:Java 源程序(.java 文件)在经过 Jav ...

  10. 使用Fabric在tomcat中部署应用的问题总结

    关闭tomcat时 A.为什么调用shutdown时,报错连接拒绝 结论——很可能是因为tomcat没启动或没完全启动:而这个时候调用shutdown就会出现此类报错 解决方法:time.sleep ...