转行学开发，代码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. Struts2异常：HTTP Status 404 - /Struts2/book/addBook.action

    HTTP Status 404 - /Struts2/book/addBook.action 如果在Struts2的框架中访问路径出现了这个错误,可能存在的原因有如下的两个: 1. 路径写错,也就是a ...

  2. [Python3] 018 if：我终于从分支中走出来了

    目录 0. 谁是主角 1. 从三大结构说起 (1) 顺序 (2) 分支 1) 分支的基本语法 2) 双向分支 3) 多路分支 (3) 循环 0. 谁是主角 分支是主角 我前面几篇随笔提到 if 不下2 ...

  3. stl（set或map）

    https://nanti.jisuanke.com/t/41384 There are nnn points in an array with index from 111 to nnn, and ...

  4. JVM调优 dump文件怎么生成和分析

    1.获取JVM的dump文件的两种方式 1. JVM启动时增加两个参数: #出现 OOME 时生成堆 dump: -XX:+HeapDumpOnOutOfMemoryError #生成堆文件地址: - ...

  5. 处理Chrome等浏览器无法上网，但QQ能正常使用问题

    常见于安装VPN软件后导致的问题: 问题描述:QQ.微信客户端.等聊天工具可以聊天,但不能使用浏览器:打开网页失败:网络连接正常 问题解决步骤: 策略1: 打开网络和共享中心>>> ...

  6. JS对象总结

    JS对象总结   复习: 1.1 JS中对象有三种:内置对象(数组Array对象.String字符串对象.RegExp正则表达式对象.Math对象). 宿主对象(JS脚本所在的运行环境,目前我们讲的脚 ...

  7. Nodejs 学习笔记 --- 安装与环境配置

    一.安装Node.js步骤 1.下载对应自己系统对应的 Node.js 版本,地址:https://nodejs.org/zh-cn/      2.选安装目录进行安装      3.环境配置    ...

  8. [书接上一回]在Oracle Enterprise Linux (v5.7) 中安装DB - (4/4)

    选择自己创建的安装数据库路径. Sample Schemas 打钩. 调整内存大小. 选择官方建议的字符集编码. 是否创建创建的脚本,如需要请打钩. 脚本生成成功. 创建成功,如需要,则可以管理数据库 ...

  9. kali优化配置（3）--工具箱

    1.netcat 收集信息.Telnet/banner.传输文本信息.连接服务器端口. *通过IP,连接服务器端口: *信息通信: *重定向符号:> (e.g:>>ps.txt:重定 ...

  10. tf.concat，连接矩阵

    tf.concat(concat_dim, values, name='concat') concat_dim需要连接的矩阵的维度, values需要连接的两个矩阵. a=[[1,2,3],[7,8, ...