JQuery UI 入门

最新推荐文章于 2024-07-12 16:27:40 发布

weixin_33836223

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量68

点赞数

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/linkworld/p/7647463.html

版权

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

参考资料

转载于:https://www.cnblogs.com/linkworld/p/7647463.html

weixin_33836223

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery UI 入门

1. JQuery UI 概述1.1 JQuery UI 主要分为三部分:交互部件(interactions):是一些与鼠标交互相关的内容;小部件(widgets): 主要是一些页面的扩展;效果库(effects):用于提供丰富的动画效果;2. 交互部件// index.html <head> <script src="jquery-3.2...
复制链接

扫一扫