作者j87b0003 (I'm 養生虎)
看板Ajax
標題[心得] 拖拉式選課
時間Sun Jan 9 22:32:02 2011
記得在很久之前，有看到拖拉式的選課，
不過也忘了介紹網址在哪，旁邊有個小框框會提醒哪邊衝堂
最近想一想也來簡易做一個好了XD
DEMO網址:
http://ppt.cc/UKNw
比較喜歡這種直覺式的，想要什麼課程，
就像購物車一樣，丟進去，不喜歡再拉回來，
JS主要有三個物件
課程表、課程、課程購物車
(還是搞不太懂JS的物件怎寫XDDDDD，雖然有寫出來)
宣告則要：
var c = new Cart( 購物車的ID, 課程區塊的Class);
var t = new Table( 課程表的ID);
ex:
var c = new Cart("#tabs", ".elective");
var t = new table("
#course_table");
c.set_table(t);
//綁定課程表
資料結構如下：
<div class="area required">
<label class="course_info">
<ol>國文</ol>
<ol>陶冤明</ol>
<ol>[一]1.2.3</ol>
<input type="hidden" class="course_id" value="598">
//課程的ID
<label class="week">
//某天的上課日
<input type="hidden" class="day" value="1">
//表示星期一
<input type="hidden" class="no" value="1">
//第一堂課
<input type="hidden" class="no" value="2">
<input type="hidden" class="no" value="3">
</label>
</label>
</div>
物件方法
-購物車部份-
set_target() 設定分頁標籤名稱
set_table() 設定課程表
-課程表部份-
set_hover_in_table() 在課程表內，移到同課程的顏色變化
set_hover_in_cart() 在購物車內，移過時在課程表內的顏色變化
get_rows() 取得列數
get_cols() 取得欄數
get_data() 取得表格內的資料
remove() 移出課程
-課程部份-
get_id() 取得課程ID
get_cross() 課程是否跨天數
get_week() 取得上課日
僅是簡易版啦...
大家就多見諒XDDDDDDD
--
人 究竟是什麼時候會
死？
是被槍打中的時候嗎 ...不是
得到不治之症嗎 ...也不是
那會是喝了劇毒香菇湯之後嗎 ...當然不是
而是 被世
人遺忘的時候
。
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 219.84.186.13
1F：推 samleetoyota:推拉~ 01/09 22:35
2F：→ rockzero:IE 8有點狀況~~ 01/11 21:54
3F：→ j87b0003:倒是沒用IE測過，不過FF、Safari、Opera倒是都OK 01/11 22:43
4F：推 yphs88:實務上應用…這對選課系統負擔更大吧XD 01/25 23:05