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. JAVA自带监控工具的介绍

    转:http://www.alidw.com/?p=326 相信部分同学可能还是不太了解或者很少使用,这些监控工具是jdk5.0以上才会有的,有部分是liunx特有的. 了解这些工具再做压力测试和调优 ...

  2. 基于Linux的智能家居的设计(5)

    4  软件设计 软件设计部分主要包含uboot移植.内核编译.系统移植.设备驱动编程.应用程序编程(QT编程.mysql数据库编程.控制系统编程).各个模块的功能函数(部分是在windows以下的IA ...

  3. jQuery select的操作实现代码

          //改变时的事件  $("#testSelect").change(function(){ //事件发生生 jQuery('option:selected', this ...

  4. TensorFlow学习笔记3——Placeholders and feed_dict

    1. Placeholders placeholders,顾名思义,就是占位的意思,举个例子:我们定义了一个关于x,y的函数 f(x,y)=2x+y,但是我们并不知道x,y的值,那么x,y就是等待确定 ...

  5. android launcher2开发之 有抽屉改成无抽屉

    在launcher.java中在createShortcut方法中   屏蔽全部应用button 修改之前 View createShortcut(int layoutResId, ViewGroup ...

  6. 12.extern(转)

    本文转自:http://blog.csdn.net/xingjiarong/article/details/47656339 利用关键字extern,可以在一个文件中引用另一个文件中定义的变量或者函数 ...

  7. SpringBoot支持https和http

    1.application.propertites #server.port=8081 server.port: 8443 server.ssl.key-store: classpath:keysto ...

  8. HDU - 5017 Ellipsoid(模拟退火法)

    Problem Description Given a 3-dimension ellipsoid(椭球面) your task is to find the minimal distance bet ...

  9. android学习十四（android的接收短信）

    收发短信是每一个手机主要的操作,android手机当然也能够接收短信了. android系统提供了一系列的API,使得我们能够在自己的应用程序里接收和发送短信. 事实上接收短信主要是利用我们前面学过的 ...

  10. 第四篇：Elaticsearch 安装配置

    Elasticsearch 是一个分布式搜索引擎,相似产品还有solr-cloud .Elasticsearch 相对于solr 而言,随着容量的变化,效率会比solr高,特点就是速度快.ES使用者众 ...