当前位置:首页 > 开发 > 编程语言 > 编程 > 正文

使用Iframe实现TAB页面切换

发表于: 2014-05-15   作者:13813962825   来源:转载   浏览:
tab
摘要: package com.it.springweb.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.servlet.Mode
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="#">

使用Iframe实现TAB页面切换

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
http://www.cnblogs.com/Highestop/archive/2012/11/07/2759617.html 首先先给出昨天做好的 QA 部分
div+css实现tab切换 ——我一直不太信任自己的记忆力,所以我把它们都写下来 为了方便你们查看,css
  紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案      如果采用ifr
我有点想要吐槽,因为用原生的js实现起来挺简单的一个小东西,改用react来写却花了我不少时间,也许
1.Activity 加载布局文件,获取Viewpager控件 给ViewPager填充适配器. import android.app.ActionBar
在iOS的程序中,Tab Bar的使用率很高,几个视图需要切换的时候,就用到tabbar。 今天的程序实现的效
上一篇文章提到了多视图程序中各个视图之间的切换,用的Tool Bar,说白了还是根据触发事件使用代码
上一篇文章提到了多视图程序中各个视图之间的切换,用的Tool Bar,说白了还是根据触发事件使用代码
上一篇文章提到了多视图程序中各个视图之间的切换,用的Tool Bar,说白了还是根据触发事件使用代码
上一篇文章提到了多视图程序中各个视图之间的切换,用的Tool Bar,说白了还是根据触发事件使用代码
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号