转行学开发，代码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. oracle--角色权限

    将不同权限赋予角色,再将角色赋予用户,起到管理权限的作用 SQL> create role myrole; 角色已创建. SQL> grant create session to myro ...

  2. JAVA的学习

    怎么说呢,我已经接触JAVA已经两周了,个人感觉还是不懂,哈哈,JAVA是一门编程语言,是大多数开发者较为习惯的编程模式,我感觉相对比C语言来说可能简单学点,可能是我先接触C语言把,或许因人而异把,在 ...

  3. Mybatis-学习笔记（2）Mybatis配置文件

      3>typeAliases:类型别名.2种指定方式. 1>给某个类起个别名 <typeAliases> <typeAlias type="com.lfy.b ...

  4. JDK 13 的 12 个新特性，真心涨姿势了

    作者:木九天 my.oschina.net/mdxlcj/blog/3107021 1.switch优化更新 JDK11以及之前的版本: switch (day) { case MONDAY: cas ...

  5. ES6精解：变量的解构赋值

    1.数组的解构赋值 我们知道以前我们给一个变量赋值要这样如下: let a = 1; let b = 2; let c = 3; 但是ES6出来之后,我们可以这样: let [a, b, c] = [ ...

  6. python字符串中的转义符

    python字符串中的转义符 1,单引号,双引号,三引号 a='www.96net.com.cn',b="96net.com.cn",c="""96n ...

  7. Vue实现active点击切换

    Vue实现active点击切换 循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click=“active(index)” 2.将索引值传入class(索引等于几就第几个添加ac ...

  8. sqoop使用中文手册

    文章转载自:http://www.zihou.me/html/2014/01/28/9114.html 1.     概述 本文档主要对SQOOP的使用进行了说明,参考内容主要来自于Cloudera ...

  9. Matlab 多个版本的安装包下载、安装和激活教程 + 多套数学建模视频教程

    目录 1. 关键词 1.1. 说明 2. 下载地址 2.1. OneDrive高速云盘 2.1.1. 多版本的安装包 2.1.2. 多套数学建模的视频教程 2.2. 百度云 3. 安装教程 1. 关键 ...

  10. Taro -- 定义全局变量

    Taro定义全局变量 方法1:在taro中 getApp()只能取到一开始定义的值,并不能取到改变后的值 // app.js文件中 class App extends Component { cons ...