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

参考资料

JQuery UI 入门的更多相关文章

  1. jQuery UI 入门之实用实例分享

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  2. jQuery UI 入门之实用实例

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  3. jQuery UI入门

    jQuery UI是jQuery的一个插件集,为jQuery的核心库添加了新的功能. jQUery UI库可以从http://jquery.com下载. 下载一个ZIP文件jquery-ui-1.9. ...

  4. jQuery UI 之 Bootstrap 快速入门

    转载自(http://www.shouce.ren/example/show/s/6444) 1. 下载 这个页面是用来展示 jQuery UI Bootstrap 项目的 -- 我们将 Bootst ...

  5. 从零开始学习jQuery (一) 入门篇

    本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些 ...

  6. 《jQuery UI开发指南》勘误收集

    此书由罗晴明 (http://weibo.com/sunnylqm)和我合译完成,此篇博客作为勘误收集而用,若译文有误或者有任何疑问,欢迎留下评论,或者给我发邮件(地址:gzooler@gmail.c ...

  7. jQuery Mobile 入门基础教程

    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...

  8. jQuery UI框架

    jQuery UI框架 1.oschina开源社区-jQuery教程 2.jQuery PrimeUI(推荐) 3.弹出框.警告框.提示框.拖动支持.位置固定.选项卡切换 4.Bootstrap框架( ...

  9. 第一百九十一节，jQuery EasyUI 入门

    jQuery EasyUI 入门 学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 ...

随机推荐

  1. OgnlValueStack:49 - Error setting expression 'sfjmyh.zdyx6' with value '[Ljava.lang.String;@28d320d6'

    作过户管理流程时,提交表单后控制台显示如下错误 : WARN com.opensymphony.xwork2.ognl. OgnlValueStack:60 - Error setting expre ...

  2. JavaScript在IE浏览器和Firefox浏览器中的差异总结

    JavaScript在IE浏览器和Firefox浏览器中存在一些差异,以下对这些差异部分进行了总结,以及解决方案: 1.HTML对象的 id 作为对象名的问题 IE:HTML 对象的 ID 可以作为 ...

  3. centos7下安装openvpn，访问内网服务器 （二） windows访问

    一.简介 在上一章中已经安装好了openvpn,并且已经启动成功,现在就可以通过openvpn的客户端进行连接访问内网服务器了. 二.安装openvpn客户端 下载地址: https://www.te ...

  4. javascript 中对象的拷贝

    http://blog.csdn.net/i10630226/article/details/52431562 在javascript中,对象都是值引用,也就是说,如果你常规的使用 "=&q ...

  5. webpack 通用环境快速搭建

    能用babel编译es2015 . 能热编译.能加载静态资源(js/css/font/image).是一个很通用的开发环境,虽然不智能.但很好扩展 npm 安装列表: # webpack 核心 npm ...

  6. 设计模式之里氏替换原则（LSP）

    在java等面向对象编程语言里面,我想继承性应该是一大特色吧!所以今天所要讲解的里氏替换原则主要是针对这一特性而提出来的,当我们定义对象的时候,尽量找出对象之间的相同点,然后将其抽象成基类对象.比如水 ...

  7. Git实战（四）状态转换

    上次的Git实战(三)环境搭建博文.我们大致解说了一下git的环境安装,今天我们解说一下Git的状态转换. 学习版本号控制工具.对工具进行版本号控制之间的状态转换很重要.毕竟Git仅仅是一个工具.假设 ...

  8. Vue 组件 非父子组件通信

    有时候两个组件也需要通信(非父子关系),在简单的场景下,可以使用一个空的vue实例作为中央事件总线: var bus = new Vue(); //触发组件a中的事件 bus.$emit('id-se ...

  9. LeetCode581. Shortest Unsorted Continuous Subarray

    Description Given an integer array, you need to find one continuous subarray that if you only sort t ...

  10. NGINX date_udf 定义日志

    Nginx日志自动按日期存储 Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器,因它的稳定性 ...