在 jQuery EasyUI 中,标签页(Tabs)是一种常见的 UI 组件,允许你在同一页面上切换不同的内容。以下是一个简单的例子:

1. 引入必要的文件: 在 HTML 页面中引入 jQuery、EasyUI 的 CSS 和 JavaScript 文件。
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
        <script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
        <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    </body>
    </html>

2. 创建标签页: 使用 tabs 函数创建标签页。
    <div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
        <div title="Tab 1" style="padding:10px;">
            Content of Tab 1
        </div>
        <div title="Tab 2" style="padding:10px;">
            Content of Tab 2
        </div>
        <div title="Tab 3" style="padding:10px;">
            Content of Tab 3
        </div>
    </div>

    在上述代码中,title 属性用于设置标签页的标题,style 属性用于设置标签页内容的样式。

3. 初始化标签页: 使用 tabs 函数初始化标签页。
    <script>
        $(function(){
            $('#tt').tabs();
        });
    </script>

在上述代码中,tabs 函数用于初始化标签页。

这只是一个简单的例子,你可以根据实际需求和业务逻辑进行更复杂的定制。例如,你可以在每个标签页中放置不同的内容,如表格、表单、图表等,以满足具体的页面布局需求。


转载请注明出处:http://www.pingtaimeng.com/article/detail/13099/jQuery EasyUI