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. luogu P2744 [USACO5.3]量取牛奶Milk Measuring

    题目描述 农夫约翰要量取 Q(1 <= Q <= 20,000)夸脱(夸脱,quarts,容积单位——译者注) 他的最好的牛奶,并把它装入一个大瓶子中卖出.消费者要多少,他就给多少,从不有 ...

  2. Jenkins里邮件插件触发器配置和Send to Developers到底是什么意思（转）

    邮件触发类型介绍(Triggers) By default, the onlytrigger configured is the "Failure" trigger.  To ad ...

  3. centos 7 关闭firewalld开启iptables

    1: 关闭系统高级防火墙firewalld systemctl stop firewalld.service #停止firewall systemctl disable firewalld.servi ...

  4. 写在php设计模式前

    在学校写代码的时候,看过许多代码,跟着学长学过一段时间.找工作的时候由于种种原因,从事于本专业, 最近重拾php,充充电,找个好工作. 以前项目中设计模式用的比较多的也就是单例模式,看书中回顾写过的代 ...

  5. centos 编译 安装php

    安装phpcd /usr/local/srctar -zvxf php-5.3.10.tar.gzcd  php-5.3.10mkdir -p /usr/local/php5  #建立php安装目录. ...

  6. 2016.8.19 在dialog上增加一个button出现错误：failed to execute setAttribute on Element...

    目标:想要在dialog上多加一个button. 语法来自: http://api.jqueryui.com/dialog/#option-buttons   可见新增在dialog上的button要 ...

  7. 身份证识别接口编写的JAVA调用示例

    此java文章是基本聚合数据证件识别接口来演示,基本HTTP POST请求上传图片并接收JSON数据来处理. 使用前你需要通过 https://www.juhe.cn/docs/api/id/153 ...

  8. win10 只要打开文件对话框就卡死解决方法

    我电脑的问题是:win10系统,只要打开 文件对话框就卡死,假死,cpu100% 一直没有解决,但是只要把缩略图关了,就ok. 但是又想要留着缩略图,还是得显示,于是乎一直在找解决办法. 此方法好像可 ...

  9. the Determine in June

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

  10. 将C#文档注释生成.chm帮助文档（转）

    由于最近需要把以前的一个项目写一个文档,但一时又不知道写成怎样的,又恰好发现了可以生成chm的工具,于是乎我就研究了下,感觉还不错,所以也给大家分享下.好了,不多废话,下面就来实现一下吧. 生成前的准 ...