jQuery UI入门
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入门的更多相关文章
- jQuery UI 入门之实用实例分享
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
- jQuery UI 入门之实用实例
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
- JQuery UI 入门
1. JQuery UI 概述 1.1 JQuery UI 主要分为三部分: 交互部件(interactions):是一些与鼠标交互相关的内容; 小部件(widgets): 主要是一些页面的扩展; 效 ...
- jQuery UI 之 Bootstrap 快速入门
转载自(http://www.shouce.ren/example/show/s/6444) 1. 下载 这个页面是用来展示 jQuery UI Bootstrap 项目的 -- 我们将 Bootst ...
- 从零开始学习jQuery (一) 入门篇
本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些 ...
- 《jQuery UI开发指南》勘误收集
此书由罗晴明 (http://weibo.com/sunnylqm)和我合译完成,此篇博客作为勘误收集而用,若译文有误或者有任何疑问,欢迎留下评论,或者给我发邮件(地址:gzooler@gmail.c ...
- jQuery Mobile 入门基础教程
jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...
- jQuery UI框架
jQuery UI框架 1.oschina开源社区-jQuery教程 2.jQuery PrimeUI(推荐) 3.弹出框.警告框.提示框.拖动支持.位置固定.选项卡切换 4.Bootstrap框架( ...
- 第一百九十一节，jQuery EasyUI 入门
jQuery EasyUI 入门 学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 ...
随机推荐
- org.tmatesoft.svn.core.SVNCancelException: svn: E200015: authentication canc
重新添加一个凭证,用新的凭证 第二总是取最新的代码,而不是用update 有问题,问哥
- start-stop-daemon
start-stop-daemon是OpenRC计划的一部分,这个程序最先出现在Debian系的Linux发行版中,这里有个比较古老的手册页面,更详细更直观的办法当然是通过man start-stop ...
- python如何连接mysql数据库
先花点时间来说说一个程序怎么和数据库进行交互1.和数据库建立连接2.执行sql语句,接收返回值3.关闭数据库连接使用MySQLdb也要遵循上面的几步.让我们一步步的进行. 1.MySQL数据库要用My ...
- int abs(int number)函数有感: 求补码和通过补码求对应的整数 C++(增加：数字的二进制表示中1的个数)
#include "limits.h" #include "math.h" int abs(int number) { int const mask = num ...
- Linux Linux常用命令二
whoami 我是谁命令 --该命令用户查看当前系统当前账号的用户名 --由于系统管理员通常需要使用多种身份登录系统,李儒通常使用普通用户登录系统,然后再以su命令切换到root身份对系统进行灌篮.这 ...
- JavaScript 测试和捕捉
try 语句允许我们定义在执行时进行错误测试的代码块. catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块. JavaScript 语句 try 和 catch 是成对出现的.
- 《转》Ubuntu14.04 openstack juno配置之 ceilometer遥測模块安装配置
(一)在控制节点上 1.安装的遥測服务 apt-get install -y ceilometer-api ceilometer-collector ceilometer-agent-central ...
- ios - UINavigationBar添加背景图片的几种简单思路
UITabBarController下面常常需要为多个ViewController设置导航栏样式,总结了一下遇到过的为UINavigationBar添加背景图片的几种简单思路 以设置背景图片为例: 第 ...
- OpenCV学习笔记八：opencv_photo模块
一,简介: 该库用于数码照片的处理,处于发展中,目前只包含如下算法: //! restores the damaged image areas using one of the available i ...
- VC编译那些事儿
转载自:http://blog.csdn.net/wowolook/article/details/8077153 最近又被ms的编译选译纠结了一下,运行程序是老是弹出0x14b1 or 71 ...