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. Linux笔记：vim

    文件搜索后显示高亮,即使退出编辑高亮依然存在.使用以下几个方法: 1)指令模式下运行:nohlsearch 2)运行set nohlsearc,可永久关闭搜索高亮 3)搜索任意不存在的字符串

  2. luogu P1854 花店橱窗布置

    题目描述 某花店现有F束花,每一束花的品种都不一样,同时至少有同样数量的花瓶,被按顺序摆成一行,花瓶的位置是固定的,从左到右按1到V顺序编号,V是花瓶的数目.花束可以移动,并且每束花用1到F的整数标识 ...

  3. SQLite to Asp.net Entity Framework 部署问题

    最近做了一个小应用,使用SQLite做数据库.开始用DBLINQ的时候,做一个LINQ查询出现不支持的问题.后来看到Entity Framework是可以支持SQLite的,于是很快转换过来.完成开发 ...

  4. 解决vagrant不能正常挂载目录的问题

    解决方案: vagrant plugin install vagrant-vbguest

  5. 聊聊、Zookeeper Linux 集群服务

    今天是平安夜,先祝大家平安夜快乐.这篇文章我们来谈谈 Zookeeper Linux 集群. 为什么要集群呢?因为一台服务不够.集群是为了系统扩容,系统稳定.一台服务挂了,没关系,我还有其他的服务.集 ...

  6. new子类会先运行父类的构造函数

    发现子类构造函数运行时,先运行了父类的构造函数.为什么呢? 原因:子类的所有构造函数中的第一行,其实都有一条隐身的语句super(); super(): 表示父类的构造函数,并会调用于参数相对应的父类 ...

  7. iOS使用MD5 - 字符串加密至MD5&获取文件MD5

    iOS 字符串加密至MD5 + (NSString *) md5:(NSString *)str { unsigned ]; CC_MD5( cStr, strlen(cStr), result ); ...

  8. td中内容自动换行

    使用<table> 进行页面开发,会遇到字符串很长将table撑开变形的问题,在网上搜了一些,终于找到 一个比较好用的解决方法.贴出来,方便以后使用.在table标签中加入如下的style ...

  9. 2017.3.27 集成modeler后的一些主要路径（持续更新）

    1.设计器访问路径 项目名:wfs_web edtor-app和modeler.html的存放位置:webapp/designer/editor-app app-cfg.js中根路径设置:'conte ...

  10. base64加密PHP脚本的解码方法

    转自:http://yoursunny.com/t/2009/PHP-decode/ PHP是网站服务端最流行的编程语言之一.PHP运行环境本身是开源的,服务器不加载插件时PHP脚本也无法加密.但是, ...