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. iOS Socket/Tcp编程 GCDAsyncSocket的实战(带回调)

    很多同学一听到Socket TCP UDP 这几个字眼感觉特别害怕,很怕在工作当中使用,因为他们太底层了.下面我把我在工作中使用Socket类库GCDAsyncSocket进行一次实战 文章中只适用于 ...

  2. Spring MVC参数方法名称解析器

    以下示例显示如何使用Spring Web MVC框架来实现多动作控制器的参数方法名称解析器. MultiActionController类可在单个控制器中分别映射多个URL到对应的方法. 所下所示配置 ...

  3. 【matlab】绘制双三次插值函数曲线

    想要的效果: 编程时要用到分段函数曲线的绘制方法:..+.*(分段条件). 需要注意的是:函数表达式中的乘除和乘方都要加“.”.因为一般的函数都是数在乘变量运算. x=-:; a=-0.5; w=ab ...

  4. poj 2226(最小覆盖)

    题目链接:http://poj.org/problem?id=2226 思路:将连续的横向水洼看成X集合中的一个点,连续的纵向水洼看成Y集合中的一个点,而将每个水点看成一条边,它连接了所在的X集合中的 ...

  5. Python 使用MySQL

    在导入MySQLdb之前,需要安装MySQLdb模块.使用pip安装,命令如下: pip install MySQL-python 安装成功后,导入MySQLdb模块 import MySQLdb 连 ...

  6. hfut 1287

    http://acm.hfut.edu.cn/OnlineJudge/ 中文题. 区间线段树,需要剪枝.n的大小有问题. #include <iostream> #include < ...

  7. hoj 2543 (费用流 拆边）

    http://acm.hit.edu.cn/hoj/problem/view?id=2543 1.将原图中的每条边(u, v)拆成两条:(u, v, Ci, 0), (u, v, ∞, Ei) 2.购 ...

  8. 【BZOJ2384】[Ceoi2011]Match KMP

    [BZOJ2384][Ceoi2011]Match Description 作为新一轮广告大战的一部分,格丁尼亚的一家大公司准备在城市的某处设置公司的标志(logo).公司经理决定用一些整栋的建筑来构 ...

  9. 以层的观点思考各个nginx的log位置

    问题 做代理服务器时候,自身的log.被代理的服务器的log 回答 以层的观点思考这个问题 各层的日志落在各层

  10. 实用的 集合工具类 和 String工具类

    集合工具类:CollectionUtil method: 1.isNotEmpty() 不为空 2.isEmpty() 为空 举例:map集合         Map<String,String ...