jEasyUI 创建标签页

最新推荐文章于 2025-07-13 19:46:17 发布

froginwe11

最新推荐文章于 2025-07-13 19:46:17 发布

阅读量154

点赞数 2

CC 4.0 BY-SA版权

文章标签：开发语言

本文链接：https://blog.youkuaiyun.com/froginwe11/article/details/146546710

jEasyUI 创建标签页

概述

jEasyUI 是一个基于 jQuery 的易于使用的界面框架，它提供了丰富的组件和插件，使得开发人员可以快速构建出功能丰富、界面美观的Web应用。在 jEasyUI 中，标签页（Tabs）组件是一种常用的界面元素，它允许用户在一个窗口中显示多个面板，用户可以通过点击标签来切换不同的面板内容。本文将详细介绍如何使用 jEasyUI 创建标签页。

环境准备

在开始创建标签页之前，请确保已经引入了 jEasyUI 的相关资源文件，包括 jQuery 和 jEasyUI 的 CSS、JS 文件。以下是引入资源的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jEasyUI 创建标签页</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <!-- 标签页内容 -->
</body>
</html>

创建标签页

要创建一个标签页，首先需要创建一个 HTML 元素，并为其设置 id 属性。然后，使用 jEasyUI 的 tabs 方法来初始化标签页组件。

<div id="tabs">
    <!-- 标签页面板 -->
</div>

接下来，使用 tabs 方法添加标签页面板：

$(function() {
    $('#tabs').tabs({
        // 标签页配置项
    });
});

标签页配置项

以下是一些常用的标签页配置项：

tabs: 一个对象数组，每个对象代表一个标签页面板。
onSelect: 标签页被选中时触发的回调函数。
onClose: 标签页被关闭时触发的回调函数。

以下是一个示例配置：

$(function() {
    $('#tabs').tabs({
        tabs: [
            {
                title: '面板1',
                content: '<div>这里是面板1的内容</div>',
                closable: true
            },
            {
                title: '面板2',
                content: '<div>这里是面板2的内容</div>',
                closable: true
            }
        ],
        onSelect: function(title) {
            console.log('选中的标签页是：' + title);
        },
        onClose: function(title) {
            console.log('关闭的标签页是：' + title);
        }
    });
});

添加标签页

要在运行时动态添加标签页，可以使用 tabs('add', options) 方法。以下是一个示例：

$(function() {
    $('#tabs').tabs({
        // 标签页配置项
    });

    // 添加标签页
    $('#tabs').tabs('add', {
        title: '面板3',
        content: '<div>这里是面板3的内容</div>',
        closable: true
    });
});