先上圖 ...
先上圖
<div class="head">
<h1 class="mui-title" style="font-size:17px;font-family:PingFang SC;font-weight:400;padding-top:15px;color:rgba(102,102,102,1)">課程表</h1>
</div>
<!--<div class="weekdays">
<li>09-02</li>
<li>09-03</li>
<li>09-04</li>
<li>09-05</li>
<li>09-06</li>
<li>09-07</li>
<li>09-08</li>
</div>-->
<div class="mui-content">
<div id="slider" class="mui-slider">
<div id="sliderSegmentControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted week">
 
<a class="mui-control-item" href="#Mon" id="week1" style="width:40px;height:30px">一</a> 
<a class="mui-control-item" href="#Tue" id="week2" style="width:40px;height:30px">二</a> 
<a class="mui-control-item" href="#Web" id="week3" style="width:40px;height:30px">三</a> 
<a class="mui-control-item" href="#Thu" id="week4" style="width:40px;height:30px">四</a> 
<a class="mui-control-item" href="#Fri" id="week5" style="width:40px;height:30px">五</a> 
<a class="mui-control-item" href="#Sat" id="week6" style="width:40px;height:30px">六</a> 
<a class="mui-control-item" href="#Sun" id="week0" style="width:40px;height:30px">日</a> 
</div>
<div class="mui-slider-group" style="margin-top:58px">
<div id="Mon" class=" mui-slider-item mui-control-content" style="padding-top:22px">
</div>
<div id="Tue" class="mui-slider-item mui-control-content" style="padding-top:22px">
</div>
<div id="Web" class="mui-slider-item mui-control-content" style="padding-top:22px">
</div>
<div id="Thu" class="mui-slider-item mui-control-content" style="padding-top:22px">
</div>
<div id="Fri" class="mui-slider-item mui-control-content" style="padding-top:22px">
</div>
<div id="Sat" class="mui-slider-item mui-control-content" style="padding-top:22px">
</div>
<div id="Sun" class="mui-slider-item mui-control-content" style="padding-top:22px">
</div>
</div>
</div>
</div>
.course1 { background:#F65558; border-radius:5px; } .course2 { background:#F39772; border-radius:5px; } .course3 { background:#ECA5EE; border-radius:5px; } .course4 { background:#75A5EE; border-radius:5px; } .course5 { background:#88E39F; border-radius:5px; } .course6 { background:#63E9A4; border-radius:5px; } .course7 { background:#F278BF; border-radius:5px; } .course8 { background:#E0A1E3; border-radius:5px; } .course9 { background:#97C8BD; border-radius:5px; } /*如果需要展示日期，需要用到此樣式 li{ text-decoration: none; list-style: none; float:left; text-align:center; width:14.2%; border-radius:50%; color:rgba(153,153,153,1); } .head { width:100%; height:68px; position:fixed; top:0; background:rgba(255,255,255,1); z-index:2 } .weekdays { width:375px; height:30px; background:rgba(255,255,255,1); opacity:1; }*/ .week { width:375px; height:50px; background:rgba(255,255,255,1); box-shadow:0px 3px 6px rgba(0,0,0,0.06); opacity:1; padding:10px; position:fixed; /*top:68px;*/ z-index:2 } #sliderSegmentControl a{ border-radius:50%; background:rgba(235,235,235,1); opacity:1; } .timePeriod { width:32px; height:22px; padding:15px; color:rgba(102,102,102,1); font-size:16px } .horizontalLine { height: 10px; border-bottom: 1px rgba(217,217,217,1) solid; width:75%; float:right; margin-right:10px; } .verticalLine { width:2px; height:30px; background:rgba(255,255,255,1); box-shadow:0px 3px 6px rgba(0,0,0,0.1); opacity:1;border-radius:1px; color:white } .tdLesson { font-size:12px; padding-left:48px; width:100px } #sliderSegmentControl a.mui-active { box-shadow:#EEE2F4 0px 0px 20px; background:rgba(255,128,128,1); color:white; }
load(); function load() { $.ajax({ url: config.url() + "/WorkCenter/ajax/StuCourse.ashx?r=" + Math.random(), type: "post", dataType: "json", data: { studentID: getUrlData().studentID }, xhrFields: { withCredentials: true }, success: function (res) { var loadLesson = 0;//添加一次課程節數模板 var exist = 0;//數組裡不存在該課程，用於判斷是否為課程添加新背景色 var length = 0;//課程背景色數組長度 var j = 0;//顏色數組索引 var courseName = new Array();//課程-顏色鍵值表 var color = new Array("course1", "course2", "course3", "course4", "course5", "course6", "course7", "course8", "course9"); for (i = 0; i < res.data.length; i++) { var courseList = res.data[i].KCB.split('<br>');//課程信息拆分 var weekday = res.data[i].XQJ;//周幾 var lessonLength = res.data[i].SKCD;//課程長度 //課程表動態添加背景色，相同課程相同顏色 if (length>0) { for (var key in courseName) { exist = 0; if (courseList[0] == key) { exist = 1; break; } } if (exist == 0) { courseName[courseList[0]] = color[j]; if (j >= 8) { j = 0; } else { j++; } } } else { courseName[courseList[0]] = color[j]; if (j >=8) { j = 0; } else { j++; } length++; } //添加課程節數模板 if (loadLesson == 0) { for (l = 0; l < 7; l++) { var rr = '<span class="timePeriod">上午<span><div class="horizontalLine"></div></style>' + '<table width="100%" style="border-collapse:separate; border-spacing:15px;">' + '<tr id="' + l + '1">' + '<td class="tdLesson">第一節 <span class="verticalLine">|</span></td>' + '</tr>' + '<tr id="' + l + '2">' + '<td class="tdLesson">第二節 <span class="verticalLine">|</span></td>' + '</tr>' + '<tr id="' + l + '3">' + '<td class="tdLesson">第三節 <span class="verticalLine">|</span></td>' + '</tr>' + '<tr id="' + l + '4">' + '<td class="tdLesson">第四節 <span class="verticalLine">|</span></td>' + '</tr>' + '</table>' + '<span class="timePeriod">下午<span><div class="horizontalLine"></div></style>' + '<table width="100%" style="border-collapse:separate; border-spacing:15px;">' + '<tr id="' + l + '5">' + '<td class="tdLesson">第一節 <span class="verticalLine">|</span></td>' + '</tr>' + '<tr id="' + l + '6">' + '<td class="tdLesson">第二節 <span class="verticalLine">|</span></td>' + '</tr>' + '<tr id="' + l + '7">' + '<td class="tdLesson">第三節 <span class="verticalLine">|</span></td>' + '</tr>' + '<tr id="' + l + '8">' + '<td class="tdLesson">第四節 <span class="verticalLine">|</span></td>' + '</tr>' + '</table>' + '<span class="timePeriod">晚上<span><div class="horizontalLine"></div></style>' + '<table width="100%" style="border-collapse:separate; border-spacing:15px;">' + '<tr id="' + l + '9">' + '<td class="tdLesson">第一節 <span class="verticalLine">|</span></td>' + '</tr>' + '<tr id="' + l + '10">' + '<td class="tdLesson">第二節 <span class="verticalLine">|</span></td>' + '</tr>' + '<tr id="' + l + '11">' + '<td class="tdLesson">第三節 <span class="verticalLine">|</span></td>' + '</tr>' + '<tr id="' + l + '12">' + '<td class="tdLesson">第四節 <span class="verticalLine">|</span></td>' + '</tr>' + '</table>'; switch (l) { case 0: $("#Sun").append(rr); break; case 1: $("#Mon").append(rr); break; case 2: $("#Tue").append(rr); break; case 3: $("#Web").append(rr); break; case 4: $("#Thu").append(rr); break; case 5: $("#Fri").append(rr); break; case 6: $("#Sat").append(rr); break; } } loadLesson++; } var row = '<td rowspan="' + res.data[i].SKCD + '" class="' + courseName[courseList[0]] + '" style="font-size:12px;padding:5px;color:white">' + courseList[0] + '<br/> ' + courseList[2] + '<span style="float:right">' + courseList[3] + '</span> </td>'; var trName = weekday +""+ res.data[i].DJJ; $("#" + trName + "").append(row); } } }) } function getUrlData() { var url = window.location.search; //url中?之後的部分 url = url.substring(1); //去掉? var dataObj = {}; if (url.indexOf('&') > -1) { url = url.split('&'); for (var i = 0; i < url.length; i++) { var arr = url[i].split('='); dataObj[arr[0]] = arr[1]; } } else { url = url.split('='); dataObj[url[0]] = url[1]; } return dataObj; } //選中今天 $("#week" + new Date().getDay() + "").addClass("mui-active"); //展示今天課程 switch (new Date().getDay()) { case 0: $("#Sun").addClass("mui-active"); break; case 1: $("#MOn").addClass("mui-active"); break; case 2: $("#Tue").addClass("mui-active"); break; case 3: $("#Web").addClass("mui-active"); break; case 4: $("#Thu").addClass("mui-active"); break; case 5: $("#Fri").addClass("mui-active"); break; case 6: $("#Sat").addClass("mui-active"); break; }
