jQuery UI是jQuery的一个插件集，为jQuery的核心库添加了新的功能。

jQUery UI库可以从http://jquery.com下载。

下载一个ZIP文件jquery-ui-1.9.2.custom.zip，它包含了jQuery UI的源代码、示例及文档。

解压后的目录jquery-ui-1.9.2.custom中包含4部分内容：

一个css子目录，包含与jQuery UI相关的CSS文件；

一个js目录，包含jQuery UI的JavaScript文件；

一个development-bundle子目录；

一个index.html文件。

 

示例：

1.新建一个Web工程JQueryUIDemo。

2.将上面的css文件夹和js文件夹复制到IntelliJ的Web目录下（或者eclipse的WebContent目录）。

3.新建index.jsp页面，在<head></head>中导入以下3个文件。

<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.9.2.custom.css"/>

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>

4.index.jsp的代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>Accordion</title>

    <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.9.2.custom.css"/>

    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

    <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>

    <script type="text/javascript">

        $(function() {

            $( "#tabs" ).tabs();

        });

    </script>

</head>

<body>

    <div id="tabs">

        <ul>

            <li><a href="#tab1">Tab1</a> </li>

            <li><a href="#tab2">Tab2</a> </li>

        </ul>

        <div id="tab1">Contents of first tab</div>

        <div id="tab2">Contents of the second tab</div>

    </div>

</body>

</html>

5.将工程部署到tomcat上，运行结果为

 

jQuery UI 组件之---选项卡（标签）tab

要使用jQuery UI创建这种类型的页面，需要以下内容：

一个包含整个选项卡的<div>块；

一个构成选项卡栏的<ul>元素；

每个选项卡对应的一个<li>元素；

每个选项卡的窗口对应的一个<div>元素。

 

此外，还必须使用jQuery UI的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 入门

    1. JQuery UI 概述 1.1 JQuery UI 主要分为三部分: 交互部件(interactions):是一些与鼠标交互相关的内容; 小部件(widgets): 主要是一些页面的扩展; 效 ...

  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. 配置LANMP环境（1）-- 安装虚拟机VMware与安装CentOS7.2系统

    一.安装虚拟机VMware 1.下载VMware傻瓜式安装 2.配置                二.安装CentOS7.2系统 镜像下载链接 1.放入ios镜像文件之后,启动虚拟机,选择7.0+的 ...

  2. 009android初级篇之APP中使用系统相机相册等集成应用

    android应用中使用相机功能,大致有两种方式实现: 直接调用系统内部的相机程序,显示的也是系统预设的界面(简单,只有简单的拍照功能): 自己去implement一个相机程序(不难,较具备弹性,但相 ...

  3. Fibonacci series(斐波纳契数列)的几种常见实现方式

    费波那契数列的定义: 费波那契数列(意大利语:Successione di Fibonacci),又译费波拿契数.斐波那契数列.斐波那契数列.黄金切割数列. 在数学上,费波那契数列是以递归的方法来定义 ...

  4. 在DLL中动态加载其所依赖的dll

    windows下LoadLibrary函数的搜索顺序是先搜索system32等系统环境变量path下注册过的路径,然后是当前路径. 这里的相对路径是指的主exe所在路径,并且相对路径在程序运行过程中可 ...

  5. jmeter 参数值写入到指定的文件中[如获取token写入某文件为免登录备用]

    1.编写java 类AppendFile ,代码如下 import java.io.File;import java.io.FileWriter;import java.io.IOException; ...

  6. redis 列表的底层数据结构链表

    当一个列表键包含了数量比较多的元素,又或者列表中包含的的元素都是比较长的字符串,Redis就会使用链表作为列表键的底层实现 每个列表节点的数据结构为 列表数据接口中保存了 该节点前置节点的指针.后置节 ...

  7. TP数据删除

    [数据删除及执行原生sql语句] delete()  返回受影响的记录条数 $goods -> delete(30);   删除主键值等于30的记录信息 $goods -> delete( ...

  8. 山石防火墙debug

    debug dp basic debug dp snoop debup dp drop debug dp filter src-ip ? show logging debug

  9. BZOJ 2431

    2431: [HAOI2009]逆序对数列 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 1521  Solved: 883[Submit][Statu ...

  10. 《从零开始学Swift》学习笔记（Day 47）——final关键字

    原创文章,欢迎转载.转载请注明:关东升的博客 在类的定义中使用final关键字声明类.属性.方法和下标.final声明的类不能被继承,final声明的属性.方法和下标不能被重写. 下面看一个示例: f ...