jQuery UI 学习笔记

来源：互联网发布：苹果系统清理软件编辑：程序博客网时间：2024/05/19 18:38

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>

0 0