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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。