day12—jQuery ui引入及初体验
转行学开发,代码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引入及初体验的更多相关文章
- Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整
Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...
- javascript/jquery模板引擎——Handlebars初体验
Handlebars.js下载地址:http://handlebarsjs.com/ 最近自己在建一个站,采用完全的前后端分离的方式,现在正在做前端的部分.其中有项功能是需要ajax调用后端接口,返回 ...
- Jenkins下构建UI自动化之初体验
一.缘 起 笔者之前一直在Windows环境下编写UI自动化测试脚本,近日在看<京东系统质量保障技术实战>一书中,萌生出在jenkins下构建UI自动化测试的想法 二.思 路 首先,在Li ...
- 使用 jQuery UI 和 jQuery 插件构建更好的 Web 应用程序
简介: 对于那些使用 JavaScript 和 jQuery 库从桌面应用程序转向 Web 应用程序的开发人员来说,他们还不习惯去考虑应用程序基本的外观,因为这些以前都是由操作系统来处理的.了解 jQ ...
- jquery ui 与 easy ui同时引入 展示效果冲突的问题
jquery ui 由于在定位控件的时候跟easy UI 控件名相同,同时引入会导致冲突 如果需要两个都存在,可以去jquery ui下载定制版ui 脚本文件
- 【Knockout.js 学习体验之旅】(1)ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- Struts2 JQuery UI常用插件
一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行 注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...
- python--爬虫入门(七)urllib库初体验以及中文编码问题的探讨
python系列均基于python3.4环境 ---------@_@? --------------------------------------------------------------- ...
- jQuery UI常用插件使用
一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行 注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...
随机推荐
- (Git 学习)一个账户怎么创建多个ssh key
(Git 学习)一个账户怎么创建多个ssh key:1.https://segmentfault.com/a/1190000009572470?_ea=1985120 2.https://www.ji ...
- python为什么人们喜欢学习呢?
软件的质和量. 既有量的积累也有质的区别.继承一定的前人研究基础. 基本上来说,python更加的注重可读性,一致性,可移植性,其中软件的质量也是比较的讲究的. python支持开发的高级重用机制,例 ...
- Codeforces 984D 题解(DP)
题面 传送门 题目大意: 给你一个计算区间f函数的公式,举例f(1,2,4,8)=f(1⊕2,2⊕4,4⊕8)=f(3,6,12)=f(3⊕6,6⊕12)=f(5,10)=f(5⊕10)=f(15)= ...
- 剑指offer学习读书笔记--二维数组中的查找
在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都是按照从上到下递增的顺序排序.请设计一个函数,输入这样的一个二维数组和一个整数,判断数组是否含有这个整数. 1 2 8 9 2 4 9 1 ...
- sqoop使用中文手册
文章转载自:http://www.zihou.me/html/2014/01/28/9114.html 1. 概述 本文档主要对SQOOP的使用进行了说明,参考内容主要来自于Cloudera ...
- Taro -- 微信小程序密码弹窗
记录一个类似支付密码的弹窗写法,实现是否免密功能.如图: index.js import Taro, { Component } from '@tarojs/taro' import { Vi ...
- PyQt5+qtdesigner开发环境配置
1.PyQt5安装 pip install PyQt5 2.qtdesigner安装 本来直接用pip install PyQt5-tools安装的,但是网速下的慢,中间还断了几次,在网上找到一个稳定 ...
- [MethodImpl(MethodImplOptions.Synchronized)]、lock(this)与lock(typeof(...))
对于稍微有点经验的.NET开发人员来说,倘若被问及如何保持线程同步,我想很多人都能说好好几种.在众多的线程同步的可选方式中,加锁无疑是最为常用的.如果仅仅是基于方法级别的线程同步,使用System.R ...
- docker设置proxy
该方法是持久化的,修改后会一直生效.该方法覆盖了默认的docker.service文件. 1. 为docker服务创建一个内嵌的systemd目录 mkdir -p /etc/systemd/syst ...
- python进阶:装饰器
1.闭包 简单理解:闭包就是多层函数的嵌套,外层函数的返回值是内层函数的引用. def out_func(n): num = 100 def in_fucn(*args,**kwargs): # no ...