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. Android Studio 完美解决 “Android SDK Manager 无法更新“、 ”connection error” 的问题

    一.Android SDK Manager 无法更新 1. 打开SDK Mannger, 并选中启动单独的SDK Mannger.

  2. php字符串实例

    2.双引号字符串 <?php print "I have gone to the store."; print "The sauce cost \$10.25.&q ...

  3. mac 下mysql常用命令

    是那种单独安装的mysql 启动: /usr/local/mysql/bin/mysql -u root -p

  4. Jenkins安装war版本

    Jenkins的war包安装很简单: 下载jenkins的war包地址:https://jenkins.io/download/ 选择对应的版本 然后放入tomcat启动就好,其他根据提示来就好,比较 ...

  5. 获取类路径中含有beans.xml的jar包名称

    获取类路径中含有beans.xml的jar包名称 package com.stono; import java.io.File; import java.io.IOException; import ...

  6. 【LeetCode-面试算法经典-Java实现】【139-Word Break（单词拆分）】

    [139-Word Break(单词拆分)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a string s and a dictionary of w ...

  7. 19. Spring Boot 添加JSP支持【从零开始学Spring Boot】

    转:http://blog.csdn.net/linxingliang/article/details/52017140 这个部分比较复杂,所以单独创建一个工程来进行讲解: 大体步骤: (1)     ...

  8. Vmware+gdb调试Linux内核——工欲善其事，必先利其器

    今天我最终忍受不了qemu的低速跟不可理喻的各种bug,開始寻找新的调试内核的方法.然后想到了Vmware,那么成熟的虚拟机怎么可能调试不了内核.于是尝试了一番,发现结果很的棒!所以立刻奋笔疾书.把这 ...

  9. spring 官方文档

    英文 http://docs.spring.io/spring/docs/current/spring-framework-reference/htmlsingle/ 翻译(1-6章) http:// ...

  10. css:清除浮动 overflow

    是因为overflow除了(visible)会重新给他里面的元素建立块级格式化(block formatting context)floats, position absolute, inline-b ...