Tab插件之 Responsive Full Width Tabs 的使用

最新推荐文章于 2024-04-16 10:05:57 发布

原创最新推荐文章于 2024-04-16 10:05:57 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#j2ee #FullWidthTabs

JAVA 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了在后台开发中如何利用Responsive Full Width Tabs插件来实现Tab切换效果。作者分享了自己在寻找和修改插件过程中的经验，并提供了具体的使用步骤：包括引入JQuery和FullWidthTabs的相关文件，以及编写HTML代码来构建Tab结构。

之前，自己在练习后台知识代码的时候，有看到很多系统都有用到 Tab 切换的效果，本来是想自己用 JS 实现的，但是后来想了想，先可以看看网上有没有相关的插件。如果有相关的插件，那铁定会自己做的要完善，抱着学习的态度找了找，果然网上有很多这样的 Tab 切换的插件，于是马上下载 DEMO ，并且自己加以修改了一下，效果是这样的（废话少说，直接上代码……）

具体的使用方法：

1，首先需要下载并在页面中引入JQuery.js 和 FullWidthTabs相关的 js 和 css 等文件；

2，在 HTML 的 <BODY> 标签中，编写相关的 html 代码；

<div class="container">
        <div id="tabs" class="tabs">
            <nav>
                <ul>
                    <li><a href="#section-1" class="icon-shop"><span>公共信箱</span></a></li>
                    <li><a href="#section-2" class="icon-cup"><span>写信</span></a></li>

                </ul>
            </nav>
            <div class="content">
                <section id="section-1">
                    <table cellspacing="0" cellpadding="0" class="TableStyle">
                        <!-- 表头-->
                        <thead>
                        <tr align="CENTER" valign="MIDDLE" id="TableTitle">
                            <td width="200px">邮件服务器</td>
                            <td width="200px">邮箱用户名</td>
                            <td width="300px">邮箱密码</td>
                            <%--<td width="300px">是否SMTP</td>--%>
                            <td>相关操作</td>
                        </tr>
                        </thead>

                        <!--显示数据列表-->
                        <tbody id="TableData" class="dataContainer" datakey="sysEmailList">

                        <s:iterator value="#sysEmailList">
                            <tr class="TableDetail1 template">
                                <td>${smtphost} </td>
                                <td>${user} </td>
                                <td>****** </td>
                                    <%--<td>
                                        <c:if test="${issmtp==0}">是</c:if>
                                        <c:if test="${issmtp==1}">否</c:if>
                                         
                                    </td>--%>
                                <td>
                                    <s:a action="sysEmailAction_editUI?id=%{id}">修改</s:a>
                                </td>
                            </tr>
                        </s:iterator>

                        </tbody>
                    </table>

                </section>
                <section id="section-2">

                    <s:form action="sysEmailAction_sendEamil" onsubmit="checkEamilForm();return false;">
                        <div class="ItemBlock_Title1"><!-- 信息说明<DIV CLASS="ItemBlock_Title1">
        	<IMG BORDER="0" WIDTH="4" HEIGHT="7" SRC="${pageContext.request.contextPath}/style/blue/images/item_point.gif" /> 岗位信息 </DIV>  -->
                        </div>

                        <!-- 表单内容显示 -->
                        <div class="ItemBlockBorder">
                            <div class="ItemBlock">
                                <table cellpadding="0" cellspacing="0" class="mainForm">
                                    <tr>
                                        <td width="100">邮箱地址</td>
                                        <td><s:textfield id="emailAddress" name="user" cssClass="InputStyle required" /> *</td>
                                    </tr>
                                    <tr>
                                        <td width="100">主题</td>
                                        <td><s:textfield id="subObject" name="name" cssClass="InputStyle required" /> *</td>
                                    </tr>
                                    <tr>
                                        <td>正文</td>
                                        <td><s:textarea id="content" name="description" cssClass="TextareaStyle"></s:textarea></td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                        <!-- 表单操作 -->
                        <div id="InputDetailBar">
                            <input type="image" src="${pageContext.request.contextPath}/style/images/sendEamil.jpg"/>
                            <a href="javascript:history.go(-1);"><img src="${pageContext.request.contextPath}/style/images/goBack.png"/></a>
                        </div>
                    </s:form>

                </section>
            </div><!-- /content -->
        </div><!-- /tabs -->
    </div>
    <script src="${pageContext.request.contextPath}/script/FullWidthTabs/js/cbpFWTabs.js"></script>
    <script>
        new CBPFWTabs( document.getElementById( 'tabs' ) );
    </script>

  </div>

3，OK！（当然了，在实现的过程中肯定是需要做相应的修改的，上面的也并不是一劳永逸，大家可以对照着demo例子尝试下 http://download.youkuaiyun.com/detail/samile6899/9806912）