jQuery UI 学习笔记

最新推荐文章于 2020-08-05 03:11:27 发布

thystar

最新推荐文章于 2020-08-05 03:11:27 发布

阅读量465

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/thystar/article/details/47972097

版权

web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.交互：

$(document).ready(function(){
    $("#a_btn").button().draggable();
    //拖动
    $("#div1").draggable();
    //放置
    $("#div2").droppable();
    $("#div2").on("drop", function(event, ui){
        //alert(event);
        $("#div2").text("drop事件");
    });

    //缩放,鼠标放到该处后可以拖动
    $("#div3").resizable();

    //使用鼠标选择单个元素或一组元素。
    //$("#btn").button();
    //$("ul").selectable();
    //$("#btn").on("click", function () {
    //    //alert("hello");
    //    if($("#r").hasClass("ui-selected")){
    //        alert("right");
    //    }
    //})
    // 使用鼠标调整列表中或者网格中元素的排序。
    $("ul").sortable();
});

.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/app1.js"></script>
    <link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
    <style>
        .ui-selected{
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com" id="a_btn">百度</a>
    <div style="width: 100px; height: 100px; border: 2px solid red" id="div1"></div>
    <div style="width: 200px; height: 200px; border: 2px solid green" id="div2"></div>
    <div style="width: 100px; height: 100px; border: 2px solid red; background-color: #1c94c4" id="div3"></div>
    <strong>海贼王</strong>
    <ul>
        <li id="r">路飞</li>
        <li>罗杰</li>
        <li>白胡子</li>
    </ul>
    <a href="#" id="btn">提交</a>
</body>
</html>

2. 控件

$(document).ready(function () {
    //在一个有限的空间内显示用于呈现信息的可折叠的内容面板。
    $("#accordion").accordion();
    //根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。
    var aototags = ["python","c/c++", "java"];
    $("#tags").autocomplete({
        source:aototags
    })
    //日期控件
    $("#date").datepicker();
    $("#btn").button();
    //对话框
    $("#btnd").button().on("click", function () {
        $("#div").dialog();
    });

})

.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/app2.js"></script>
    <link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
</head>
<body>
    <div id="accordion">
        <h3>选项1</h3>
        <div>
            <p>
                hellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
            </p>
        </div>
        <h3>选项1</h3>
        <div>
            <p>
                hellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
            </p>
        </div>
        <h3>选项1</h3>
        <div>
            <p>
                hellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
            </p>
        </div>
        <h3>选项1</h3>
        <div>
            <p>
                hellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
            </p>
        </div>
    </div>
    <label>Tags:</label>
    <input id="tags">
    <p>Date:<input type="text" id="date"></p>
    <a href="#" id="btn">按钮</a>
    <div id="div">
        <p>这是一个对话框</p>
    </div>
    <a id="btnd">对话框</a>
</body>
</html>

3. 控件2

/**
 * 
 */

var pb;
var max=100;
var current = 0;

var valueSpan, slider;
$(document).ready(function () {
    //进度条，显示一个确定的或不确定的进程状态。
    //$("#pb").progressbar({value:50});
    pb=$("#pb");
    pb.progressbar({max:100});
    setInterval(function () {
        current++;
        if(current>=100){
            current=0;
        }
        pb.progressbar("option", "value", current);
    }, 100);

    // 菜单
    $("#menu").menu({position:{at:"left bottom"}});

    //滑块
    //$("#slider").slider();
    slider = $("#slider");
    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"));
        }
    })

    //下拉菜单
    $("#spinner").spinner();
    $("#spinner").spinner("value","10");
    $("#btn").on("click", function () {
        alert($("#spinner").spinner("value"));
    })

    //tabs
    $("#tabs").tabs();
});

.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/app3.js"></script>
    <link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
    <style>
        #menu{
            width: auto;
        }
        .ui-menu:after{
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0;
        }
        .ui-menu .ui-menu-item{
            display: inline-block;
            float: left;
            margin: 0;
            padding: 10;
            width: auto;
        }
    </style>
</head>
<body>
    <!--进度条-->
    <div id="pb"></div>
    <!-- 菜单-->
    <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/C++</li>
        <li>Python</li>
        <li>R</li>
    </ul>
    <!-- 滑块-->
    <span id="span">0</span>
    <div id="slider"></div>

    <!-- 下拉菜单-->
    <input id="spinner">
    <button id="btn">getValue</button>

    <!-- tabs-->
    <div id="tabs">
        <ul>
            <li><a href="#hello1">hello1</a></li>
            <li><a href="#hello2">hello2</a></li>
            <li><a href="#hello3">hello3</a></li>
        </ul>
        <div id="hello1">
            hello1
            hello
            hello
        </div>
        <div id="hello2">
            hello2
            hello
            hello
        </div>
        <div id="hello3">
            hello3
            hello
            hello
        </div>
    </div>

</body>
</html>

thystar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery UI 学习笔记

1.交互：$(document).ready(function(){ $("#a_btn").button().draggable(); //拖动 $("#div1").draggable(); //放置 $("#div2").droppable(); $("#div2").on("drop", function(event, ui){
复制链接

扫一扫