Draggable

允许使用鼠标移动元素(拖动)

demo

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-2.1.1.min.js"></script>
        <script src="../js/jquery-ui.min.js"></script>
        <link type="text/css" rel="stylesheet" href="../js/jquery-ui.min.css" />
    </head>
    <body>
        
        <div id="div" style="width: 100px; height: 100px; border: 2px solid orange;"></div>
        
        <script>
            $(function() {
                $("#div").draggable();
                $("#div").on({"dragstart" : function(event,ui){
                    $("body").append("<div style='background: red; height: 20px; width: 20px;'>拖动开始时触发</div>")
                }});
                $("#div").on("dragcreate",function(event,ui) {
                    console.log("拖动组建被创建时触发");    
                })
                $("#div").on("drag",function() {
                    alert("拖动时一直出发");
                });
                $("#div").on("dragstop",function(event,ui){
                    alert("拖动结束时触发");
                });
            });
        </script>
    </body></html>

droppable 放置事件

代码

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../js/jquery-2.1.1.min.js"></script>

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

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

    </head>

    <body>

        <div id="dropDiv" style="width: 100px; height: 100px; border: 2px solid orange;"></div>

        <div id="dropDiv1" style="width: 200px; height: 200px; border: 2px solid red;"></div>

        <script>

            $(function() {

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

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

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

//                    alert("hahahahha");

                    $("#dropDiv1").text("放置文件");

                });

            });

        </script>

    </body>

</html>

resizable()鼠标改变元素大小

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../js/jquery-2.1.1.min.js"></script>

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

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

    </head>

    <body>

        <div id="resizeDiv" style="width: 100px; height: 100px; border: 2px solid orange;"></div>

        <script>

            //使用鼠标改变元素大小

            $(function() {

                $("#resizeDiv").resizable();

                $("#resizeDiv").on("resize",function(event,ui) {

                $("body").append("<div style='width: 20px; height: 20px; background: red;'></div>")

                });

            })

        </script>

    </body>

</html>

selectable() 能被选中

例子

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../js/jquery-2.1.1.min.js"></script>

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

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

        <style>

            .ui-selected {

                background-color: red;

            }

        </style>

    </head>

    <body>

        <strong>世界上最帅的人是谁？</strong>

        <ul id="selectedable">

            <li id="right">A:田</li>

            <li>B:田</li>

            <li>C:田</li>

        </ul>

        <a href="#" id="btn">提交</a>

        <script>

            $("#btn").button();

            $("#btn").on("click",function() {

                if ($("#right").hasClass("ui-selected")) {

                    alert("恭喜你答对了");

                }

            });

            $("#selectedable").selectable();

        </script>

    </body>

</html>

sortable()拖动排序 简单的例子

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../js/jquery-2.1.1.min.js"></script>

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

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

    </head>

    <body>

        <ul id="sortable">

            <li>苹果</li>

            <li>香蕉</li>

            <li>梨子</li>

            <li>菠萝</li>

        </ul>

        <script>

            $("#sortable").sortable();

        </script>

    </body>

</html>

Accordion() 逐个展开效果

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../js/jquery-2.1.1.min.js"></script>

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

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

    </head>

    <body>

        <div id="accordion">

            <h3>选项一</h3>

            <div>

                <p>嘿嘿嘿</p>

            </div>

            <h3>选项一</h3>

            <div>

                <p>嘿嘿嘿</p>

            </div>

            <h3>选项一</h3>

            <div>

                <p>嘿嘿嘿</p>

            </div>

            <h3>选项一</h3>

            <div>

                <p>嘿嘿嘿</p>

            </div>

        </div>

        <!--//逐个展开效果-->

        <script>

            $("#accordion").accordion();

        </script>

    </body>

</html>

autocomplete()方法 智能提示补全

<html>

    <head>

        <meta charset="UTF-8">

        <title>自动补全</title>

        <script src="../js/jquery-2.1.1.min.js"></script>

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

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

    </head>

    <body>

        <label for="tags">Tags:</label>

        <input id="tags" />

    </body>

    <script>

        $(function() {

            var autotags = ["ios","ime","html","java","javaScript","android"];

            $("#tags").autocomplete({

                source:autotags

            });

        });

    </script>

