JQuery UI 入门

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()

参考资料

1. JQuery UI 概述

1.1 JQuery UI 主要分为三部分:

2. 交互部件

3. 小部件

相关文章