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. python 爬取王者荣耀高清壁纸

    代码地址如下:http://www.demodashi.com/demo/13104.html 一.前言 打过王者的童鞋一般都会喜欢里边设计出来的英雄吧,特别想把王者荣耀的英雄的高清图片当成电脑桌面 ...

  2. XPage的使用示范例子

    代码地址如下:http://www.demodashi.com/demo/12975.html XPage [[api][apisvg]][api] 一个非常方便的fragment页面框架 特点 支持 ...

  3. （二）Linux——Linux常用指令

    1. 文件目录操作命令 ls 显示文件和目录列表     -l 列出文件的详细信息 -a 列出当前目录所有文件,包含隐藏文件 mkdir 创建目录 -p 父目录不存在情况下先生成父目录 cd 切换目录 ...

  4. GIS中的坐标系

    原文地址:http://www.cnblogs.com/onsummer/p/7451128.html 从第一次上地图学的课开始,对GIS最基本的地图坐标系统就很迷.也难怪,我那时候并不是GIS专业的 ...

  5. json2.js

    /* http://www.JSON.org/json2.js 2010-03-20 Public Domain. NO WARRANTY EXPRESSED OR IMPLIED. USE AT Y ...

  6. ASP.NET_SessionId 不相同导致验证码出错

    问题: 今天碰到一个比较奇怪的问题,每个页面请求的cookie的ASP.NET_SessionId 不相同,导致验证码检验出错.也就是说每个请求都是一个新的会话,我们把验证码保证在Session[ra ...

  7. ConfigurationManager.AppSettings 属性 appSettings

    https://msdn.microsoft.com/zh-cn/library/system.configuration.configurationmanager.appsettings(v=vs. ...

  8. tcp/ip ---数据链路层

  9. python元组、列表的异同总结

    定义的异同: 列表(list):[] list是一种有序的集合,能够随时加入和删除当中的元素.用 [] 表示. 列表的三个特性:①创建之后也能够加减改动元素. ②元素能够是数字.字符.变量等.也能够混 ...

  10. vs2017 生成代码策略 旧的 ObjectContext

    新版本的VS中已经去掉了生成ObjectContext的功能,需要手动下载一个生成ObjectContext的T4模板.在模型设计器的上下文菜单中选择添加代码生成项,在联机模板中选择对应EF版本的Ob ...