`

使用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="#">

分享到:
评论

相关推荐

    JQUERY实现iframe页面切换功能

    JQUERY实现iframe页面切换功能,轻松简单、灵活方便快速,代码实例,测试通过

    vue 页面tabs切换,替换iframe

    vue页面tab切换,替换原来的iframe实现,利用vue的router-view和keep-alive实现

    jquery tab 切换页面 支持iframe

    jquery tab 切换页面 支持iframe 有iframe引用示例

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

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

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

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

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

    主要介绍了在vue中实现嵌套页面(iframe),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

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

    页面框架+tab标签页+换肤

    功能介绍: 1、可以换皮肤、其中住框架、具体页面可以统一使用皮肤。 2、tab页标题有右键菜单,新开、...tabControl新开一个页面实际上是通过JS在主显示区域建立一个iframe 把这个iframe的src 指向我们指定的页面。

    Tab可切换皮肤的后台模板

    功能介绍: 1、可以换皮肤、其中住框架、具体页面可以统一使用皮肤。 2、tab页标题有右键菜单,新开、...tabControl新开一个页面实际上是通过JS在主显示区域建立一个iframe 把这个iframe的src 指向我们指定的页面。

    TabDemo(支持iframe修改)

    jquery tab 切换页面 支持iframe 有iframe引用示例.

    vue Tab切换以及缓存页面处理的几种方式

    相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到。如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样。 1.如何切换 使用动态组件,相信大家都能看懂(部分代码省略) //通过点击就...

    layui easyweb iframe v3.1.8源码

    [优化] 切换tab自动刷新支持每个子页面自定义刷新方法,可实现切换tab只重载表格 [优化] treeTable升级(增加toolbar、筛选列、拖拽列宽等)、dataGrid重构(兼容旧版) [优化] 页面层弹窗也支持tpl:true,弹窗开启tpl会...

    js实现的Muti TabPage切换

    在很多后台管理系统中,有类似多个TagePage切换页的效果,这里是一个js实现的版本,可以实现TabPage 翻页,切换Tab选项卡,新增Tab,删除Tab等,供学习了解之用!

    Tab可切换皮肤的后台模板.rar

    tabControl新开一个页面实际上是通过JS在主显示区域建立一个iframe 把这个iframe的src 指向我们指定的页面。 讨厌的BUG: 这个BUG一直都困饶了我好长时间,并且实在不知道怎么解决,甚至连问题出在哪里都不知道。 ...

    Vue集成Iframe页面的方法示例

    针对这个问题,我们最开始的实现思路是写了一个iframe的通用组件,然后把不同的http的页面的url传递进来进行切换,但是这样不满足第二条,我们发现只要切换了vue的路由,然后再切回http的页面,iframe中的src属性的...

    Vue页面刷新记住页面状态的实现

    主要介绍了Vue页面刷新记住页面状态的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...

    ExtAspNet_v2.3.2_dll

    -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...

    超实用的jQuery代码段

    10.22 在页面切换时显示加载进度框 10.23 在屏幕旋转时更改显示样式 10.24 在列表框中实现加载更多效果 10.25 自定义选择菜单 10.26 使用多个选择菜单进行组合选择 10.27 使用多选菜单选择多个值 10.28 创建双重范围...

Global site tag (gtag.js) - Google Analytics