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. 实战Jquery(二)--能够编辑的表格

    今天实现的是一个表格的样例,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格能够在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路非常清晰,仅仅是在实现的 ...

  2. abp的权限与导航菜单的关系

    原来以为各是各的,所以就有了第一个版本.Getallmentus.然后注入了role,当然失败了.获取所有的菜单.一直在思考在什么地方设置菜单是否展示呢? 后面看了源码.才发现自己错了. UserNa ...

  3. Crontab使用方式

    Liunx系统的定时任务需要Crontab来完成 一.添加 添加定时脚本 crontab -e 或者直接编辑/etc/crontab文件进行任务添加 vim /etc/crontab 二.格式 三.举 ...

  4. openfile

    linux修改open files数   概要 linux系统默认open files数目为1024, 有时应用程序会报Too many open files的错误,是因为open files 数目不 ...

  5. Easyui Datagrid扩展fixRownumber方法

    首先,从datagrid生成的代码,我们可以发现,在rowNumber上都有特定的class标记,datagrid-cell-rownumber,datagrid-header-rownumber. ...

  6. Dynamic Web Project 的学习笔记

    文章框架: 1.Dynamic  Web Project 概念 2.eclipse 中的动态Web 项目与 Myeclipse 中的web项目有何区别 3.动态的运行原理及目录结构---是否都涉及到由 ...

  7. ORA-06519: 检测到活动的自治事务处理，已经回退

    写了一个函数,由于在定义时加入了 create or replace function F_计算结果(In_参数 varchar2) return number is --使用自治事务PRAGMA A ...

  8. pip依赖安装与记录

    pip freeze requirements.txt是一个常常被许多Flask应用用于列出它所依赖的包的文本文件.它是通过pip freeze > requirements.txt生成的. 使 ...

  9. OpenCV中Camshitf算法学习

    今天上午,结合OpenCV自带的camshitf例程,简单的对camshitf有了一个大致的认识和理解,现总结如下: 1:关于HSV H指hue(色相).S指saturation(饱和度).V指val ...

  10. 第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件

    jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...