欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

使用Iframe实现TAB页面切换 博客分类： js TAB 

程序员文章站 2024-03-11 12:33:37
...
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="#">
相关标签： TAB

上一篇： jquery ui tabs奇怪情况！！！--已解决 博客分类： jquery jquerytab 

下一篇： My97DatePicker时间控件使用 博客分类： JavaScriptJAVA My97DatePicker时间 

推荐阅读