You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

214 lines
7.7 KiB
HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Track Search</title>
<script src="Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/Global.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
$(document).ready(function () {
ajaxInit(null);
$("#txt_trackcode").bind("focus", function () {
$(this).val("");
});
$("#a_clear").bind("click", function () {
$("#txt_trackcode").val("Enter the tracking code");
});
$("#a_sch").bind("click", function () {
if ($("#txt_trackcode").val() == "" || $("#txt_trackcode").val() == "Enter the tracking code") {
alert("Please Enter the tracking code");
return;
}
Sch();
});
});
function Sch() {
var param = new Object();
param.Code = $("#txt_trackcode").val();
var shtml = new Sys.StringBuilder();
$.ajax({
url: "UserService.asmx/GetTrackModel",
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
cache: false,
success: function (data) {
if (data.d != null) {
shtml.append("<ul>");
$(data.d).each(function (i) {
if (i == 0) {
$("#a_code").html($("#txt_trackcode").val());
$("#a_from").html("China");
$("#a_country").html(this.Country);
shtml.append("<li class='last'><a><span class='datetime'>" + this.InDate + "</span><span>" + this.Content + "</span></a></li>");
}
else if (i == $(data.d).length - 1) {
shtml.append("<li class='first'><a><span class='datetime'>" + this.InDate + "</span><span>" + this.Content + "</span></a></li>");
}
else
shtml.append("<li><a><span class='datetime'>" + this.InDate + "</span><span>" + this.Content + "</span></a></li>");
});
shtml.append("</ul>");
$("#div_result").html(shtml.toString());
}
else {
alert("Not Found");
$("#div_result").html("");
$("#a_code").html("Unknown");
$("#a_from").html("Unknown");
$("#a_country").html("Unknown");
return;
}
}
});
//shtml.append("<ul><li class='last'><a href='' target='_self'><span class='datetime'>2015-04-02 14:20 </span><span>Latvia, Delivery point: Carnikava PN, PP-2163, Item delivered</span></a></li>");
//shtml.append("<li><a href='' target='_self'><span class='datetime'>2015-06-03</span><span>Latvia, Delivery point: Carnikava PN, PP-2163, Delivered information notice</span></a></li>");
//shtml.append("<li><a href='' target='_self'><span class='datetime'>2015-06-03</span><span>Latvia, Delivery point: Carnikava PN, PP-2163, Delivered information notice</span></a></li>");
//shtml.append("<li><a href='' target='_self'><span class='datetime'>2015-06-03</span><span>Latvia, Delivery point: Carnikava PN, PP-2163, Item received at Delivery point: Carnikava PN, PP-2163</span></a></li>");
//shtml.append("<li><a href='' target='_self'><span class='datetime'>2015-06-03</span><span>Latvia, Sorting centre - Riga, Item sent to Delivery point: PP-2163</span></a></li>");
//shtml.append("<li class='first'><a href='' target='_self'><span class='datetime'>2015-06-03</span><span>Latvia, Sorting centre - Riga, Item received at Sorting centre - Riga</span></a></li></ul>");
}
</script>
<style type="text/css">
.centre {
width: 800px;
float: left;
margin: 0px;
}
.button {
float: right;
margin: 5px;
}
.box {
float: left;
}
.content ul {
width: 508px;
margin: 0;
float: left;
}
.content ul li {
float: left;
width: 508px;
margin: 0px;
list-style: none none outside;
line-height: 24px;
background: url(TrackImage/t2.jpg) repeat-y left top;
}
.content ul li a {
float: left;
text-align: left;
color: #555555;
overflow: hidden;
text-overflow: ellipsis;
background: url(TrackImage/t3.jpg) no-repeat left 5px;
}
.content ul li a:hover {
color: #b43431;
}
.content ul li a span {
float: right;
color: #555555;
width: 460px;
text-align: left;
line-height: 24px;
display: block;
}
.content ul li a span.datetime {
height: 24px;
}
.content ul li.first {
background: none;
}
.content ul li.first a {
background: url(TrackImage/t4.jpg) no-repeat left top;
}
.content ul li.last a {
background: url(TrackImage/t1.jpg) no-repeat left top;
}
</style>
<body>
<div class="centre">
<div class="box">
<textarea id="txt_trackcode" cols="80" rows="10" style="height: 200px; border-color: #EBEBEB; border-width: 1px; overflow: hidden">Enter the tracking code</textarea>
</div>
<div class="button">
<a id="a_clear" style="cursor: pointer">
<img src="TrackImage/bt1.jpg" alt="" />
</a>
<br />
<a id="a_sch" style="cursor: pointer">
<img src="TrackImage/bt2.jpg" alt="" />
</a>
</div>
<div>
<div>
<div>
<table>
<tr>
<td>
<img alt="" src="TrackImage/t10.png" />
</td>
<td width="150px"><span style="font-family:微软雅黑;font-size:14pt;color:#939393">Number</span><br /><a id="a_code"></a></td>
<td>
<img alt="" src="TrackImage/t11.png" />
</td>
<td width="150px"><span style="font-family:微软雅黑;font-size:14pt;color:#939393">Origin</span><br /><a id="a_from"></a></td>
<td>
<img alt="" src="TrackImage/t12.png" />
</td>
<td><span style="font-family:微软雅黑;font-size:14pt;color:#939393">Destination</span><br /><a id="a_country"></a></td>
</tr>
</table>
</div>
<div id="div_result" class="content">
</div>
</div>
</div>
</div>
</body>
</html>