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. GoldenGate Lag For Huge Insert

    前些天客户的ogg延迟到达8小时左右.于是我当时用logdump追踪了一下: 看进程状态: send extsa staus EXTRACT ZBDBA (PID 2269368) Current s ...

  2. shell脚本循环嵌套

    嵌套循环 在循环语句内使用任意类型的命令,包括其他循环命令,叫做嵌套循环.因为是在迭代中迭代,需要注意变量的使用以及程序的效率问题. 下面举一个for循环嵌套for循环的例子: wangsx@SC-2 ...

  3. 窥探try ... catch与__try ... __except的区别

    VC中的这两个东西肯定谁都用过, 不过它们之间有什么区别, 正好有时间研究了一下, 如果有错误欢迎拍砖.基于VC2005, 32位XP 平台测试通过. 估计对于其他版本的VC和操作系统是不通用的. 1 ...

  4. mysql bin路径下的mysql被杀毒软件查杀后恢复过来也无法启动

    mysql服务被杀毒软件干掉之后操作 文件恢复过来后还是无法启动 同事使用杀毒软件之后发现,mysql的服务被干掉了.之后想到了处理办法: mysqld-nt -installnet start my ...

  5. C# Enum,Int,String,之间及bool与int之间的转换

    枚举类型的基类型是除 Char 外的任何整型,所以枚举类型的值是整型值. Enum 提供一些实用的静态方法: (1)比较枚举类的实例的方法 (2)将实例的值转换为其字符串表示形式的方法 (3)将数字的 ...

  6. vue 结合localStorage 来双向绑定数据

    结合localStorage 来双向绑定数据(超级神奇) localStorage.js: const STORAGE_KEY = 'todos_vuejs' export default { fet ...

  7. eclipse日志

    注意包别引入错: import org.slf4j.Logger; import org.slf4j.LoggerFactory; private static final Logger log = ...

  8. php对象序列化和cookie的问题,反序列化false

    php对象序列化和cookie的问题,反序列化false $searchKeywords = array("羊奶","肥皂"); $searchKeywords ...

  9. iOS 后台定位审核被拒How to clarify the purpose of its use in the locatio

    4.5 - Apps using background location services must provide a reason that clarifies the purpose of th ...

  10. configure: error : no acceptable C compiler found in $PATH

    先要用yum install yum-fastestmirror更新下源 # yum -y install gcc