iFish/Light12306
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

一堆交互修改

Browse Source
This commit is contained in:
iFish 2014-08-19 23:29:14 +08:00
parent bbd48bc939
commit 3550302bfc
10 changed files with 209 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
Web12306/css/ui/city-selector.css
View File

@ -74,9 +74,9 @@
margin: 0 auto 50px auto;
overflow: hidden;
color: #7b848d;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
width: 390px;
padding-top: 1px;
padding-left: 1px;
}
#city_selector .city-list-container li {
@ -84,8 +84,9 @@
width: 25%;
line-height: 35px;
text-align: center;
border-left: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
border: 1px solid #e1e1e1;
margin-top: -1px;
margin-left: -1px;
box-sizing: border-box;
cursor: pointer;
}

4
Web12306/css/ui/date-selector.css
View File

@ -212,11 +212,11 @@
cursor: pointer;
}
.date-selector table td:active {
/*.date-selector table td:active {
background-color: #f78800;
color: #ffffff;
cursor: pointer;
}
}*/
.date-selector .date-current {
color: #f78800;

29
Web12306/css/ui/options-param.css
View File

@ -146,10 +146,16 @@
border-top: none;
}
.options-param .options-train-selectorwarp table tr:hover td {
.options-param .options-train-selectorwarp table tr:hover td,
.options-param .options-train-selectorwarp table tr.selected td {
background-color: #fff0d9;
}
.options-param .options-train-selectorwarp table tr.selected td {
background-color: #ddc299;
color: #fff;
}
.options-param .options-train-selectorwarp table tr:first-child:hover td {
background-color: #fff;
}
@ -157,7 +163,7 @@
.options-train-selectorwarp .options-seat-type-advlink {
color: #b05d23;
font-size: 12px;
margin-right: 10px;
margin-right: 5px;
text-decoration: underline;
}
@ -171,12 +177,13 @@
display: none;
}
.passenger-selector .passenger-selector-editor a{
color: #8b8b8b;
}
.passenger-selector .passenger-selector-editor a:hover{
text-decoration: underline;
}
.passenger-selector .passenger-selector-editor a {
color: #8b8b8b;
}
.passenger-selector .passenger-selector-editor a:hover {
text-decoration: underline;
}
.options-param .param-array label {
width: 170px;
@ -197,6 +204,6 @@
cursor: pointer;
}
#index-tip-body .order-num {
display: none;
}
#index-tip-body .order-num {
display: none;
}

12
Web12306/css/ui/passenger-selector.css
View File

