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. 参数化2--CSV Data Set Config 参数化配置

    众所周知,在进行接口测试的过程中,需要创建不同的场景(不同条件的输入,来验证不同的入参的返回结果).因而,在日常的自动化接口监控或商品监控等线上监控过程中,需要配置大量的入参来监控接口的返回是否正确. ...

  2. GCJ——Minimum Scalar Product(2008 Round1 AA)

    题意: 给定两组各n个数,可任意调整同一组数之中数字的顺序,求 sum xi*yi i=1..n的最小值. Small: n<=8 abs xy,yi<=1000 Large: n< ...

  3. redis--服务器与客户端

    初始化服务器 从启动 Redis 服务器,到服务器可以接受外来客户端的网络连接这段时间,Redis 需要执行一系列初始化操作. 整个初始化过程可以分为以下六个步骤: 初始化服务器全局状态. 载入配置文 ...

  4. 解决unknown import path "golang.org/x/sys/unix": unrecognized import path "golang.org/x/sys"

    问题描述 当我们使用 go get.go install.go mod 等命令时,会自动下载相应的包或依赖包.但由于众所周知的原因,类似于 golang.org/x/... 的包会出现下载失败的情况. ...

  5. Linux常用的几个vi小命令

    输入跳转命令: 命令行前 Ctrl+A 命令行后 Ctrl+E VI命令中: 当前行 行首  "0" 当前行 行尾  "Shift+4" 当前文档首行首字符:& ...

  6. IO流中文件和文件夹的删除程序举例

    /* * 删除功能(无论是文件夹还是文件都是用delete方法,仅仅能一级一级的删除.):public boolean delete() * * 注意: * A:假设你创建文件或者目录忘了写盘符路径, ...

  7. 手机APP自动化持续集成方案

    自动化测试流程 自动化测试框架

  8. url 传中文

    if (null == keyword || keyword.equals("关键字")) keyword = ""; if(keyword.length()& ...

  9. C/C++内存管理详解(转）

    内存分配方式 简介 在C++中,内存分成5个区,他们分别是堆.栈.自由存储区.全局/静态存储区和常量存储区. 栈:在执行函数时,函数内局部变量的存储单元都可以在栈上创建,函数执行结束时这些存储单元自动 ...

  10. Oracle中group by 的扩展函数rollup、cube、grouping sets

    Oracle的group by除了基本使用方法以外,还有3种扩展使用方法,各自是rollup.cube.grouping sets.分别介绍例如以下: 1.rollup 对数据库表emp.如果当中两个 ...