JQuery UI 入门

时间 2019-11-21

标签 jquery 入门栏目 JQuery 繁體版

原文原文链接

1. JQuery UI 概述

1.1 JQuery UI 主要分为三部分:

交互部件(interactions):是一些与鼠标交互相关的内容;
小部件(widgets): 主要是一些页面的扩展;
效果库(effects):用于提供丰富的动画效果;

2. 交互部件

// index.html
    <head>
        <script src="jquery-3.2.1.min.js"></script> //必须第一个被引入,由于 UI 依赖 jquery 库
        <script src="jquery-ui.min.js"></script>
        <script src="app.js"></script>
        <link text="text/css" href="jquery-ui.min.css" rel="stylesheet"/>
    </head>
    <body>
        <a href="#" id="btn">点击这里</a>
        <div style="width:100px;height:100px;border:2px solid #FF0000" id="div1"></div>
        <div style="width:300px;height:300px;border:2px solid #FF0000" id="div2"></div>
        <ul id="st">
            <li>苹果</li>
            <li>香蕉</li>
            <li>橘子</li>
            <li>山竹</li>
        </ul>
    </body>

// app.js
    $(document).ready(function(){

        // 按钮效果
        $("#btn").button();

        // div 拖动效果
        $("#div1").draggable();

        // div 里面能放 div
        $("#div2").droppable();

        // div 尺寸能够任意改变
        $("#div1").resizable();

        // 能够对列表中的两个值经过鼠标拖动,互换位置
        $("#st").sortable();
    })

3. 小部件

accordion():可折叠显示;
autocoplete(): 自动补全;
datepicker(): 日期选择;
dialog():对话框;
progressbar(): 进度条;
menu():菜单;
slider():可拖动进度条;
spinner():下拉列表;
tabs()

参考资料css