zoukankan      html  css  js  c++  java

  • HTML 学习笔记 JQueryUI（Interactions,Widgets）

    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=" 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;  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=" 100px; height: 100px; border: 2px solid orange;"></div>
        <div id="dropDiv1" style=" 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=" 100px; height: 100px; border: 2px solid orange;"></div>
        <script>
            //使用鼠标改变元素大小
            $(function() {
                
                $("#resizeDiv").resizable();
                $("#resizeDiv").on("resize",function(event,ui) {
                $("body").append("<div style=' 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=" 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/
  • 相关阅读:
    Maria 与Ann的故事
    引语
    Preface
    Chapter 1 Foundation
    Roman to Integer
    Integer to Roman
    Container with most water
    palindrome number
    String to Integer (atoi)
    Reverse Integer
  • 原文地址：https://www.cnblogs.com/huanying2000/p/6293854.html
Copyright © 2011-2022 走看看