Tab插件之 Responsive Full Width Tabs 的使用

来源：互联网发布：国内预科知乎编辑：程序博客网时间：2024/05/17 23:20

之前，自己在练习后台知识代码的时候，有看到很多系统都有用到 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.csdn.net/detail/samile6899/9806912）

0 0