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. （二）EasyUI 使用——常用组件

    1. EasyUI常用组件的基本用法 1.1 layout布局 <!-- 布局面板 大小自适应父容器 --> <div data-options="fit:true&quo ...

  2. MVC中上传文件大小限制的解决办法

    在Web.Config文件中配置限制上传文件大小与时间. 需要在配置文件里面设置文件上传限定的两个属性值:maxAllowedContentLength,maxRequestLength 允许上传文件 ...

  3. 在连接mysql数据库时出错：The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one time zone

    这个错误是时区导致的,所以需要在配置连接url后面加上时区: url=jdbc:mysql://localhost:3309/test?serverTimezone=UTC 其中UTC是统一标准世界时 ...

  4. Hive 作业优化

    1.Join原则将条目少的表/子查询放在 Join的左边. 原因是在 Join 操作的 Reduce 阶段,位于 Join左边的表的内容会被加载进内存,将条目少的表放在左边,可以有效减少发生内存溢出的 ...

  5. 常用Sql 标量值函数

    1.汉字拼音首字母 /****** Object: UserDefinedFunction [dbo].[fnGetHzPY] Script Date: 08/16/2018 09:04:47 Des ...

  6. Python模块学习之fabric

    fabric是一个运维经常使用到的一个模块.但是我在python3环境下安装fabric就遇到了坑! 安装包名称是fabric3而不是fabric! pip install fabric3 利用fab ...

  7. 使用VS2015 时 报LNK1104 找不到exe.manifest 的解决方法

    一般都是由于工程配置文件导致的错误,暴力方法: 直接用文本工具打开.vcxproj文件.搜索AdditionalManifestFiles ,然后根据当前工程目录进行更改

  8. FreeMarker中在list中加入if判断

    例如list中遍历releaseitem,在ri中获取audit的值,如果audit的值为0则表示正在审核中,如果为1则表示审核通过,如果为2则表示未审核. <#list releaseitem ...

  9. js弹窗效果实现

    1.首先准备好要弹出的内容,一般用ajax向后台请求数据,组装成html: 主页:a.html,含有div: <div class="cms-window cms-window-oth ...

  10. java获取真实的ip地址

    直接上代码,获取请求主机的IP地址,如果通过代理进来,则透过防火墙获取真实IP地址 public class IPUtil { private static final Logger logger = ...