</html>

datePicker() 日期选择器

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../js/jquery-2.1.1.min.js"></script>

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

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

    </head>

    <body>

        <p>Date:<input type="text" id="datePicker"/></p>

        <script>

            $("#datePicker").datepicker();

        </script>

    </body>

</html>

dialog() 弹出一个对话框

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../js/jquery-2.1.1.min.js"></script>

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

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

    </head>

    <body>

        <div id="dialog">

            <p>这是一个对话框</p>

        </div>

        <script>

            $("#dialog").dialog();

        </script>

    </body>

</html>

progressbar()进度条

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../js/jquery-2.1.1.min.js"></script>

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

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

    </head>

    <body>

        <div id="progressbar" style="width: 100px; height: 10px;">

        </div>

        <script>

            var pb;

            var max = 100;

            var current = 100;

            $(function() {

                pb = $("#progressbar");

                pb.progressbar({"max":100})

                setInterval(chnagepb,100);

            });

            function chnagepb() {

                current++;

                if (current >=100) {

                    current = 0;

                }

                pb.progressbar("option","value",current);

            }

        </script>

    </body>

</html>

menu()制作菜单

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../js/jquery-2.1.1.min.js"></script>

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

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

        <style>

            #menu {

                width: 150px;

            }

            ul li {

            }

            .ui-menu:after{

                content:".";

                display: block;

                visibility: hidden;

                line-height: 0;

                height: 0;

            }

            .ui-menu .ui-menu-item {

                display: inline-block;

                float: left;

                margin: 0px;

                padding: 10;

                width: auto;

            }

        </style>

    </head>

    <body>

        <ul id="menu">

            <li>

                <a href="#">Java</a>

                <ul>

                    <li><a href="#">Java EE</a></li>

                    <li><a href="#">Java SE</a></li>

                    <li><a href="#">Java ME</a></li>

                </ul>

            </li>

            <li>C</li>

            <li>C++</li>

            <li>Swift</li>

        </ul>

        <script>

            $(function() {

                //设置菜单的位置

                $("#menu").menu({"position":{"at":"right bottom"}});

            });

        </script>

    </body>

</html>

slider()滑块

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../js/jquery-2.1.1.min.js"></script>

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

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

    </head>

    <body>

        <div id="slide"></div>

        <span id="span">0</span>

        <script>

            var valueSpan,slider;

            $(function() {

                slider = $("#slide");

                valueSpan = $("#span");

//                slider.slider({change:function(event,ui) {

//                    valueSpan.text(slider.slider("option","value"));

//                }})

                slider.slider({slide:function(event,ui) {

                    valueSpan.text(slider.slider("option","value"));

                }})

            });

        </script>

    </body>

</html>

spinner() 增加或者减小输入框里面的内容

<html>

    <head>

        <meta charset="UTF-8">

        <title>下拉菜单</title>

        <script src="../js/jquery-2.1.1.min.js"></script>

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

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

    </head>

    <body>

        <input id="spinner" />

        <button  id="getvalue">getValue</button>

        <script>

            $(function() {

                $("#spinner").spinner();

                //设置默认值

                $("#spinner").spinner("value","10");

                $("#getvalue").click(function() {

                    alert($("#spinner").spinner("value"));

                });

            });

        </script>

    </body>

</html>

tabs() 选项卡

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../js/jquery-2.1.1.min.js"></script>

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

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

    </head>

    <body>

        <div id="tabs">

            <ul>

                <li><a href="#hello1">hello</a></li>

                <li><a href="#hello2">hello</a></li>

                <li><a href="#hello3">hello</a></li>

            </ul>

            <div id="hello1">

                hello

                hello

                hello

                hello

            </div>

            <div id="hello2">

                hello2

                hello2

                hello2

                hello2

            </div>

            <div id="hello3">

                hello3

                hello3

                hello3

                hello3

            </div>

        </div>

        <script>

            $("#tabs").tabs();

        </script>

    </body>

</html>

