您的位置: 首页  >  IT文章  >  HTML 学习笔记 JQueryUI（Interactions,Widgets）

HTML 学习笔记 JQueryUI（Interactions,Widgets）

分类: IT文章 • 2022-04-04 13:22:12

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 );
                });
            });
        </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/

相关推荐