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. SSH——基于BaseDao和BaseAction实现用户登录

           基于BaseDao和BaseAction实现用户登录  1. 首先修改login.jsp页面,点击登录按钮,提交表单 <a onclick="document.forms ...

  2. Navicat Premium常用快捷键

    在使用操作数据库时,推荐navicat工具.记住一些常用快捷键,可大大提高工作效率,以下是简单总结的几个常用快捷键. 1.ctrl+r 运行当前查询窗口的所有sql语句 2.ctrl+shift+r ...

  3. Eclipse安装Properties Editore插件

    Properties Editor for Eclipse3[1].0-3.2安装使用-http://jzgl-javaeye.iteye.com/blog/386010 PropertiesEdit ...

  4. WPF开源框架项目

    好久博客未更新新博文了,今天介绍一个WPF开源框架MaterialDesignInXamlToolkit废话不多说先让我们来看看框架得几张截图 让我们一起来看看源代码得结构如下图 接下我们运行代码看看 ...

  5. WPF入门教程系列四

    WPF之Binding的使用(二) 一.  前言 初学WPF经常被Binding搞得苦不堪言,Binding的重用性就不做介绍了,在WPF应用程序开发中Binding是一个非常重要的部分.WPF也是近 ...

  6. AMD 3600+ X2 CPU配合昂达A69T主板超频教程

    本次超频使用电脑硬件配置如下: AMD 3600+ X2 90nm 昂达 A69T HDMI 宇瞻 DDR II 1G 667普条 西数 WD2500KS SATAII  250G 16M 戴尔 普通 ...

  7. chrome 浏览器 的一些控制台技巧

    1.查找dom元素.但它并不支持jquery语法. $$("#fock");   // 目前仅仅知道可以查找Dom元素 2.查找dom元素绑定的事件. getEventListen ...

  8. Silverlight实例教程 - Validation服务器端异步数据验证（转载）

    摘要:本 篇实例,我们仍旧使用SilverlightValidationDemo项目,为了不和过去的验证方法冲突,这里我们创建一个新的数据成员类 Staff,该类实现INotifyDataErrorI ...

  9. JDK1.9环境变量配置

    JAVA_HOME C:\Program Files\Java\jdk-9.0.1 JRE_HOME C:\Program Files\Java\jre-9.0.1 PATH .;%JAVA_HOME ...

  10. Atitit.文件搜索工具 attilax 总结

    Atitit.文件搜索工具 attilax 总结 1. 指定目录按照体积大小精确搜索1 1.1. File Seeker 4.5 版本的可以,3.5版本的不行..1 2. 按照文件内容搜索1 2.1. ...