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. Extjs中获取getEl获取undefined的问题

       一定注意: getEl()方法只有在panel.show()之后才会有值.在hide()的时候没有该对象.    也就是说如果要操作Ext.dom.Element对象必须让对象先显示出来.

  2. You don't have permission to access javascript on this server

    今天访问遇到一个很奇怪的问题,在本地测试 http://localhost:9012/javascript/, 报错: Forbidden You don't have permission to a ...

  3. Fantasy of a Summation n个数,k层重复遍历相加。求它的和%mod的值;推导公式+快速幂

    /** 题目:Fantasy of a Summation 链接:https://vjudge.net/contest/154246#problem/L 题意:n个数,k层重复遍历相加.求它的和%mo ...

  4. jsp a href怎么传参数?

    jsp中超链接传值使用键值对格式,多个键值对之间用&分隔,即<a href="show.jsp?name=tom&pass=123&score=78,5&quo ...

  5. 汇编 DOS的中断调用 INT 21H

    DOS系统功能调用 这个汇编指令是用于提供DOS系统功能调用. 它是由DOS提供的一组实现特殊功能的子程序供程序猿在编写自己的程序时调用,以减轻编程的工作量. 分两种,re=view"> ...

  6. 前台传递给后台的JSON字符串中的引号 “” 在JAVA后台被转义为 "

    前台传递给后台的JSON字符串中的引号 "" 在JAVA后台被转义为 &quot 1.问题: 前台数据,JSON字符串带有引号 "" ,数据被传递到后台 ...

  7. android菜鸟学习笔记26----Android广播消息及BroadcastReceiver

    1.广播类型: Android中的广播有两种类型:标准广播和有序广播.其中,标准广播是完全异步发送的广播,发出之后,几乎所有的广播接收者都会在同一时刻收到这条广播消息,因而,这种类型的广播消息是不可拦 ...

  8. jQuery之map()和get() map().get().join意思

    jQuery下有个概念叫“类数组”,比如$( " li " ),当取到一个集合的时候,会有数组的一些属性,但是instancseof Array仍然是false.但是var a=$ ...

  9. 巨蟒python全栈开发django5:组件&&CBV&FBV&&装饰器&&ORM增删改查

    内容回顾: 补充反向解析 Html:{% url ‘别名’ 参数 %} Views:reverse(‘别名’,args=(参数,)) 模板渲染 变量 {{ 变量名 }} 逻辑相关 {% %} 过滤器: ...

  10. E QUERY [main] SyntaxError: identifier starts immediately after numeric literal mongodb mapReduce 异常分析 集合命名规范

    异常信息 repl_test:PRIMARY> db.0917order_totals_b.find()2018-09-28T15:13:03.992+0800 E QUERY [main] S ...