JQUERY UI使用初体验

JQUERY UI使用初体验：JQUERY UI网址：https://jqueryui.com/

相关文件下载地址：https://github.com/jquery/jquery-ui

demos文件夹里有关于jquery-ui里所有demo的文件。

首先还是jquery ui 的引入：

css的引入：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

js的引入：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

jqueryui的demo使用笔记：

Draggable拖动功能：

这样一段简单的代码即可让元素可以拖动。

Droppable滴入功能：

可以让一个块滴入到另一块。其实直接使用draggable就可以将一个元素拖到另一个元素中。

如图，有2个元素，直接给其中一个元素一个draggable功能，就可以将mmm元素拖到nnn元素中去，但是如果想让mmm拖入到nnn后，mmm发生一些变化，可以给nnn一个droppable功能。

这个测试就是在mmm拖动滴入nnn后，nnn出现了“Dropped”的字样提示，并且背景色也发生了变化。这种变化是通过给nnn一个函数，函数添加了一个类和一个字段，类里有一个背景色设置，添加字段通过给p元素一个html元素添加。

resizable：拖动框调整尺寸大小，注意不是resizeable哦~

可以在https://github.com/jquery/jquery-ui这里将juqey的文件下载下来，然后找到demos文件夹下的resizable文件，找到animate的html文件打开即是一个resizable的使用实例。如图：