这只是最基本的应用 具体的深入的应用还是要研究Jquery UI 的API http://api.jqueryui.com/category/utilities/

HTML 学习笔记 JQueryUI（Interactions,Widgets）的更多相关文章

  1. 20151215jquery学习笔记--jqueryUI --dialog（对话框）

    对话框(dialog),是 jQuery UI 非常重要的一个功能.它彻底的代替了 JavaScript 的 alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余 一．开启多个 di ...

  2. Pro Android学习笔记（一三七）：Home Screen Widgets（3）：配置Activity

    文章转载仅仅能用于非商业性质,且不能带有虚拟货币.积分.注冊等附加条件.转载须注明出处http://blog.csdn.net/flowingflying/以及作者@恺风Wei. 通过widget定义 ...

  3. Android学习笔记：Home Screen Widgets（2）：关于Widget

    通过widget定义,我们在widget列表中看到了我们的TestWidget.当我们拖拽widget到主页时,假设在appwidet-provider中定义了android:configure的ja ...

  4. Ext2.x学习笔记

    Ext2.X学习笔记一 一.ExtJS简介  1.1 什么是Ext JS? · Ext JS是一个Ajax框架,可以用来开发富客户端的Ajax应用,是一个用javascript写的,主要用于创建前端用 ...

  5. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  6. FullCalendar 的学习笔记（一）

    前一段时间,一个老项目需要新增一个小功能,日程表~ 于是网上找了下,发现FullCalendar这个控件还不错于是就拿来用了下,下面简单介绍下我的学习笔记. 首先就是了解下FullCalendar的A ...

  7. ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录

    放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...

  8. 学习笔记之Bokeh

    Welcome to Bokeh — Bokeh 0.12.16 documentation https://bokeh.pydata.org/en/latest/ Bokeh is an inter ...

  9. Effective STL 学习笔记 31：排序算法

    Effective STL 学习笔记 31:排序算法 */--> div.org-src-container { font-size: 85%; font-family: monospace; ...

随机推荐

  1. XSY 1749 tree

    题目大意 给定一棵基环树, 问你有多少条路径的长度\(\ge K\). 点数\(\le 10^5\) Solution 基环树分治模板题. 我是这样做的: 加边的时候用并查集维护点的连通性, 少加入环 ...

  2. readis 内部数据结构

    与其他key-value数据库不同之处 不仅支持字符串值,还支持 字符串 set,get 列表 lpush,rpush,lrange 哈希 hset,hget,hgetall hmset,hmget ...

  3. Centos下添加用户组

    近日,重新整理了下开发环境,重装了,nginx,但是这个时候却是报错了,报错信息如下: [root@hserver1 php-7.0.5]# nginx -t nginx: [emerg] getpw ...

  4. 【spring cloud】【spring boot】项目启动报错：Cannot determine embedded database driver class for database type NONE

    解决参考文章:https://blog.csdn.net/hengyunabc/article/details/78762097 spring boot启动报错如下: Error starting A ...

  5. es6 - foreach

    foreach ... // es5 - foreach arr.forEach(function(value, index, arr) { console.log(value, index, arr ...

  6. 服务器,数据库连接注意mysql的user表

    update user set host='localhost' where user='root';

  7. 指定UIView的某几个角为圆角

    如果需要将UIView的四个角全部设置为圆角,做法相当简单,只需要设置其layer的cornerRadius属性即可.而若要指定某几个角(小于4)为圆角,而别的角不变的时候,这种方法就不好用了.这种情 ...

  8. UIView属性的动画

    //标记着动画块的开始,第一个参数表示动画的名字,起到标识作用 [UIView beginAnimations:nil context:NULL]; [UIView setAnimationDurat ...

  9. C#中的Dictionary字典类常用方法介绍

    using System.Collections.Generic;//引用命名空间//Dictionary可以理解为散列集合 public class DictionaryTest { public ...

  10. the Determine in June

    今天是6月10号,周三. 自己做的CSDN博客端(仿小巫博客,ps:里边的框架和代码优化都是自己又一次用新框架做的或者自己又一次实现)也已经有三天了.进度还差非常多--- 结合了上次投简历的经验和期末 ...