`

使用Iframe实现TAB页面切换

    博客分类:
  • js
TAB 
阅读更多
package com.it.springweb.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

/**
 * 〈已卖出的宝贝〉<br>
 * 〈功能详细描述〉
 * 
 * @see [相关类/方法](可选)
 * @since [产品/模块版本] (可选)
 */
@Controller
@RequestMapping(value = "/havesellbaby")
public class HaveSellBabyController {

    /**
     * 
     * 进入已卖出的宝贝主页面 <br>
     * 〈功能详细描述〉
     * 
     * @param modelAndView
     * @return
     * @see [相关类/方法](可选)
     * @since [产品/模块版本](可选)
     */
    @RequestMapping(value = "main.action")
    public ModelAndView main(ModelAndView modelAndView) {

        modelAndView.setViewName("havesellbaby/main");
        return modelAndView;
    }

    /**
     * 
     * 进入近三个月订单页面 <br>
     * 〈功能详细描述〉
     * 
     * @param modelAndView
     * @return
     * @see [相关类/方法](可选)
     * @since [产品/模块版本](可选)
     */
    @RequestMapping(value = "nearthreeorder.action")
    public ModelAndView nearThreeOrder(ModelAndView modelAndView) {

        modelAndView.setViewName("havesellbaby/nearthreeorder");
        return modelAndView;
    }

    /**
     * 
     * 进入等待发货订单页面 <br>
     * 〈功能详细描述〉
     * 
     * @param modelAndView
     * @return
     * @see [相关类/方法](可选)
     * @since [产品/模块版本](可选)
     */
    @RequestMapping(value = "waitdeliveryorder.action")
    public ModelAndView waitDeliveryOrder(ModelAndView modelAndView) {

        modelAndView.setViewName("havesellbaby/waitdeliveryorder");
        return modelAndView;
    }

    /**
     * 
     * 进入已发货订单页面 <br>
     * 〈功能详细描述〉
     * 
     * @param modelAndView
     * @return
     * @see [相关类/方法](可选)
     * @since [产品/模块版本](可选)
     */
    @RequestMapping(value = "hasdeliveryorder.action")
    public ModelAndView hasDeliveryOrder(ModelAndView modelAndView) {

        modelAndView.setViewName("havesellbaby/hasdeliveryorder");
        return modelAndView;
    }

    /**
     * 
     * 进入已发货订单页面 <br>
     * 〈功能详细描述〉
     * 
     * @param modelAndView
     * @return
     * @see [相关类/方法](可选)
     * @since [产品/模块版本](可选)
     */
    @RequestMapping(value = "returningorder.action")
    public ModelAndView returningOrder(ModelAndView modelAndView) {

        modelAndView.setViewName("havesellbaby/returningorder");
        return modelAndView;
    }

    /**
     * 
     * 进入退款中的订单页面 <br>
     * 〈功能详细描述〉
     * 
     * @param modelAndView
     * @return
     * @see [相关类/方法](可选)
     * @since [产品/模块版本](可选)
     */
    @RequestMapping(value = "successorder.action")
    public ModelAndView successOrder(ModelAndView modelAndView) {

        modelAndView.setViewName("havesellbaby/successorder");
        return modelAndView;
    }

    /**
     * 
     * 进入三个月前的订单页面 <br>
     * 〈功能详细描述〉
     * 
     * @param modelAndView
     * @return
     * @see [相关类/方法](可选)
     * @since [产品/模块版本](可选)
     */
    @RequestMapping(value = "threebeforeorder.action")
    public ModelAndView threeBeforeOrder(ModelAndView modelAndView) {

        modelAndView.setViewName("havesellbaby/threebeforeorder");
        return modelAndView;
    }
}



leftmenu.ftl
<div class="leftMenu cl">
	<ul>
		<li>
			<dl>
				<dt class="menu2"><span></span><em></em>消息和任务</dt>
				<dd><a href="#">系统消息</a></dd>
				<dd><a href="#">待办任务</a></dd>
			</dl>
		</li>
		<li>
			<dl>
				<dt class="menu3"><span></span><em></em>我的店铺</dt>
				<dd><a href="#">店铺规范</a></dd>
				<dd><a href="#">基本设置</a></dd>
				<dd><a href="#">查看我的店铺</a></dd>
				<dd><a href="#">店铺装修</a></dd>
				<dd><a href="#">分类管理</a></dd>
			</dl>
		</li>
		<li>
			<dl>
				<dt class="menu5"><span></span><em></em>促销管理</dt>
				<dd><a href="#">我要促销</a></dd>
				<dd><a href="#">促销查询</a></dd>
			</dl>
		</li>
	</ul>
</div>




rightmenu.ftl
<div class="rightCon">
	<h3 class="top-h3">已卖出的宝贝</h3>
	
	<table border="0" cellspacing="0" cellpadding="0" class="baby-001">
	  <colgroup>
		<col width="70">
		<col width="170">
		<col width="70">
		<col width="160">
		<col width="80">
		<col width="244">
	  </colgroup>
	  <tr>
		<td>宝贝名称:</td>
		<td><input type="text" class="uiText"/></td>
		<td>成交时间:</td>
		<td colspan="3">
			<span class="title-word">从</span>
			<div class="date1 data-w80">
				<input type="text" id="dateinput1" class="uiText" value="">
				<a id="date1" href="javascript:void(0);"></a>
			</div>
			<span class="title-word">日</span>
			<select class="web-select l"><option>00</option></select>
			<span class="title-word">时</span>
			<input type="text" class="uiText w20" value="00">
			<span class="title-word">分</span>
			<span class="title-word">至</span>
			<div class="date2 data-w80">
				<input type="text" id="dateinput2" class="uiText" value="">
				<a id="date2" href="javascript:void(0);"></a>
			</div>
			<span class="title-word">日</span>
			<select class="web-select l"><option>00</option></select>
			<span class="title-word">时</span>
			<input type="text" class="uiText w20" value="00">
			<span class="title-word">分</span>
		</td>
	  </tr>
	  <tr>
		<td>买家昵称:</td>
		<td><input type="text" class="uiText"/></td>
		<td>订单状态:</td>
		<td><select class="web-select"><option>全部</option></select></td>
		<td>评价状态:</td>
		<td><select class="web-select"><option>全部</option></select></td>
	  </tr>
	  <tr>
		<td>订单编号:</td>
		<td><input type="text" class="uiText"/></td>
		<td>售后服务:</td>
		<td><select class="web-select"><option>全部</option></select></td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	  </tr>
	  <tr>
		<td colspan="6"><a href="#" class="uiBtn case7"><span>搜索</span></a></td>
	  </tr>
	</table>
	
	<div class="fhWrap fhWrap2 new-fhWrap2 mt10" style="padding-bottom:10px;">
		<ul class="sixTabArea new-sixTabArea">
			<li class="on">近三个月订单</li>
			<li>等待发货</li>
			<li>已发货</li>
			<li>退款中</li>
			<li>成功的订单</li>
			<li class="haveNoBorder">三个月前的订单</li>
		</ul>
		<!---第一个tab-->
		<div id="div1" class="fiveTab">
			<iframe id="tab1"  src="" scrolling="no" frameborder="0" style="display:block;width:100%;"></iframe>
		</div>
		
		<!--第二个tab-->
		<div id="div2"  class="fiveTab hide">
			<iframe id="tab2"  src="" scrolling="no" frameborder="0" style="display:block;width:100%;"></iframe>
		</div>
		
		<!---第三个tab-->
		<div id="div3"  class="fiveTab hide">
			<iframe id="tab3"  src="" scrolling="no" frameborder="0" style="display:block;width:100%;"></iframe>
		</div>
		
		<!--第四个tab--->
		<div id="div4"  class="fiveTab hide">
			<iframe id="tab4"  src="" scrolling="no" frameborder="0" style="display:block;width:100%;"></iframe>
		</div>
		
		<!--第五个tab-->
		<div id="div5"  class="fiveTab hide">
			<iframe id="tab5"  src="" scrolling="no" frameborder="0" style="display:block;width:100%;"></iframe>
		</div>
		
		<!--第六个tab-->
		<div id="div6"  class="fiveTab hide">
			<iframe id="tab6"  src="" scrolling="no" frameborder="0" style="display:block;width:100%;"></iframe>
		</div>
	</div>
</div>



popwin.ftl
<!-- 遮罩层 -->
<div id="MUC_fullBg"></div>

<!---延长收货时间 浏览框-->
<div class="uiPop MUC_pop15 bgfa" id="MUC_pop15" style="display:none;width:500px;margin-left:-200px;">
	<div class="secTitle uc_sp">
		<b class="r uc_sp" onClick="myOpen.uCenter.popClose()"></b>
		<h4 class="l">提示</h4>
	</div>
	<div class="textArea mb10 offPage offPage-tleft">
		<p class="mb10">延长收货时间可以让买家有更多时间来"确定收货",而不会急于去申请退款。</p>
		<strong>延长本交易的"确认收货"期限为:</strong><select class="web-select"><option>3天</option></select>
	</div>
	<!-- MUC_popMain end -->
	<div class="MUC_popBtn textArea textArea2">
		<a href="#" class="uiBtn case3 mr10"><span>确定</span></a>
		<a href="javascript:;" class="uiBtn case5" onClick="myOpen.uCenter.popClose()"><span>取消</span></a>
	</div>
</div>



main.ftl
<#include "/common/common.ftl">
<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>发货给顾客</title>
	<meta name="description" content="苏宁易购"/>
	<meta name="keywords" content="苏宁易购"/>
	<link rel="shortcut icon" href="http://www.suning.com/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" type="text/css" href="${ctxPath}/havesellbaby/css/common.css">
	<link rel="stylesheet" type="text/css" href="${ctxPath}/havesellbaby/css/dispatch.css">
	<script type="text/javascript" src="${ctxPath}/havesellbaby/js/jquery.js"></script>
	<script src="${ctxPath}/havesellbaby/js/calendar.js" type="text/javascript"></script>
	
	
	<script>
		var urls = ['${ctxPath}/havesellbaby/nearthreeorder.action',
            '${ctxPath}/havesellbaby/waitdeliveryorder.action',
			'${ctxPath}/havesellbaby/hasdeliveryorder.action',
            '${ctxPath}/havesellbaby/returningorder.action',
            '${ctxPath}/havesellbaby/successorder.action',
            '${ctxPath}/havesellbaby/threebeforeorder.action'];
		$(function() {
			//默认展示第一个TAB页
			 $('#tab1').attr('src',urls[0]);
			 
			 //绑定TBA页点击事件
			 bindTabClickEvent();
		});
		
		//绑定TBA页点击事件
		function bindTabClickEvent(){
			 $("ul>li").click(function(){
			     var index=$(this).index(); //获取当前li索引,从0开始
			     var tabIndex=index+1;
			     
				 if($('#tab'+tabIndex).attr('src')=='') {//如果iframe没有加载过
					$('#tab'+tabIndex).attr('src',urls[tabIndex-1]);
				 }
				 
				 $(".fiveTab").hide();//将索引TAB页隐藏
				 $("#div"+tabIndex).show();//显示当前点击的TAB页
				 
				 $("ul>li").removeClass("on");//将索引li隐藏
				 $(this).addClass("on");//现在当前点击的li
				 
				 iFrameHeightAdaption('tab'+tabIndex);
			  });
		}
		
		function iFrameHeightAdaption(id) {
			var iframe=document.getElementById(id); //iframe id
			var height=iframe.contentDocument.body.scrollHeight + 200;
			//设置当前iframe高度
			$(iframe).height(height);
		}
	</script>
	
</head>

<body>
<div class="myOpen">
	<div class="wrap">
		<!-- 面包屑 -->
		<div class="crumb">您当前的位置:<a href="#">首页 </a> &gt; 交易中心</div>
		<!-- 面包屑 -->		
		
		
		<!-- 左侧菜单开始 -->
		<#include "leftmenu.ftl">
		<!-- 左侧菜单结束 -->
		
		
		<!-- 右侧菜单开始 -->
		<#include "rightmenu.ftl">
		<!-- 右侧菜单结束 -->
	</div>
</div>

<!-- 相关的弹出框开始 -->
<#include "popwin.ftl">
<!-- 相关的弹出框结束 -->

<script type="text/javascript">
$(function(){
	ECode.calendar({inputBox:"#date1",showbox:"#dateinput1",flag:false});
	ECode.calendar({inputBox:"#date2",showbox:"#dateinput2",flag:false});
})
</script>
</body>
</html>





nearthreeorder.ftl
<#include "/common/common.ftl">
<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>近三个月的订单</title>
	<link rel="stylesheet" type="text/css" href="${ctxPath}/havesellbaby/css/common.css">
	<link rel="stylesheet" type="text/css" href="${ctxPath}/havesellbaby/css/dispatch.css">
	<script type="text/javascript" src="${ctxPath}/havesellbaby/js/jquery.js"></script>
	<script src="${ctxPath}/havesellbaby/js/calendar.js" type="text/javascript"></script>
 	
 	<script>
 		$(function() {
			parent.iFrameHeightAdaption("tab1");
		});
 	</script>
</head>

<body>
	<div class="dataTable dataTable22 mt10">
		<table class="changeColor">
			<thead>
				<tr>
					<th width="207">宝贝</th>
					<th width="100">单价(元)</th>
					<th width="108">数量</th>
					<th width="100">售后</th>
					<th width="150">买家</th>
					<th width="120">交易状态</th>
					<th width="120">实收款(元)</th>
					<th width="100">评价</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td colspan="8">
						<div class="liulanArea">
							<div class="liulanAreaLeft new-liulanAreaLeft">
								<input type="checkbox" class="vmiddle"> 全选
								<a onclick="myOpen.uCenter.popOpen('MUC_pop16', myOpen.uCenter.pop16);" class="ml10" href="javascript://">批量发货</a>
								<a href="javascript://">批量备忘</a>
							</div>
							<div class="liulanAreaRight">
								<a class="noContent" href="javascript://">上一页</a>
								<a href="javascript://">下一页</a>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td style="height:25px;" colspan="8">
						<div class="cellCheck">
							<em class="disabled-flag" title="暂时没有备忘信息"></em>
							<input type="checkbox">
							<span>订单编号:700966589001004588ZE18</span>
							<span>成交时间:2012-12-24   16:24:45</span>
							<span class="tipTxt"><em class="tipInfo4"></em>超过24小时未发货订单</span>
						</div>
					</td>
				</tr>
				<tr>
					<td width="77" class="wrapp">
						<div class="smallPic smallPic180">
							<a href="#" target="_blank"><img width="60" height="60" src="temp/ucTemp01.jpg" alt="商品名称"></a>
							<div class="proDtial">
								<p class="proTitle" title="完整内容"><a href="#" title="" target="_blank">牛奶小雪人奶酪制品现货新品牛奶小雪人奶酪制品 现货 新品奶酪制品现货新品牛奶小</a></p>
								<p class="mt10">商家编码:123</p>
							</div>
						</div>
					</td>
					<td width="77" class="wrapp">50.00</td>
					<td><b>1</b></td>
					<td class="cf60">未发货</td>
					<td>
						<i>xiaolong43434343434</i>
						<a href="#" title="查询该买家订单" target="_blank" class="chaxun-maijia"></a>
					</td>
					<td rowspan="2">
						<span class="cf60">部分发货</span><br>
						<a href="javascript://">详情</a><br>
						<a class="uiBtn case7" href="#"><span>发货</span></a><br>
						<a onclick="myOpen.uCenter.popOpen('MUC_pop08', myOpen.uCenter.pop08);" href="javascript:;">延长收货时间</a>
					</td>
					<td>
						<b class="thm">0.55</b><br>
						<em>含快递:0.00</em><br>
						<a href="" title="" target="_blank">查看物流</a>
					</td>
					<td>对方已评</td>
				</tr>
				<tr>
					<td width="77" class="wrapp">
						<div class="smallPic smallPic180">
							<a href="#" target="_blank"><img width="60" height="60" src="temp/ucTemp01.jpg" alt="商品名称"></a>
							<div class="proDtial">
								<p class="proTitle" title="完整内容"><a href="#" title="" target="_blank">牛奶小雪人奶酪制品现货新品牛奶小雪人奶酪制品 现货 新品奶酪制品现货新品牛奶小</a></p>
								<p class="mt10">商家编码:123</p>
							</div>
						</div>
					</td>
					<td width="77" class="wrapp">50.00</td>
					<td><b>1</b></td>
					<td>已发货</td>
					<td>
						<i>xiaolong43434343434</i>
						<a href="#" title="查询该买家订单" target="_blank" class="chaxun-maijia"></a>
					</td>
					 
					<td>
						<b class="thm">0.55</b><br>
						<em>含快递:0.00</em><br>
						<a href="" title="" target="_blank">查看物流</a>
					</td>
					<td>对方已评</td>
				</tr>
				<tr>
					<td style="height:25px;" colspan="8">
						<div class="cellCheck">
							<em class="disabled-flag red-flag" title="买家要求13号再次发货,小龙"></em>
							<input type="checkbox">
							<span>订单编号:700966589001004588ZE18</span>
							<span>成交时间:2012-12-24   16:24:45</span>
						</div>
					</td>
				</tr>
				<tr>
					<td width="77" class="wrapp">
						<div class="smallPic smallPic180">
							<a href="#" target="_blank"><img width="60" height="60" alt="商品名称" src="temp/ucTemp01.jpg"></a>
							<div class="proDtial">
								<p title="完整内容" class="proTitle"><a target="_blank" title="" href="#">牛奶小雪人奶酪制品现货新品牛奶小雪人奶酪制品 现货 新品奶酪制品现货新品牛奶小</a></p>
								<p class="mt10">商家编码:123</p>
							</div>
						</div>
					</td>
					<td width="77" class="wrapp">50.00</td>
					<td><b>1</b></td>
					<td><em class="clock"></em><a target="_blank" title="" href="">退款</a></td>
					<td>
						<i>xiaolong43434343434</i>
						<a class="chaxun-maijia" target="_blank" title="查询该买家订单" href="#"></a>
					</td>
					<td>
						<span class="cf60">买家已付款</span><br>
						<a href="javascript://">详情</a><br>
						<a onclick="confirm('本订单总的部分宝贝,买家已经提交退款申请,进行发货操作将撤销订单中所有退款,是否继续?');" class="uiBtn case7" href="javascript:;"><span>发货</span></a><br>
					</td>
					<td>
						<b class="thm">0.55</b><br>
						<em>含快递:0.00</em><br>
						<a target="_blank" title="" href="">查看物流</a>
					</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td style="height:25px;" colspan="8">
						<div class="cellCheck">
							<em class="disabled-flag" title="暂时没有备忘信息"></em>
							<input type="checkbox">
							<span>订单编号:700966589001004588ZE18</span>
							<span>成交时间:2012-12-24   16:24:45</span>
						</div>
					</td>
				</tr>
				<tr>
					<td width="77" class="wrapp">
						<div class="smallPic smallPic180">
							<a href="#" target="_blank"><img width="60" height="60" alt="商品名称" src="temp/ucTemp01.jpg"></a>
							<div class="proDtial">
								<p title="完整内容" class="proTitle"><a target="_blank" title="" href="#">牛奶小雪人奶酪制品现货新品牛奶小雪人奶酪制品 现货 新品奶酪制品现货新品牛奶小</a></p>
								<p class="mt10">商家编码:123</p>
							</div>
						</div>
					</td>
					<td width="77" class="wrapp">50.00</td>
					<td><b>1</b></td>
					<td>已发货</td>
					<td>
						<i>xiaolong43434343434</i>
						<a class="chaxun-maijia" target="_blank" title="查询该买家订单" href="#"></a>
					</td>
					<td>
						<span>卖家已发货</span><br>
						<a href="javascript://">详情</a><br>
						<a onclick="myOpen.uCenter.popOpen('MUC_pop15', myOpen.uCenter.pop15);" href="javascript:;">延长收货时间</a>
					</td>
					<td>
						<b class="thm">0.55</b><br>
						<em>含快递:0.00</em><br>
						<a target="_blank" title="" href="">查看物流</a>
					</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td colspan="8">
						<div class="bottomMoreButton">
							<span class="bottomAllChecked"><input type="checkbox"> 全选</span>
							<a onclick="myOpen.uCenter.popOpen('MUC_pop16', myOpen.uCenter.pop16);" href="javascript://">批量发货</a>
							<a href="javascript://">批量备忘</a>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<!--页码-->
		<div class="snPages mt10">
			<span class="prev"><b></b> 上一页</span>
			<a href="#" class="prev"><b></b> 上一页</a>
			<a href="#" class="current">1</a>
			<a href="#">2</a>
			<a href="#">3</a>
			<span>...</span>
			<a href="#">13</a>
			<span class="next"><b></b> 下一页</span>
			<a href="#" class="next"><b></b> 下一页</a>
			<div>跳转至<input type="text">页
			<input type="button" value="确定" class="pagesubmit">
			</div>
		</div>
	</div>
</body>
</html>



waitdeliveryorder.ftl
<#include "/common/common.ftl">
<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>等待发货的订单</title>
	<link rel="stylesheet" type="text/css" href="${ctxPath}/havesellbaby/css/common.css">
	<link rel="stylesheet" type="text/css" href="${ctxPath}/havesellbaby/css/dispatch.css">
	<script type="text/javascript" src="${ctxPath}/havesellbaby/js/jquery.js"></script>
	<script src="${ctxPath}/havesellbaby/js/calendar.js" type="text/javascript"></script>
</head>

<body>
   <div class="dataTable dataTable22 mt10">
		<table class="changeColor">
			<thead>
				<tr>
					<th width="207">宝贝</th>
					<th width="100">单价(元)</th>
					<th width="108">数量</th>
					<th width="100">售后</th>
					<th width="150">买家</th>
					<th width="120">交易状态</th>
					<th width="120">实收款(元)</th>
					<th width="100">评价</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td colspan="8">
						<div class="liulanArea">
							<div class="liulanAreaLeft new-liulanAreaLeft">
								<input type="checkbox" class="vmiddle"/> 全选
								<a href="javascript://" class="ml10" onclick="myOpen.uCenter.popOpen('MUC_pop16', myOpen.uCenter.pop16);">批量发货</a>
								<a href="javascript://">批量备忘</a>
							</div>
							<div class="liulanAreaRight">
								<a href="javascript://" class="noContent">上一页</a>
								<a href="javascript://">下一页</a>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="8" style="height:25px;">
						<div class="cellCheck">
							<em title="暂时没有备忘信息" class="disabled-flag"></em>
							<input type="checkbox" />
							<span>订单编号:700966589001004588ZE18</span>
							<span>成交时间:2012-12-24   16:24:45</span>
							<span class="tipTxt"><em class="tipInfo4"></em>超过24小时未发货订单</span>
						</div>
					</td>
				</tr>
				<tr>
					<td width="77" class="wrapp">
						<div class="smallPic smallPic180">
							<a href="#" target="_blank"><a href="#" target="_blank"><img src="temp/ucTemp01.jpg" width="60" height="60" alt="商品名称"/></a></a>
							<div class="proDtial">
								<p class="proTitle" title="完整内容"><a href="#" title="" target="_blank">牛奶小雪人奶酪制品现货新品牛奶小雪人奶酪制品 现货 新品奶酪制品现货新品牛奶小</a></p>
								<p class="mt10">商家编码:123</p>
							</div>
						</div>
					</td>
					<td width="77" class="wrapp" class="thm">50.00</td>
					<td><b>1</b></td>
					<td class="cf60">未发货</td>
					<td>
						<i>xiaolong43434343434</i>
						<a href="#" title="查询该买家订单" target="_blank" class="chaxun-maijia"></a>
					</td>
					<td>
						<span class="cf60">买家已付款</span><br/>
						<a href="javascript://">详情</a><br/>
						<a href="#" class="uiBtn case7"><span>发货</span></a><br/>
					</td>
					<td>
						<b class="thm">0.55</b><br/>
						<em>含快递:0.00</em><br/>
					</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td colspan="8">
						<div class="bottomMoreButton">
							<span class="bottomAllChecked"><input type="checkbox" /> 全选</span>
							<a href="javascript://" onclick="myOpen.uCenter.popOpen('MUC_pop16', myOpen.uCenter.pop16);">批量发货</a>
							<a href="javascript://">批量备忘</a>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<!--页码-->
		<div class="snPages mt10">
			<span class="prev"><b></b> 上一页</span>
			<a href="#" class="prev"><b></b> 上一页</a>
			<a href="#" class="current">1</a>
			<a href="#">2</a>
			<a href="#">3</a>
			<span>...</span>
			<a href="#">13</a>
			<span class="next"><b></b> 下一页</span>
			<a href="#" class="next"><b></b> 下一页</a>
			<div>跳转至<input type="text">页
			<input type="button" value="确定" class="pagesubmit">
			</div>
		</div>
	</div>
</body>
</html>



hasdeliveryorder.ftl
<#include "/common/common.ftl">
<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>已发货的订单</title>
	<link rel="stylesheet" type="text/css" href="${ctxPath}/havesellbaby/css/common.css">
	<link rel="stylesheet" type="text/css" href="${ctxPath}/havesellbaby/css/dispatch.css">
	<script type="text/javascript" src="${ctxPath}/havesellbaby/js/jquery.js"></script>
	<script src="${ctxPath}/havesellbaby/js/calendar.js" type="text/javascript"></script>
</head>

<body>
	<div class="dataTable dataTable22 mt10">
		<table class="changeColor">
			<thead>
				<tr>
					<th width="207">宝贝</th>
					<th width="100">单价(元)</th>
					<th width="108">数量</th>
					<th width="100">售后</th>
					<th width="150">买家</th>
					<th width="130">交易状态</th>
					<th width="120">实收款(元)</th>
					<th width="100">评价</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td colspan="8">
						<div class="liulanArea">
							<div class="liulanAreaLeft new-liulanAreaLeft">
								<input type="checkbox" class="vmiddle"/> 全选
								<a href="javascript://" class="ml10" onclick="myOpen.uCenter.popOpen('MUC_pop16', myOpen.uCenter.pop16);">批量发货</a>
								<a href="javascript://">批量备忘</a>
							</div>
							<div class="liulanAreaRight">
								<a href="javascript://" class="noContent">上一页</a>
								<a href="javascript://">下一页</a>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="8" style="height:25px;">
						<div class="cellCheck">
							<em title="暂时没有备忘信息" class="disabled-flag"></em>
							<input type="checkbox" />
							<span>订单编号:700966589001004588ZE18</span>
							<span>成交时间:2012-12-24   16:24:45</span>
						</div>
					</td>
				</tr>
				<tr>
					<td width="77" class="wrapp">
						<div class="smallPic smallPic180">
							<a href="#" target="_blank"><a href="#" target="_blank"><img src="temp/ucTemp01.jpg" width="60" height="60" alt="商品名称"/></a></a>
							<div class="proDtial">
								<p class="proTitle" title="完整内容"><a href="#" title="" target="_blank">牛奶小雪人奶酪制品现货新品牛奶小雪人奶酪制品 现货 新品奶酪制品现货新品牛奶小</a></p>
								<p class="mt10">商家编码:123</p>
							</div>
						</div>
					</td>
					<td width="77" class="wrapp" class="thm">50.00</td>
					<td><b>1</b></td>
					<td>已发货</td>
					<td>
						<i>xiaolong43434343434</i>
						<a href="#" title="查询该买家订单" target="_blank" class="chaxun-maijia"></a>
					</td>
					<td>
						<span>卖家已发货</span><br/>
						<a href="javascript://">详情</a><br/>
						<a href="javascript:;" onclick="myOpen.uCenter.popOpen('MUC_pop15', myOpen.uCenter.pop15);">延长收货时间</a>
					</td>
					<td>
						<b class="thm">0.55</b><br/>
						<em>含快递:0.00</em><br/>
						<a href="" title="" target="_blank">查看物流</a>
					</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td colspan="8" style="height:25px;">
						<div class="cellCheck">
							<em title="买家要求13号再次发货,小龙" class="disabled-flag red-flag green-flag"></em>
							<input type="checkbox" />
							<span>订单编号:700966589001004588ZE18</span>
							<span>成交时间:2012-12-24   16:24:45</span>
						</div>
					</td>
				</tr>
				<tr>
					<td width="77" class="wrapp">
						<div class="smallPic smallPic180">
							<a href="#" target="_blank"><a href="#" target="_blank"><img src="temp/ucTemp01.jpg" width="60" height="60" alt="商品名称"/></a></a>
							<div class="proDtial">
								<p class="proTitle" title="完整内容"><a href="#" title="" target="_blank">牛奶小雪人奶酪制品现货新品牛奶小雪人奶酪制品 现货 新品奶酪制品现货新品牛奶小</a></p>
								<p class="mt10">商家编码:123</p>
							</div>
						</div>
					</td>
					<td width="77" class="wrapp" class="thm">50.00</td>
					<td><b>1</b></td>
					<td>已发货</td>
					<td>
						<i>xiaolong43434343434</i>
						<a href="#" title="查询该买家订单" target="_blank" class="chaxun-maijia"></a>
					</td>
					<td>
						<span>卖家已发货</span><br/>
						<a href="javascript://">详情</a><br/>
					</td>
					<td>
						<b class="thm">0.55</b><br/>
						<em>含快递:0.00</em><br/>
						<a href="" title="" target="_blank">查看物流</a>
					</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td colspan="8">
						<div class="bottomMoreButton">
							<span class="bottomAllChecked"><input type="checkbox" /> 全选</span>
							<a href="javascript://" onclick="myOpen.uCenter.popOpen('MUC_pop16', myOpen.uCenter.pop16);">批量发货</a>
							<a href="javascript://">批量备忘</a>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<!--页码-->
		<div class="snPages mt10">
			<span class="prev"><b></b> 上一页</span>
			<a href="#" class="prev"><b></b> 上一页</a>
			<a href="#" class="current">1</a>
			<a href="#">2</a>
			<a href="#">3</a>
			<span>...</span>
			<a href="#">13</a>
			<span class="next"><b></b> 下一页</span>
			<a href="#" class="next"><b></b> 下一页</a>
			<div>跳转至<input type="text">页
			<input type="button" value="确定" class="pagesubmit">
			</div>
		</div>
	</div>
</body>
</html>




returningorder.ftl
<#include "/common/common.ftl">
<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>退款中的订单</title>
	<link rel="stylesheet" type="text/css" href="${ctxPath}/havesellbaby/css/common.css">
	<link rel="stylesheet" type="text/css" href="${ctxPath}/havesellbaby/css/dispatch.css">
	<script type="text/javascript" src="${ctxPath}/havesellbaby/js/jquery.js"></script>
	<script src="${ctxPath}/havesellbaby/js/calendar.js" type="text/javascript"></script>
</head>

<body>
	<div class="dataTable dataTable22 mt10">
		<table class="changeColor">
			<thead>
				<tr>
					<th width="207">宝贝</th>
					<th width="100">单价(元)</th>
					<th width="108">数量</th>
					<th width="100">售后</th>
					<th width="150">买家</th>
					<th width="130">交易状态</th>
					<th width="120">实收款(元)</th>
					<th width="100">评价</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td colspan="8">
						<div class="liulanArea">
							<div class="liulanAreaLeft new-liulanAreaLeft">
								<input type="checkbox" class="vmiddle"/> 全选
								<a href="javascript://" class="ml10" onclick="myOpen.uCenter.popOpen('MUC_pop16', myOpen.uCenter.pop16);">批量发货</a>
								<a href="javascript://">批量备忘</a>
							</div>
							<div class="liulanAreaRight">
								<a href="javascript://" class="noContent">上一页</a>
								<a href="javascript://">下一页</a>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="8" style="height:25px;">
						<div class="cellCheck">
							<em title="买家要求13号再次发货,小龙" class="disabled-flag"></em>
							<input type="checkbox" />
							<span>订单编号:700966589001004588ZE18</span>
							<span>成交时间:2012-12-24   16:24:45</span>
						</div>
					</td>
				</tr>
				<tr>
					<td width="77" class="wrapp">
						<div class="smallPic smallPic180">
							<a href="#" target="_blank"><a href="#" target="_blank"><img src="temp/ucTemp01.jpg" width="60" height="60" alt="商品名称"/></a></a>
							<div class="proDtial">
								<p class="proTitle" title="完整内容"><a href="#" title="" target="_blank">牛奶小雪人奶酪制品现货新品牛奶小雪人奶酪制品 现货 新品奶酪制品现货新品牛奶小</a></p>
								<p class="mt10">商家编码:123</p>
							</div>
						</div>
					</td>
					<td width="77" class="wrapp" class="thm">50.00</td>
					<td><b>1</b></td>
					<td><em class="clock"></em><a href="" title="" target="_blank">退款</a></td>
					<td>
						<i>xiaolong43434343434</i>
						<a href="#" title="查询该买家订单" target="_blank" class="chaxun-maijia"></a>
					</td>								
					<td>
						<span class="cf60">买家已付款</span><br/>
						<a href="javascript://">详情</a><br/>
						<a href="javascript:;" class="uiBtn case7"><span>发货</span></a><br/>
					</td>
					<td>
						<b class="thm">0.55</b><br/>
						<em>含快递:0.00</em>
					</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td colspan="8">
						<div class="bottomMoreButton">
							<span class="bottomAllChecked"><input type="checkbox" /> 全选</span>
							<a href="javascript://" onclick="myOpen.uCenter.popOpen('MUC_pop16', myOpen.uCenter.pop16);">批量发货</a>
							<a href="javascript://">批量备忘</a>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<!--页码-->
		<div class="snPages mt10">
			<span class="prev"><b></b> 上一页</span>
			<a href="#" class="prev"><b></b> 上一页</a>
			<a href="#" class="current">1</a>
			<a href="#">2</a>
			<a href="#">3</a>
			<span>...</span>
			<a href="#">13</a>
			<span class="next"><b></b> 下一页</span>
			<a href="#" class="next"><b></b> 下一页</a>
			<div>跳转至<input type="text">页
			<input type="button" value="确定" class="pagesubmit">
			</div>
		</div>
	</div>
</body>
</html>




successorder.ftl
<#include "/common/common.ftl">
<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>成功的订单</title>
	<link rel="stylesheet" type="text/css" href="${ctxPath}/havesellbaby/css/common.css">
	<link rel="stylesheet" type="text/css" href="${ctxPath}/havesellbaby/css/dispatch.css">
	<script type="text/javascript" src="${ctxPath}/havesellbaby/js/jquery.js"></script>
	<script src="${ctxPath}/havesellbaby/js/calendar.js" type="text/javascript"></script>
</head>

<body>
	<div class="dataTable dataTable22 mt10">
		<table class="changeColor">
			<thead>
				<tr>
					<th width="207">宝贝</th>
					<th width="100">单价(元)</th>
					<th width="108">数量</th>
					<th width="100">售后</th>
					<th width="150">买家</th>
					<th width="130">交易状态</th>
					<th width="120">实收款(元)</th>
					<th width="100">评价</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td colspan="8">
						<div class="liulanArea">
							<div class="liulanAreaLeft new-liulanAreaLeft">
								<input type="checkbox" class="vmiddle"/> 全选
								<a href="javascript://" class="ml10" onclick="myOpen.uCenter.popOpen('MUC_pop16', myOpen.uCenter.pop16);">批量发货</a>
								<a href="javascript://">批量备忘</a>
							</div>
							<div class="liulanAreaRight">
								<a href="javascript://" class="noContent">上一页</a>
								<a href="javascript://">下一页</a>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="8" style="height:25px;">
						<div class="cellCheck">
							<em title="暂时没有备忘信息" class="disabled-flag green-flag"></em>
							<input type="checkbox" />
							<span>订单编号:700966589001004588ZE18</span>
							<span>成交时间:2012-12-24   16:24:45</span>
						</div>
					</td>
				</tr>
				<tr>
					<td width="77" class="wrapp">
						<div class="smallPic smallPic180">
							<a href="#" target="_blank"><a href="#" target="_blank"><img src="temp/ucTemp01.jpg" width="60" height="60" alt="商品名称"/></a></a>
							<div class="proDtial">
								<p class="proTitle" title="完整内容"><a href="#" title="" target="_blank">牛奶小雪人奶酪制品现货新品牛奶小雪人奶酪制品 现货 新品奶酪制品现货新品牛奶小</a></p>
								<p class="mt10">商家编码:123</p>
							</div>
						</div>
					</td>
					<td width="77" class="wrapp" class="thm">50.00</td>
					<td><b>1</b></td>
					<td>&nbsp;</td>
					<td>
						<i>xiaolong43434343434</i>
						<a href="#" title="查询该买家订单" target="_blank" class="chaxun-maijia"></a>
					</td>
					<td>
						<span class="c4a0">交易成功</span><br/>
						<a href="javascript://">详情</a>
					</td>
					<td>
						<b class="thm">0.55</b><br/>
						<em>含快递:0.00</em><br/>
						<a href="" title="" target="_blank">查看物流</a>
					</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td colspan="8">
						<div class="bottomMoreButton">
							<span class="bottomAllChecked"><input type="checkbox" /> 全选</span>
							<a href="javascript://" onclick="myOpen.uCenter.popOpen('MUC_pop16', myOpen.uCenter.pop16);">批量发货</a>
							<a href="javascript://">批量备忘</a>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<!--页码-->
		<div class="snPages mt10">
			<span class="prev"><b></b> 上一页</span>
			<a href="#" class="prev"><b></b> 上一页</a>
			<a href="#" class="current">1</a>
			<a href="#">2</a>
			<a href="#">3</a>
			<span>...</span>
			<a href="#">13</a>
			<span class="next"><b></b> 下一页</span>
			<a href="#" class="next"><b></b> 下一页</a>
			<div>跳转至<input type="text">页
			<input type="button" value="确定" class="pagesubmit">
			</div>
		</div>
	</div>
</body>
</html>



threebeforeorder.ftl
<#include "/common/common.ftl">
<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>三个月前的订单</title>
	<link rel="stylesheet" type="text/css" href="${ctxPath}/havesellbaby/css/common.css">
	<link rel="stylesheet" type="text/css" href="${ctxPath}/havesellbaby/css/dispatch.css">
	<script type="text/javascript" src="${ctxPath}/havesellbaby/js/jquery.js"></script>
	<script src="${ctxPath}/havesellbaby/js/calendar.js" type="text/javascript"></script>
</head>

<body>
	<div class="dataTable dataTable22 mt10">
		<table class="changeColor">
			<thead>
				<tr>
					<th width="207">宝贝</th>
					<th width="100">单价(元)</th>
					<th width="108">数量</th>
					<th width="100">售后</th>
					<th width="150">买家</th>
					<th width="130">交易状态</th>
					<th width="120">实收款(元)</th>
					<th width="100">评价</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td colspan="8">
						<div class="liulanArea">
							<div class="liulanAreaRight">
								<a href="javascript://" class="noContent">上一页</a>
								<a href="javascript://">下一页</a>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="8" style="height:25px;">
						<div class="cellCheck">
							<span>订单编号:700966589001004588ZE18</span>
							<span>成交时间:2012-12-24   16:24:45</span>
						</div>
					</td>
				</tr>
				<tr>
					<td width="77" class="wrapp">
						<div class="smallPic smallPic180">
							<a href="#" target="_blank"><a href="#" target="_blank"><img src="temp/ucTemp01.jpg" width="60" height="60" alt="商品名称"/></a></a>
							<div class="proDtial">
								<p class="proTitle" title="完整内容"><a href="#" title="" target="_blank">牛奶小雪人奶酪制品现货新品牛奶小雪人奶酪制品 现货 新品奶酪制品现货新品牛奶小</a></p>
							</div>
						</div>
					</td>
					<td width="77" class="wrapp" class="thm">50.00</td>
					<td><b>1</b></td>
					<td>&nbsp;</td>
					<td>
						<i>xiaolong43434343434</i>
						<a href="#" title="查询该买家订单" target="_blank" class="chaxun-maijia"></a>
					</td>
					<td>
						<span>交易关闭</span><br/>
						<a href="javascript://">详情</a><br/>
					</td>
					<td>
						<b class="thm">0.55</b><br/>
						<em>含快递:0.00</em><br/>
					</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td colspan="8" style="height:25px;">
						<div class="cellCheck">
							<span>订单编号:700966589001004588ZE18</span>
							<span>成交时间:2012-12-24   16:24:45</span>
						</div>
					</td>
				</tr>
				<tr>
					<td width="77" class="wrapp">
						<div class="smallPic smallPic180">
							<a href="#" target="_blank"><a href="#" target="_blank"><img src="temp/ucTemp01.jpg" width="60" height="60" alt="商品名称"/></a></a>
							<div class="proDtial">
								<p class="proTitle" title="完整内容"><a href="#" title="" target="_blank">牛奶小雪人奶酪制品现货新品牛奶小雪人奶酪制品 现货 新品奶酪制品现货新品牛奶小</a></p>
							</div>
						</div>
					</td>
					<td width="77" class="wrapp" class="thm">50.00</td>
					<td><b>1</b></td>
					<td>&nbsp;</td>
					<td>
						<i>xiaolong43434343434</i>
						<a href="#" title="查询该买家订单" target="_blank" class="chaxun-maijia"></a>
					</td>
					<td>
						<span class="c4a0">交易成功</span><br/>
						<a href="javascript://">详情</a><br/>
					</td>
					<td>
						<b class="thm">0.55</b><br/>
						<em>含快递:0.00</em><br/>
					</td>
					<td>&nbsp;</td>
				</tr>
			</tbody>
		</table>
		<!--页码-->
		<div class="snPages mt10">
			<span class="prev"><b></b> 上一页</span>
			<a href="#" class="prev"><b></b> 上一页</a>
			<a href="#" class="current">1</a>
			<a href="#">2</a>
			<a href="#">3</a>
			<span>...</span>
			<a href="#">13</a>
			<span class="next"><b></b> 下一页</span>
			<a href="#" class="next"><b></b> 下一页</a>
			<div>跳转至<input type="text">页
			<input type="button" value="确定" class="pagesubmit">
			</div>
		</div>
	</div>
</body>
</html>



common.ftl
<#assign ctxPath=request.contextPath>
<#setting number_format="#">

分享到:
评论

相关推荐

    vue 页面tabs切换,替换iframe

    在Vue.js应用中,开发人员经常需要实现动态的页面切换效果,例如在多个Tab之间进行导航。在这种场景下,原始的iframe技术可能会显得过时,因为它通常不支持单页应用(SPA)的特性,如路由管理和组件状态管理。标题...

    JQUERY实现iframe页面切换功能

    要使用jQuery实现iframe页面切换,我们首先需要在HTML中设置一个iframe元素,并为其定义一个id,以便于后续的jQuery选择器能够找到它: ```html &lt;iframe id="myIframe" src="初始页面URL"&gt;&lt;/iframe&gt; ``` 接下来,...

    基于js的iframe 可关闭tab标签组件使用方法

    本教程将详细讲解如何使用JavaScript实现一个可关闭的iframe内嵌tab标签组件。这个组件能够帮助用户在同一个页面中方便地切换和管理多个内容区域,而无需刷新整个页面。 首先,`iframe`是HTML5中的一个元素,它允许...

    jquery tab 切换页面 支持iframe

    标题"jquery tab 切换页面 支持iframe"所指的就是如何在jQuery Tab组件中嵌入和切换`iframe`内容。 jQuery Tab的基本原理是通过JavaScript和CSS来创建一个可交互的导航条,每个选项对应一个内容区域。当用户点击...

    基于iframe的js动态标签tab

    在网页开发中,"基于iframe的js动态标签tab"是一个常见的功能实现,它结合了JavaScript、IFrame和Tab标签页的特性,为用户提供了一个交互式的浏览体验。这种技术主要用于在单个页面上加载和切换多个独立的内容区域,...

    jquery iframe tab实例(5个不同tab实例)

    本实例探讨的是如何利用jQuery实现一个基于iframe的tab切换功能,这在需要在一个页面中展示多个独立内容区域时非常有用。我们将深入讨论五个不同的jQuery iframe tab实例,每个实例都有其独特的特性和应用场景。 ##...

    dcat-iframe-tab:在dcat-admin中使用iframe作为页面架构并发布标签页使页面切换无需刷新

    使用此扩展包可以构建出一个iframe架构并带有标签页管理的后台框架。 功能 双击关闭标签页 当标签页过多时,可通过鼠标滚轮选择或者按住鼠标拖动 支持右键操作(目前支持的操作有:关闭所有标签、关闭其他标签、刷新...

    vue下iframe标签页,切换标签页,iframe不重载

    vue项目中一个模板组件,不同iframe的src地址,对应不同的路由,不同标签页,且切换标签页不重载。这种客户的要求是特例在网上没有,所以纯自行手码。由于项目在vuex保存了标签页,所以初次进入该组件时,调用了一次...

    iframe 实现页面跳转 动态改变主题

    "iframe实现页面跳转"这个话题涉及到如何利用iframe来实现在不刷新整个页面的情况下,动态加载不同的网页内容,从而提供更好的用户体验。 首先,iframe的使用方式是在HTML代码中插入`&lt;iframe&gt;`标签,指定其`src`...

    在vue中实现嵌套页面(iframe)

    在Vue.js中实现嵌套页面通常涉及到使用`iframe`元素来加载外部网页或者内部组件。`iframe`允许我们在一个Vue应用中嵌入另一个独立的HTML文档,这对于展示第三方内容、实现某些特定功能或者处理复杂交互场景时非常...

    JS页面跳转和js对iframe进行页面跳转、刷新

    在iframe内实现页面跳转通常使用`iframe.contentWindow.location.href`或`iframe.contentDocument.location.href`,具体取决于浏览器的兼容性。 ```javascript var iframe = document.getElementById('myIframe'); ...

    基于bootstrap用iframe实现的局部刷新的案例

    在这个“基于bootstrap用iframe实现的局部刷新的案例”中,我们将探讨如何利用Bootstrap结合JavaScript(特别是与标签相关的操作)以及iframe元素来实现页面的局部刷新和tab页切换效果。 首先,Bootstrap的Tab组件...

    vue tabs实现页面切换

    类似easyui的tabs实现页面切换,之前使用iframe,vue里面ie的兼容不是特别友好所以改为route-view

    layui点击导航栏刷新tab页的示例代码

    Layui的tab组件是该框架中非常实用的一个组件,它允许开发者在页面上创建多个可切换的标签页。然而,Layui的tab组件默认情况下在切换标签页时并不会刷新内容,有时这种默认行为并不满足开发者的实际需求,比如在某些...

    easyui iframe 页面重复加载的问题

    在使用easyui框架开发Web应用时,特别是在使用tab布局的时候,开发者可能会遇到页面内容被放置在iframe中时,页面多次加载的问题。这种情况尤其会在使用easyui的tab布局时发生,因为easyui会默认加载所有tab的内容,...

    bootstarp+iframe 实现局部刷新 后台模板

    在后台模板中,`iframe`通常被用来承载各个功能模块,如数据管理、设置等,这样当用户在不同模块间切换时,只需要加载`iframe`内的内容,而不是整个页面,实现了局部刷新的效果。 选项卡功能是另一种提高用户交互性...

    基于Vue实现tab栏切换内容不断实时刷新数据功能

    本篇文章将详细介绍如何使用Vue来实现Tab栏切换时内容不断实时刷新数据的功能。 首先,理解产品需求:有多个Tab(例如5个),每个Tab对应不同的Ajax请求,内容区域相同,数据需要每3秒刷新一次。当用户切换Tab时,...

    jquery横排页签Tab+iframe代码示例

    本示例将详细介绍如何使用jQuery实现横排页签,并结合iframe进行内容展示。jQuery是一款轻量级的JavaScript库,它简化了DOM操作、事件处理、动画效果等功能,使得开发者能更高效地编写JavaScript代码。 首先,我们...

    TabDemo(支持iframe修改)

    在IT行业中,网页开发是一项重要的工作,而"TabDemo(支持iframe修改)"是一个关于使用jQuery实现的tab切换功能,特别优化了对iframe的支持。这个项目旨在帮助开发者在网页上创建一个用户友好的导航结构,通过点击不同...

Global site tag (gtag.js) - Google Analytics