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


參考資料css

相關文章
相關標籤/搜索