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入门

最新文章

热门文章