登录
当前位置： 首页 > 工具软件 > jQuery Widgets > 使用案例 >

HTML 学习笔记 JQueryUI（Interactions,Widgets）

邢乐
2023-12-01

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/

转载于:https://www.cnblogs.com/huanying2000/p/6293854.html

 类似资料：

相关阅读

Python异常学习笔记Python中的类学习笔记Ruby数组(Array)学习笔记Golang学习笔记（五）：函数Tensorflow Summary用法学习笔记

相关文章

机器学习：集成学习机器学习和深度学习机器学习与深度学习学习通java大疆车载笔试（机器学习算法工程师）

相关问答

无法在Azure机器学习工作室中打开新的Python或R笔记本使用Scikit学习的机器学习强化学习TD从后状态学习MindTap通过Cengage学习“HTML/CSS”Texbook GitHub集成[副本]在Azure笔记本中使用远程Azure自动机器学习模型时导入错误

相关文档

HTML 学习笔记Debian 学习笔记ES6 学习笔记Etcd3 学习笔记Pinpoint 学习笔记
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.