HTML+JS
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyCost.aspx.cs" Inherits="hlySpecial.Expense.MyCost" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
<title>我的報銷</title>
<script src="../dist/Model/jquery-2.1.4.js"></script>
<script>
$(function () {
var page_url;
//初始化URL參數
InitUrlParms = function () {
var args = new Object();
var query = location.search.substring(1);//獲取查詢串
var pairs = query.split("&");//在逗號處斷開
for (var i = 0; i < pairs.length; i++) {
var pos = pairs[i].indexOf('=');//查找name=value
if (pos == -1) continue;//如果沒有找到就跳過
var argname = pairs[i].substring(0, pos);//提取name
var value = pairs[i].substring(pos + 1);//提取value
args[argname] = decodeURIComponent(value);//存爲屬性
}
page_url = args;
};//封裝好的函數，獲取從a.html傳來的參數type
InitUrlParms();
//底部鏈接跳轉到指定tab塊
if (page_url["type"] != null) {
var tabIndex = page_url["type"];
} else {
var tabIndex = 0;
}
if (tabIndex > 0) {
$('.mui-control-item').eq(tabIndex).addClass('mui-active').siblings().removeClass('mui-active');
$('.mui-control-content').eq(tabIndex).addClass('mui-active').siblings().removeClass('mui-active');
}
})
</script>
<link href="../boostrap/bootstrap.css" rel="stylesheet" />
<link href="../dist/Model/weui.min.css" rel="stylesheet" />
<link href="../dist/Model/jquery-weui.css" rel="stylesheet" />
<link href="../dist/Model/demos.css" rel="stylesheet" />
<link href="../ExceptionTalk/css/mui.min.css" rel="stylesheet" />
<script src="../ExceptionTalk/js/mui.min.js"></script>
<script src="../dist/Model/jquery-2.1.4.js"></script>
<script src="../dist/Model/fastclick.js"></script>
<script src="../dist/Model/jquery-weui.js"></script>
<script src="../js/MUI/PullToRefresh/mui.pullToRefresh.js"></script>
<script src="../js/MUI/PullToRefresh/mui.pullToRefresh.material.js"></script>
<style>
html,
body { background-color: #efeff4; }
.mui-bar ~ .mui-content .mui-fullscreen { top: 44px; height: auto; }
.mui-pull-top-tips { position: absolute; top: -20px; left: 50%; margin-left: -25px; width: 40px; height: 40px; border-radius: 100%; z-index: 1; }
.mui-bar ~ .mui-pull-top-tips { top: 24px; }
.mui-pull-top-wrapper { width: 42px; height: 42px; display: block; text-align: center; background-color: #efeff4; border: 1px solid #ddd; border-radius: 25px; background-clip: padding-box; box-shadow: 0 4px 10px #bbb; overflow: hidden; }
.mui-pull-top-tips.mui-transitioning { -webkit-transition-duration: 200ms; transition-duration: 200ms; }
.mui-pull-top-tips .mui-pull-loading { /*-webkit-backface-visibility: hidden;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;*/ margin: 0; }
.mui-pull-top-wrapper .mui-icon,
.mui-pull-top-wrapper .mui-spinner { margin-top: 7px; }
.mui-pull-top-wrapper .mui-icon.mui-reverse { /*-webkit-transform: rotate(180deg) translateZ(0);*/ }
.mui-pull-bottom-tips { text-align: center; background-color: #efeff4; font-size: 15px; line-height: 40px; color: #777; }
.mui-pull-top-canvas { overflow: hidden; background-color: #fafafa; border-radius: 40px; box-shadow: 0 4px 10px #bbb; width: 40px; height: 40px; margin: 0 auto; }
.mui-pull-top-canvas canvas { width: 40px; }
.mui-slider-indicator.mui-segmented-control { background-color: #efeff4; }
.mui-control-content.mui-active {display: inline-block!important;}
</style>
</head>
<body>
<div class="mui-content">
<div id="slider" class="mui-slider mui-fullscreen">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item mui-active" href="#item1mobile">雜費報銷
</a>
<a class="mui-control-item" href="#item2mobile">發貨報銷
</a>
<a class="mui-control-item" href="#item3mobile">匯款申請
</a>
<a class="mui-control-item" href="#item4mobile">發票上傳
</a>
</div>
<div class="mui-slider-group">
<div id="item1mobile" class="md-f1 mui-slider-item mui-control-content detailInfos md-box md-ver mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul id="CCJLUl" class="mui-table-view">
</ul>
</div>
</div>
</div>
<div id="item2mobile" class="bg md-f1 mui-slider-item mui-control-content detailInfos1 md-box md-ver">
<div id="swop01" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul id="CCJLU2" class="mui-table-view">
</ul>
</div>
</div>
</div>
<div id="item3mobile" class="bg md-f1 mui-slider-item mui-control-content detailInfos3 md-box md-ver">
<div id="swop03" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul id="CCJLU3" class="mui-table-view">
</ul>
</div>
</div>
</div>
<div id="item4mobile" class="bg md-f1 mui-slider-item mui-control-content detailInfos4 md-box md-ver">
<div id="swop" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul id="CCJLU4" class="mui-table-view">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
mui.init({
swipeBack: false,
gestureConfig: {
tap: true//默認爲false
}
});
//加載雜費報銷
function QueryOutCar() {
var listView = document.getElementById('CCJLUl');
listView.appendChild(createFragment(listView, 0));
}
//加載發貨報銷
function QueryCCJLU2() {
var listView = document.getElementById('CCJLU2');
listView.appendChild(createFragment(listView, 1));
}
//加載匯款
function QueryCCJLU3() {
var listView = document.getElementById('CCJLU3');
listView.appendChild(createFragment(listView, 2));
}
//加載匯款
function QueryCCJLU4() {
var listView = document.getElementById('CCJLU4');
listView.appendChild(createFragment(listView, 3));
}
//雜費報銷
var createFragment = (function (ul, index, count, reverse) {
switch(index) {
case 0:
var temp = document.getElementById("CCJLUl");
var length = temp.getElementsByTagName("li").length / 2;
var Pg = Math.round(length / 10) + 1;//分頁
var fragment = document.createDocumentFragment();
$.ajax({
async: false, type: "get", url: "Handler.ashx?action=OtherFeeBao",
data: { Page: Pg, rows: 10 }, dataType: "text",
success: function (res) {
res = JSON.parse(res);
for (var i = 0; i < res.length; i++) {
var li = document.createElement("li");
li.className = 'mui-table-view-cell';
li.id = res[i].uid;
if (res[i].returninuser != "") {
li.innerHTML = "<li id='" + res[i].uid + "' class='mui-table-view-cell' style='background-color: #00fB90; margin-top: 5px; border-radius: 2px;' ><div class='mui-table'><div class='mui-table-cell mui-col-xs-12'><p class='mui-h5 mui-ellipsis' style='color: #000000;'>編號：" + res[i].uid + "  報銷人：" + res[i].BaoUser + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>金額：" + res[i].money + " 當前審批：" + res[i].SPuser + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>耗時：" + res[i].stime + " 匯款編號：" + res[i].huikuanid + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>單據類型：" + res[i].Isinvoice + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>錄入：" + res[i].Indate + "[" + res[i].Inuser + "]</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>備註：" + res[i].other + "</p></div></div></li>";
li.addEventListener('tap', function (event) {
var oID = this.getAttribute("id");
location.href = "MyCostList.html?uid=" + oID;
})
}
fragment.appendChild(li);
}
}
});
break;
case 1:
var temp = document.getElementById("CCJLU2");
var length = temp.getElementsByTagName("li").length / 2;
var Pg = Math.round(length / 10) + 1;//分頁
var fragment = document.createDocumentFragment();
$.ajax({
async: false, type: "get", url: "Handler.ashx?action=OtherSend",
data: { Page: Pg, rows: 10 }, dataType: "text",
success: function (res) {
res = JSON.parse(res);
for (var i = 0; i < res.length; i++) {
var li = document.createElement("li");
li.className = 'mui-table-view-cell';
li.id = res[i].OtherSendID;
if (res[i].returninuser != "") { //Indatetime,,Inuser,Pbh,,,,Belongs,,passdate,overuser
li.innerHTML = "<li id='" + res[i].OtherSendID + "' class='mui-table-view-cell' style='background-color: #00ff90; margin-top: 5px; border-radius: 2px;' ><div class='mui-table'><div class='mui-table-cell mui-col-xs-12'><p class='mui-h5 mui-ellipsis' style='color: #000000;'>編號：" + res[i].OtherSendID + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>報銷人：" + res[i].Baouser + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>金額：" + res[i].money + " 報銷類型：" + res[i].BType + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>付款類型：" + res[i].Payment + " 外協公司：" + res[i].JCompany + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>錄入：" + res[i].Indatetime + "[" + res[i].Inuser + "]</p></div></div></li>";
li.addEventListener('tap', function (event) {
var oID = this.getAttribute("id");
location.href = "MyOtherSendList.html?OtherSendID=" + oID;
})
}
fragment.appendChild(li);
}
}
});
break;
case 2:
var temp = document.getElementById("CCJLU3");
var length = temp.getElementsByTagName("li").length / 2;
var Pg = Math.round(length / 10) + 1;//分頁
var fragment = document.createDocumentFragment();
$.ajax({
async: false, type: "get", url: "Handler.ashx?action=Remittance",
data: { Page: Pg, rows: 10 }, dataType: "text",
success: function (res) {
res = JSON.parse(res);
for (var i = 0; i < res.length; i++) {
var li = document.createElement("li");
li.className = 'mui-table-view-cell';
li.id = res[i].uid + "_" + res[i].Id;
if (res[i].img != "") { //Indatetime,,Inuser,Pbh,,,,Belongs,,passdate,overuser
li.innerHTML = "<li id='" + res[i].uid + "_" + res[i].Id + "' class='mui-table-view-cell' style='background-color: #C0CC33; margin-top: 5px; border-radius: 2px;' ><div class='mui-table'><div class='mui-table-cell mui-col-xs-12'><p class='mui-h5 mui-ellipsis' style='color: #000000;'>編號：" + res[i].uid + "  報銷人：" + res[i].BaoUser + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>金額：" + res[i].money + " 狀態：已上傳發票</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>消費說明：" + res[i].aOther + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>付款說明：" + res[i].huisay + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>錄入：" + res[i].Indate + "[" + res[i].Inuser + "]</p></div></div></li>";
li.addEventListener('tap', function (event) {
var oID = this.getAttribute("id");
location.href = "RemittanceDetail.html?oID=" + oID + "&type=匯款申請";
})
} else {
li.innerHTML = "<li id='" + res[i].uid + "_" + res[i].Id + "' class='mui-table-view-cell' style='background-color: #00ff90; margin-top: 5px; border-radius: 2px;' ><div class='mui-table'><div class='mui-table-cell mui-col-xs-12'><p class='mui-h5 mui-ellipsis' style='color: #000000;'>編號：" + res[i].uid + "  報銷人：" + res[i].BaoUser + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>金額：" + res[i].money + " 狀態：未上傳發票</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>消費說明：" + res[i].aOther + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>付款說明：" + res[i].huisay + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>錄入：" + res[i].Indate + "[" + res[i].Inuser + "]</p></div></div></li>";
li.addEventListener('tap', function (event) {
var oID = this.getAttribute("id");
location.href = "RemittanceDetail.html?oID=" + oID + "&type=匯款申請";
})
}
fragment.appendChild(li);
}
}
});
break ;
case 3:
var temp = document.getElementById("CCJL");
var length = temp.getElementsByTagName("li").length / 2;
var Pg = Math.round(length / 10) + 1;//分頁
var fragment = document.createDocumentFragment();
$.ajax({
async: false, type: "get", url: "Handler.ashx?action=QuerynInTheCar",
data: { Page: Pg, rows: 10 }, dataType: "text",
success: function (res) {
res = JSON.parse(res);
for (var i = 0; i < res.length; i++) {
var li = document.createElement("li");
li.className = 'mui-table-view-cell';
li.id = res[i].uid;
if (res[i].ApplyState == "") {
li.innerHTML = "<li id='" + res[i].uid + "' class='mui-table-view-cell' style='background-color:#B0E2FF; margin-top:5px;border-radius:2px;'><div id='" + res[i].CarState + "' class='mui-table'><div class='mui-table-cell mui-col-xs-12'><p class='mui-h5 mui-ellipsis' style='color:#000000;'>出車編號:" + res[i].uid + " 車牌號:" + res[i].carno + "</p><p class='mui-h5 mui-ellipsis' style='color:#000000;'>司機名稱:" + res[i].name + " 出車公里數:" + res[i].miles + "</p><p class='mui-h5 mui-ellipsis' style='color:#000000;'>出車時間:" + res[i].returnTime + "</p><p class='mui-h5 mui-ellipsis' style='color:#000000;'>車輛狀態:" + res[i].CarState + " 審覈狀態:" + res[i].ApplyState + "</p></div></div></li>";
li.addEventListener('tap', function (event) {
var btnArray = ['否', '是'];
var oID = this.getAttribute("id");
mui.confirm('確定申請換車', '系統提示', btnArray, function (e) {
if (e.index == 1) {
location.href = "ExchangeCar.aspx?uid=" + oID + "&state=1";
}
});
});
} else if (res[i].ApplyState == "申請換車") {
li.innerHTML = "<li id='" + res[i].uid + "' class='mui-table-view-cell' style='background-color:#CAE1FF; margin-top:5px;border-radius:2px;'><div id='" + res[i].CarState + "' class='mui-table'><div class='mui-table-cell mui-col-xs-12'><p class='mui-h5 mui-ellipsis' style='color:#000000;'>出車編號:" + res[i].uid + " 車牌號:" + res[i].carno + "</p><p class='mui-h5 mui-ellipsis' style='color:#000000;'>司機名稱:" + res[i].name + " 出車公里數:" + res[i].miles + "</p><p class='mui-h5 mui-ellipsis' style='color:#000000;'>出車時間:" + res[i].returnTime + "</p><p class='mui-h5 mui-ellipsis' style='color:#000000;'>車輛狀態:" + res[i].CarState + " 審覈狀態:" + res[i].ApplyState + "</p></div></div></li>";
li.addEventListener('tap', function (event) {
var btnArray = ['否', '是'];
mui.confirm('確定申請換車', '系統提示', btnArray, function (e) {
if (e.index == 1) {
$.alert('已申請換車,等待審覈中!');
}
});
});
}
else if (res[i].ApplyState == "同意申請") {
li.innerHTML = "<li id='" + res[i].uid + "' class='mui-table-view-cell' style='background-color:#9BCD9B; margin-top:5px;border-radius:2px;'><div id='" + res[i].Astate + "' class='mui-table'><div class='mui-table-cell mui-col-xs-12'><p class='mui-h5 mui-ellipsis' style='color:#000000;'>出車編號:" + res[i].uid + " 車牌號:" + res[i].carno + "</p><p class='mui-h5 mui-ellipsis' style='color:#000000;'>司機名稱:" + res[i].name + " 出車公里數:" + res[i].miles + "</p><p class='mui-h5 mui-ellipsis' style='color:#000000;'>出車時間:" + res[i].returnTime + "</p><p class='mui-h5 mui-ellipsis' style='color:#000000;'>車輛狀態:" + res[i].CarState + " 審覈狀態:" + res[i].ApplyState + "</p></div></div></li>";
li.addEventListener('tap', function (event) {
var btnArray = ['否', '是'];
var oID = this.getAttribute("id");
var state = this.firstElementChild.children[0].id;
if (state == 2) {
$.alert('請等待...!')
} else {
mui.confirm('確定進行換車操作', '系統提示', btnArray, function (e) {
if (e.index == 1) {
location.href = "ExchangeCar.aspx?uid=" + oID + "&state=0";
}
});
}
})
}
else if (res[i].ApplyState == "換車完成" || res[i].ApplyState == "拒絕換車") {
li.innerHTML = "<li id='" + res[i].uid + "' class='mui-table-view-cell' style='background-color:#5CACEE; margin-top:5px;border-radius:2px;'><div class='mui-table'><div class='mui-table-cell mui-col-xs-12'><p class='mui-h5 mui-ellipsis' style='color:#000000;'>出車編號:" + res[i].uid + " 車牌號:" + res[i].carno + "</p><p class='mui-h5 mui-ellipsis' style='color:#000000;'>司機名稱:" + res[i].name + " 出車公里數:" + res[i].miles + "</p><p class='mui-h5 mui-ellipsis' style='color:#000000;'>出車時間:" + res[i].returnTime + "</p><p class='mui-h5 mui-ellipsis' style='color:#000000;'>車輛狀態:" + res[i].CarState + " 審覈狀態:" + res[i].ApplyState + "</p></div></div></li>";
}
fragment.appendChild(li);
}
}
});
break;
default:
// 默認代碼塊
}
return fragment;
});
(function ($) {
QueryOutCar();
QueryCCJLU2();
QueryCCJLU3();
//QueryByExchangeCar();
//阻尼係數
var deceleration = mui.os.ios ? 0.003 : 0.0009;
$('.mui-scroll-wrapper').scroll({
bounce: false,
indicators: true, //是否顯示滾動條
deceleration: deceleration
});
$.ready(function () {
//循環初始化所有下拉刷新，上拉加載.
$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function (index, pullRefreshEl) {
if (index == 0) {
$(pullRefreshEl).pullToRefresh({
up: {
callback: function () {
var temp = document.getElementById("CCJLUl");
var length = temp.getElementsByTagName("li").length / 2;
var pg = Math.ceil(length / 10);
var self = this;
setTimeout(function () {
var ul = self.element.querySelector('.mui-table-view');
ul.appendChild(createFragment(ul, index));
if (length < pg * 10) {
self.endPullUpToRefresh(true);
} else {
self.endPullUpToRefresh();
}
}, 1000);
},
contentrefresh: '正在加載...', //上拉進行中提示信息
contentnomore: '沒有更多數據了' //上拉無更多信息時提示信息
}
});
}
else if (index == 1) {
$(pullRefreshEl).pullToRefresh({
up: {
callback: function () {
var temp = document.getElementById("CCJLU2");
var length = temp.getElementsByTagName("li").length / 2;
var pg = Math.ceil(length / 10);
var self = this;
setTimeout(function () {
var ul = self.element.querySelector('.mui-table-view');
ul.appendChild(createFragment(ul, index));
if (length < pg * 10) {
self.endPullUpToRefresh(true);
} else {
self.endPullUpToRefresh();
}
}, 1000);
},
contentrefresh: '正在加載...', //上拉進行中提示信息
contentnomore: '沒有更多數據了' //上拉無更多信息時提示信息
}
});
}
else if (index == 2) {
$(pullRefreshEl).pullToRefresh({
up: {
callback: function () {
var temp = document.getElementById("CCJLU3");
var length = temp.getElementsByTagName("li").length / 2;
var pg = Math.ceil(length / 10);
var self = this;
setTimeout(function () {
var ul = self.element.querySelector('.mui-table-view');
ul.appendChild(createFragment(ul, index));
if (length < pg * 10) {
self.endPullUpToRefresh(true);
} else {
self.endPullUpToRefresh();
}
}, 1000);
},
contentrefresh: '正在加載...', //上拉進行中提示信息
contentnomore: '沒有更多數據了' //上拉無更多信息時提示信息
}
});
}
//else if (index == 3) {
// $(pullRefreshEl).pullToRefresh({
// up: {
// callback: function () {
// var self = this;
// setTimeout(function () {
// var ul = self.element.querySelector('.mui-table-view');
// ul.appendChild(createFragment(ul, index));
// self.endPullUpToRefresh();
// }, 1000);
// }
// }
// });
//}
});
});
})(mui);
</script>
</body>
</html>
C#
/// <summary>
/// 雜費報銷
/// </summary>
/// <param name="context"></param>
public void OtherFeeBao(HttpContext context)
{
int page = Convert.ToInt32(context.Request["Page"]);
int rows = Convert.ToInt32(context.Request["rows"]);
HttpCookie cookie = context.Request.Cookies["inopenid"];
string openId = "";
string url = MyConvert.MyUrlCode(context.Request.Url, encode);
if (url.IndexOf("http://localhost") > -1)
{
openId = "成員的openId ";
}
else
{
openId = cookie.Value;//
}
string name =CommonClass.getName(openId);
//明細表 Tbl_OtherFeeBaoList
int index = rows * page;
List<Expense.Model.OtherFeeBao> lists = new List<Expense.Model.OtherFeeBao>();
if (name!="")
{
string selSQL = "select * from (select row_number() over(order by Indate desc) as rn,id,uid,BaoUser,YnSubmit,SubmitDate,SPID,SPuser,Indate,Inuser,BaoArea,State,TOPuser,other,huikuanid,DATEDIFF(hh,SubmitDate,CONVERT(varchar(30),getdate(),20)) as stime from tbl_OtherFeeBaoid where BaoUser ='" + name + "') d where d.rn between " + (index - 9) + " and " + index + "";
DataTable dt = DBL.DbHelperSQL.QueryDataTable(0, selSQL);
foreach (DataRow idr in dt.Rows)
{
lists.Add(new Expense.Model.OtherFeeBao
{
Id = Convert.ToInt32(idr["id"]),
uid = Convert.ToDecimal(idr["uid"]),
BaoUser = Convert.ToString(idr["BaoUser"]),
YnSubmit = Convert.ToString(idr["YnSubmit"]),
SubmitDate = Convert.ToString(idr["SubmitDate"]),
SPID = Convert.ToString(idr["SPID"]),
SPuser = Convert.ToString(idr["SPuser"]),
Indate = Convert.ToString(idr["Indate"]),
Inuser = Convert.ToString(idr["Inuser"]),
BaoArea = Convert.ToString(idr["BaoArea"]),
State = Convert.ToString(idr["State"]),
TOPuser = Convert.ToString(idr["TOPuser"]),
other = Convert.ToString(idr["other"]),
huikuanid = Convert.ToString(idr["huikuanid"]),
money = GetBaoMoney(idr["uid"].ToString()),
stime = Convert.ToString(idr["stime"]),
Isinvoice = GetBaotype(idr["uid"].ToString()),
});
}
}
else
{
lists.Add(new Expense.Model.OtherFeeBao
{
});
}
JavaScriptSerializer js = new JavaScriptSerializer();
context.Response.Write(js.Serialize(lists));
}
開頭的HTML+JS引用jquery後寫的一段js是爲了其他頁面跳轉到該頁面時能夠定位到相應的選項卡，在其他界面寫的跳轉頁面，跳轉後會自動定位到第三個選項卡
<a href="MyCost.aspx?type=2">跳轉頁面</a>