@ -5,6 +5,7 @@
overflow: visible;
display: inline-block;
}
.passenger-selector-wrap section div.loading-indicator {
display: none;
}
@ -13,9 +14,11 @@
.passenger-selector-wrap section.loading .passenger-pager {
display: none;
}
.passenger-selector-wrap section.loading div.loading-indicator{
.passenger-selector-wrap section.loading div.loading-indicator {
display: block;
}
.passenger-selector {
position: absolute;
z-index: 100;
@ -86,8 +89,6 @@
.passenger-selector ul {
width: 300px;
margin-top: 12px;
border-left: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
}
.passenger-selector ul li {
@ -95,12 +96,13 @@
float: left;
width: 98px;
line-height: 35px;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
border: 1px solid #e1e1e1;
text-align: center;
color: #676767;
cursor: pointer;
position: relative;
margin-top: -1px;
margin-left: -1px;
}
.passenger-selector ul li.selected {

17
Web12306/index.html
View File

@ -109,6 +109,12 @@
</li>
</ul>
<ul class="search-traintypes">
<li>
<label>
<input type="checkbox" value="" id="" />
全选
</label>
</li>
<li>
<label>
<input type="checkbox" value="G" id="" />
@ -157,11 +163,10 @@
其它
</label>
</li>
<li>[<a href="javascript:;">全选</a>]</li>
</ul>
<div class="search-time-tips">
<span></span>起售时间为 <span></span>，
<span>动车</span>起售时间为<span>上午 11:00</span>，
<span>动车城铁</span>起售时间为<span>上午 11:00</span>，
<span>高铁</span>起售时间为<span>下午 2:00</span>
</div>
<a class="search-more-option" href="javascript:;">
@ -229,9 +234,11 @@
{{~}}
</script>
<script type="text/x-dot-template">
按类型添加：
{{for(var i in it){}}
<a href="javascript:;" class="options-seat-type-advlink">{{=i}}</a>
{{}}}
</script>
<div>
<table>
@ -315,7 +322,7 @@
<dl class="cl">
<dt>备选日期：</dt>
<dd id="date_loop_editor">
<label><input type="text" class="options-input ui-date" readonly="readonly" placeholder="请选择备选日期" /></label>
<label><input type="text" class="options-input ui-date" readonly="readonly" data-keepopen="true" placeholder="请选择备选日期" /></label>
<script type="text/x-dot-template">
{{~it:d:i}}
<span class="optional-block" data-date="{{=d}}">{{=d}}<span class="close">x</span></span>
@ -491,10 +498,12 @@
<p class="{{=t.to.endpoint?" end":""}}">{{=t.to.name}}</p>
</td>
<td class="train-seats">
{{var hasSeat=false;}}
{{~ext.param.seatDisplayOrder:code:cindex}}
{{
var t1=t.ticketMap[code];
if(!t1||!t1.count) continue;
hasSeat=true;
}}
<a href="javascript:void(0);" class="ticket-block" data-traincode="{{=t.id}}" data-seatcode="{{=code}}">
<p><span>{{=t1.name}}</span></p>
@ -504,7 +513,7 @@
</p>
</a>
{{~}}
{{?t.available==0||t.available==-1}}
{{?(t.available==0||t.available==-1)&&!hasSeat}}
{{?t.selltime}}
<span class="train-notontime">{{=ext.utility.formatSellDate(t.selltime)}} 起售</span>
{{??t.limitSellInfo}}

6
Web12306/js/data.js
View File

@ -145,9 +145,13 @@
STOP_AUTOREFRESH: 112,
VALID_AUTOREFRESH: 113,
JOIN_CHAT: 114,
EXIT_CHAT: 115
EXIT_CHAT: 115,
//extar
OPEN_SYS_NOTICE: 116,
LOAD_SYS_NOTICE: 117
};
exports.chatSendMsgDelay = 5000;
exports.maxRecentCity = 18;
Object.defineProperty(exports, "moreOptDefault", {
get: function () {

16
Web12306/js/ui/index.js
View File

@ -16,7 +16,7 @@
});
//初始化日期
require("./widget_datedropdown.js").init("input.ui-date");
require("./widget_datedropdown.js");
//预售期提示
require("./widget_sell_notification.js");
//地区选择
@ -87,10 +87,10 @@
//车次类型
var ptt = p.trainTypes || [];
$("ul.search-traintypes :checkbox").each(function () {
$("ul.search-traintypes :checkbox:gt(0)").each(function () {
this.checked = !ptt.length || _.indexOf(ptt, this.value) != -1;
});
$("ul.search-traintypes a").html($("ul.search-traintypes :checkbox:not(:checked)").length ? "全选" : "全不选");
$("ul.search-traintypes :checkbox:eq(0)").prop("checked", $("ul.search-traintypes :checkbox:gt(0):not(:checked)").length == 0);
//当前日期
if (p.depDate) {
@ -103,15 +103,15 @@
$("#dep_date").val(datestr);
}
};
$("ul.search-traintypes :checkbox").change(function () {
sessMgr.currentProfile.trainTypes = $.makeArray($("ul.search-traintypes :checkbox:checked").map(function () {
$("ul.search-traintypes :checkbox:gt(0)").change(function () {
sessMgr.currentProfile.trainTypes = $.makeArray($("ul.search-traintypes :checkbox:gt(0):checked").map(function () {
return this.value;
}));
$("ul.search-traintypes a").html($("ul.search-traintypes :checkbox:not(:checked)").length ? "全选" : "全不选");
$("ul.search-traintypes :checkbox:eq(0)").prop("checked", $("ul.search-traintypes :checkbox:gt(0):not(:checked)").length == 0);
sessMgr.save();
});
$("ul.search-traintypes a").click(function () {
var checkbox = $("ul.search-traintypes :checkbox");
$("ul.search-traintypes :checkbox:eq(0)").change(function () {
var checkbox = $("ul.search-traintypes :checkbox:gt(0)");
if (checkbox.filter(":not(:checked)").length) {
checkbox.prop("checked", true);

107
Web12306/js/ui/ui-autosubmitform.js
View File

@ -7,7 +7,7 @@
var initPassengerEditor = function () {
//UI组件
var uiEditor = $("div.passenger-selector-wrap");
var uiInput = uiEditor.find(":text");
var uiInput = $("#passenger-selector-id");
var uiDlg = uiEditor.find("section");
var uiDlgTpl = uiDlg.find("script").doT();
var uiDlgList = uiDlg.find("ul");
@ -19,11 +19,11 @@
uiDlg.addClass("loading");
uiDlg.find(".empty-indicator").hide();
sessmgr.getPassengers(function (data) {
sessmgr.getPassengers(function (plist) {
uiDlg.removeClass("loading");
allpasseengers = data;
allpasseengers = plist;
currentSearchKey = null;
if (!data.length) {
if (!plist.length) {
uiDlgList.empty();
uiDlg.find(".empty-indicator").show();
}
@ -38,8 +38,14 @@
//选定
var id = e.target.dataset.id;
var p = _.findWhere(allpasseengers, { key: id });
if (p)
if (p) {
uiInput.trigger("selectPassenger", p);
if (p.selected)
$(e.target).addClass("selected");
else {
$(e.target).removeClass("selected");
}
}
}
e.stopPropagation();
@ -90,8 +96,7 @@
performSearch();
});
uiInput.on("selectPassenger", function (e, p) {
if (exports.addPassengerToList(p))
p.selected = true;
p.selected = exports.addPassengerToList(p);
});
uiList.on("click", ".optional-block .close", function (e) {
var span = $(this).closest(".optional-block");
@ -148,8 +153,12 @@
cp.passengers = cp.passengers || [];
if (_.findWhere(cp.passengers, { key: p.key }))
var tmpObj = _.findWhere(cp.passengers, { key: p.key });
if (tmpObj) {
uiList.find(".optional-block[data-id='" + p.key + "']").remove();
_.removeFromArray(cp.passengers, tmpObj);
return false;
}
if (cp.passengers.length >= 5) {
mp.showMessagePopup("error", "只能添加五个人喔。");
return false;
@ -182,6 +191,39 @@
var currentKey = null;
var filterTrainNormal = function (list) {
var filter = sessmgr.currentProfile && sessmgr.currentProfile.trainTypes;
if (!filter || !filter.length)
return list;
return _.filter(list, function (t) {
var code = t.code[0];
if (_.indexOf(filter, code) !== -1)
return true;
if (_.indexOf(filter, '1') !== -1) {
if (code === 'L' || /\d/.test(code))
return true;
}
return false;
});
};
var hightlightSelected = function () {
var rows = queryErrorRow.nextAll().removeClass("selected");
var trains = sessmgr.currentProfile && sessmgr.currentProfile.selectedTrain;
if (!trains || !trains.length)
return;
rows.each(function () {
var code = $.trim($(this).find("td:eq(0)").text());
if (_.indexOf(trains, code) !== -1)
$(this).addClass("selected");
});
};
var showDropDown = function () {
queryErrorRow.hide();
queryLoadingRow.hide();
@ -191,8 +233,8 @@
if (!cp)
return;
var checkKey = cp.fromCode + cp.toCode + cp.depDate + cp.studentTicket;
if (checkKey != currentKey) {
var checkKey = cp.fromCode + cp.toCode + cp.depDate + cp.studentTicket + (cp.trainTypes || []).join("");
if (checkKey !== currentKey) {
//需要重新查询
currentKey = checkKey;
@ -210,8 +252,9 @@
if (!this.original.length) {
queryErrorRow.show();
} else {
queryErrorRow.after(queryTpl(this.original));
queryErrorRow.after(queryTpl(filterTrainNormal(this.original)));
}
hightlightSelected();
}).fail(function () {
queryErrorRow.show();
}).always(function () {
@ -220,6 +263,7 @@
}
queryTable.show();
hightlightSelected();
};
var initialLoad = function () {
var cp = sessmgr.currentProfile;
@ -228,6 +272,21 @@
container.append(listTpl(cp.selectedTrain));
}
};
var filterList = function() {
var key = inputObj.val();
if (!key) {
queryErrorRow.nextAll().show();
return;
}
var rows = queryErrorRow.nextAll().hide();
var test = new RegExp(key, "i");
rows.each(function () {
var code = $.trim($(this).find("td:eq(0)").text());
if (test.test(code))
$(this).show();
});
};
initialLoad();
sessmgr.on("sessionChanged", initialLoad);
sessmgr.on("currentProfileChanged", initialLoad);
@ -243,6 +302,8 @@
exports.addTrainToList(s);
this.value = "";
}
}).on("input", function() {
filterList();
});
queryTable.mousedown(function (e) {
@ -255,6 +316,7 @@
if (!t)
return;
tr.toggleClass("selected");
exports.addTrainToList(t.code);
});
container.on("click", ".optional-block", function () {
@ -269,11 +331,15 @@
return;
cp.selectedTrain = cp.selectedTrain || [];
if (_.indexOf(cp.selectedTrain, t) != -1)
return;
var idx = _.indexOf(cp.selectedTrain, t);
if (idx !== -1) {
cp.selectedTrain.splice(idx, 1);
container.find("span.optional-block[data-code='" + t + "']").remove();
} else {
cp.selectedTrain.push(t);
container.append(listTpl([t]));
}
cp.selectedTrain.push(t);
container.append(listTpl([t]));
sessmgr.save();
};
exports.removeTrainFromList = function (t) {
@ -317,14 +383,21 @@
}
container.append(tpl(_.filter(cp.dateloop, data.isValidDate)));
}
input.data("selectedDate", (cp && cp.dateloop) || []);
};
exports.addDateToLoopList = function (d) {
if (!d) return;
cp.dateloop = cp.dateloop || [];
if (_.indexOf(cp.dateloop, d) !== -1)
var idx = _.indexOf(cp.dateloop, d);
if (idx !== -1) {
//已经有了则删除
cp.dateloop.splice(idx, 1);
container.find(">span[data-date='" + d + "']").remove();
sessmgr.save();
return;
}
cp.dateloop.push(d);
sessmgr.save();
//add to list
@ -341,7 +414,7 @@
container.find(">span[data-date='" + d + "']").remove();
};
input.change(function () {
input.change(function (e) {
if (this.value)
exports.addDateToLoopList(this.value);
this.value = "";

14
Web12306/js/ui/widget_cityselector.js
View File

@ -7,7 +7,7 @@
var cityMap = data.cities;
var citydata = data.citydata.data;
var popcity = data.citydata.popcity;
var maxRecentCity = 8;
var maxRecentCity = data.maxRecentCity;
var sessMgr = require("../account/sessionMgr.js");
@ -45,11 +45,15 @@
return;
cp.recentCity = cp.recentCity || [];
var idx = _.indexOf(cp.recentCity, code);
if (idx != -1) {
if (idx !== -1) {
return;
}
container.find("dd[data-code='" + code + "']").remove();
cp.recentCity.unshift(code);
while (cp.recentCity.length > maxRecentCity) {
var city = cp.recentCity.pop();
container.find("dl dd[data-code='" + city + "']").remove();
}
sessMgr.save();
container.find("dl").prepend(tplRecentCity([cityMap[code]]));
};
@ -340,12 +344,6 @@
html.push("<li data-code='" + city.c + "' data-py='" + city.p + "' data-name='" + city.n + "' data-fl='" + city.h + "'>" + city.n + "</li>");
});
if (popcity.length % 4 !== 0) {
for (var i = 0; i < 4 - popcity.length % 4; i++) {
html.push("<li></li>");
}
}
$("#city_selector .city-pop ul").append(html.join(""));
})();

137
Web12306/js/ui/widget_datedropdown.js
View File

@ -1,7 +1,4 @@
define(function (require, exports, module) {
var eo = require("../platform/EventObject.js");
var data = require("../data.js");
var getCurDate = function () {
var now = new Date();
//now = new Date(Math.floor(now.getTime() / 86400000) * 86400000);
@ -12,6 +9,11 @@
var getDateString = function (date) {
return date.getFullYear() + "-" + (date.getMonth() < 9 ? "0" : "") + (date.getMonth() + 1) + "-" + (date.getDate() < 10 ? "0" : "") + date.getDate();
};
var options = {
maxSellDays: 19,
selectDate: [],
minDate: getCurDate()
};
var renderCalendar = function (container, monthStart, minDate, maxDate) {
var weekdayOfFirstDay = monthStart.getDay();
@ -39,59 +41,42 @@
container.find("header").html(monthStart.getFullYear() + "年" + (monthStart.getMonth() + 1) + "月");
};
var DateDropDown = function (options) {
var that = this;
var showPopup = function (ele) {
var curDate = ele.val();
var now = getCurDate();
var selected = ele.data("selectedDate") || [];
var dateDom = $("#dateSelector");
that.showPopup = function (ele) {
var curDate = ele.val();
var now = getCurDate();
var selected = ele.data("selectedDate") || [];
var dateDom = $("#dateSelector");
//如果日历已经创建了，则不变。
if (curDate)
selected.push(curDate);
//如果日历已经创建了，则不变。
if (curDate)
selected.push(curDate);
var dayStart = new Date(now.getFullYear(), now.getMonth(), 1);
var maxShowDay = new Date(now.getTime() + 86400 * 1000 * options.maxSellDays * 2);
var dayStart = new Date(now.getFullYear(), now.getMonth(), 1);
var maxShowDay = new Date(now.getTime() + 86400 * 1000 * options.maxSellDays * 2);
if (dateDom.prop("data-month") !== getDateString(dayStart)) {
renderCalendar(dateDom.find(">.month-first"), dayStart, now, maxShowDay);
renderCalendar(dateDom.find(">.month-second"), new Date(dayStart.getFullYear(), dayStart.getMonth() + 1, 1), now, maxShowDay);
dateDom.prop("data-month", getDateString(dayStart));
}
//判断当前的购买日期是否超过月底了，决定是否显示第二个日历
if (maxShowDay.getMonth() > now.getMonth()) {
dateDom.find(">.month-second").show();
} else {
dateDom.find(">.month-second").hide();
}
if (dateDom.prop("data-month") !== getDateString(dayStart)) {
renderCalendar(dateDom.find(">.month-first"), dayStart, now, maxShowDay);
renderCalendar(dateDom.find(">.month-second"), new Date(dayStart.getFullYear(), dayStart.getMonth() + 1, 1), now, maxShowDay);
dateDom.prop("data-month", getDateString(dayStart));
}
//判断当前的购买日期是否超过月底了，决定是否显示第二个日历
if (maxShowDay.getMonth() > now.getMonth()) {
dateDom.find(">.month-second").show();
} else {
dateDom.find(">.month-second").hide();
}
//确定有标记
dateDom.find("td").removeClass("date-selected").filter(selected.map(function (e) { return "[data-date='" + e + "']"; }).join(",")).addClass("date-selected");
dateDom.data("date-target", ele);
//确定有标记
dateDom.find("td").removeClass("date-selected").filter(selected.map(function (e) { return "[data-date='" + e + "']"; }).join(",")).addClass("date-selected");
dateDom.data("date-target", ele);
//显示
var offset = ele.offset();
dateDom.css({ left: offset.left + "px", top: (offset.top + ele.height()) + "px" });
dateDom.addClass("open");
};
that.hidePopup = function () {
var dateDom = $("#dateSelector");
dateDom.removeClass("open");
};
return this;
//显示
var offset = ele.offset();
dateDom.css({ left: offset.left + "px", top: (offset.top + ele.height()) + "px" });
dateDom.show();
};
DateDropDown.prototype = Object.create(eo);
DateDropDown.constructor = DateDropDown;
var dropdownInstance;
var init = function (params) {
var init = function () {
var date_classes = ["month-first", "month-second"];
var dom = ['<div id="dateSelector">'];
@ -110,44 +95,32 @@
});
$("body").append(dom.join(""));
$("#dateSelector td").click(function () {
var container = $("#dateSelector");
var cell = $(this);
$("#dateSelector").mousedown(function (e) {
var target = $("#dateSelector").data("date-target");
if (!target || !target.length)
return;
if (cell.hasClass("date-notavailable") || !container.data("date-target")) return;
if (target[0].dataset.keepopen === "true") {
e.stopPropagation && e.stopPropagation();
e.preventDefault && e.preventDefault();
}
var target = container.data("date-target").val(cell.attr("data-date")).change();
target.trigger("datechanged").change();
dropdownInstance.hidePopup();
container.removeData("date-target");
var et = $(e.target);
if (et.is("#dateSelector td")) {
if (et.hasClass("date-notavailable")) return;
//移走，确定关闭它
target[0].blur();
container.css({
left: "-1000px",
top: "-1000px"
});
target.val(et.attr("data-date")).change();
et.toggleClass("date-selected");
}
});
params = $.extend({
maxSellDays: 19,
selectDate: [],
minDate: getCurDate()
}, params);
dropdownInstance = new DateDropDown(params);
};
init();
exports.instance = dropdownInstance;
exports.init = function (selector) {
/// <summary>初始化指定元素上的事件</summary>
$(document).on("focus", selector, function () {
dropdownInstance.showPopup($(this));
}).on("blur", selector, function () {
dropdownInstance.hidePopup($(this));
});
}
var selector = "input.ui-date";
$(document).on("focus", selector, function () {
showPopup($(this));
}).on("blur", selector, function () {
$("#dateSelector").hide().removeData("date-target");
});
});