AJAX ตอนที่ 4 : ปฏิทิน ด้วย XHTML และ CSS
หัวข้อ บทความ แทก Ajax | CSS | HTML | JavaScript | PHP
หา่ยไปนานกับบทความเกี่ยวกับ ajax คราวนี้ผมขอนำเทคนิคมาประยุกต์ใช้ให้ดูครับ
ว่ากันด้วยเรื่องปฏิทินบน Website ดีกว่า ผมเห็นหลายๆ Web โดยเฉพาะพวก Blog จะนำมาประยุกต์ใช้
เพื่อนำเสนอเนื้อหาคราวนี้ผมขอสอนแบบ Step ทีละขั้นให้ดู เริ่มกันเลยครับ
ขึ้นด้วย xhtml + css พอกันทีกับการแสดงผลตารางด้วย html table
คงเลี่ยงไม่ได้แล้วหากจะเอาดีด้านนี้ปัจจุบันการออกแบบ Website จะมาใช้ table กำหนดการแสดงผล
มันไม่ใช่ เทรนสมัยนี้แล้ว ฉะนั้น หัดไว้ครับ ใช้ xhtml กับ CSS นี่แหล่ะ ลุยเลย
calendar.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE> Calendar </TITLE>
<link rel="stylesheet" href="calendar.css" type="text/css" />
</HEAD>
<BODY>
<div id="calendar">
<div id="c_head">
<div id="c_back"><<</div>
<div id="c_month">ธันวาคม 2550</div>
<div id="c_next">>></div>
</div>
<ul>
<li>จ.</li>
<li>อ.</li>
<li>พ.</li>
<li>พฤ.</li>
<li>ศ.</li>
<li>ส.</li>
<li>อา.</li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
</BODY>
</HTML>
calendar.css
#calendar{
width:350px;
display:block;
float:left;
}
#calendar ul{
display:block;
width:350px;
margin:0;
padding:0;
list-style-type:none;
}
#calendar li{
display:block;
width:50px;
margin:0;
padding:0;
float:left;
text-align:center;
}
#c_head{
width:350px;
display:block;
float:left;
}
#c_back{
width:50px;
display:block;
float:left;
text-align:center;
}
#c_month{
width:250px;
display:block;
float:left;
text-align:center;
}
#c_next{
width:50px;
display:block;
float:left;
text-align:center;
}
งง กันไปตามทันกันหรือเปล่าครับ ^^ ผมกำหนดกรอบของ div นี้ไว้ที่ 350 px โดยใช้ ul และ li กำหนดข้อมูลวันที่ของ ปฏิทินลงไป
และใช้ CSS กำหนดขนาดของ li ให้แสดงผลเป็น block ขนาดเท่าๆกัน ทำให้ข้อมูลเรียงออกมาเป็นลักษณะ ตารางได้เหมือนกัน
ตัวอย่างที่ได้ออกมา
จับแต่งหน้าตาให้สวยงามซะหน่อย
กรุณาดูให้สวยด้วยนะครับ ฮา หัวศิลปะมีแค่นี้ใส่กรอบ Background ให้ดูเป็น Table ซะหน่อย
calendar.css
#calendar{
width:350px;
display:block;
float:left;
}
#calendar ul{
display:block;
width:350px;
margin:0;
padding:0;
list-style-type:none;
}
#calendar li{
display:block;
width:45px;
margin:1px;
padding:1px;
float:left;
text-align:center;
background-color:#000000;
}
#c_head{
width:342px;
display:block;
float:left;
}
#c_back{
width:50px;
display:block;
float:left;
text-align:center;
background-color:#CCFF99;
}
#c_month{
width:242px;
display:block;
float:left;
text-align:center;
background-color:#99CC66;
}
#c_next{
width:50px;
display:block;
float:left;
text-align:center;
background-color:#CCFF99;
}
.c_h_day{
display:block;
width:45px;
float:left;
text-align:center;
background-color:#FF66CC;
}
.c_today{
display:block;
width:45px;
float:left;
text-align:center;
background-color:#FFCC00;
}
.c_day{
display:block;
width:45px;
float:left;
text-align:center;
background-color:#FFE1F0;
}
เอาล่ะดูดีขึ้นมานิดนึงให้เห็นเป็นปฏิทินแล้วเป็นใช้ได้
ใส่ Javascript และ PHP ให้สามารถเปลี่ยนวันได้
ผมเพิ่ม calendar.js และ calendar.php เข้าไปเพื่อให้หน้า calendar.html เรียก javascript กลับเข้ามาติดต่อหา Server
เรียก calendar ส่ง html ออกไปตามเดือนที่เรียกมา
Script เขียนและ Comment ไว้ค่อนข้างละเอียดแล้วลองไล่การทำงานดูนะครับ
ย้าย Javascript และซ่อน Code ให้ชาวบ้านปวดหัวเล่น
เรียบร้อยแล้วแต่หน้า xhtml จะแสดงเดือนเริ่มเป็นธันวาคม ฉะนั้นผมย้ายตำแหน่ง Script ใหม่ให้มันเรียกตัวเอง
และถือเป็นการซ่อน Code ไปในตัว
สรุปสุดท้ายครับ
สรุปสุดท้าย
ตัวปฏิืทินนี้ผมเขียนให้เป็นไอเดียนะครับใครจะเอาไปประยุกต์ต่อทำอะไรก็ตามสะดวก พวกหน้าข่าวสารต่างๆอาจจะนำเสนอด้วย
ปฏิทินแบบนี้ก็เก๋ไปอีกแบบครับ เช่นหน้าของ iStudio
โดยโมดิฟายที่ calendar.php ตรง Loop for ที่วนสร้างปฎิทิน
### วน 42 รอบสร้าง li ##
อาจจะเขียนให้เข้าไปเช็คเงื่อนไขก่อนว่ามีข้อมูลข่าวสารในวันนี้หรือเปล่าถ้ามีก็เปลี่ยนเป็น Link ไปหาหน้าข่าวสารนั้นๆ
อะไรแบบนี้แหล่ะครับ ลองประยุกต์กันดู
Read (42,905)
Comments (22)
2007-12-28 03:12:05
ความคิดเห็น
ว้าว สุดยอดมากครับอยากได้พอดี ต้องไปหัดใช้ css มาเพิ่มซะแล้ว
โดยคุณ เอก
2007-12-29 10:45:41
เว็บนีเจ๋งจริง ผมอยากมีเว็บเป็นของตัวเองบ้างจัง ตอนนี้กำลังวาดฝันไว้อย่างสวยหรู -*-
โดยคุณ kengointer.hi5.com
2007-12-30 04:40:48
เจ๋งครับ
สวัสดีปีใหม่นะครับ
Panoramap.in.th
โดยคุณ เบิร์ด
2007-12-31 00:35:06
เจ๋งดีพี่ ใช้งาน ได้จริง
เอาไปพัฒนาต่อไปเป็น ตารางกิจกรรมได้เลย ขอบคุณคับผม
กอฟ มา เยือน
โดยคุณ golf
2007-12-31 10:57:10
ขอบคุณมากครับ อยากได้เรียน CSS แบบจริง ๆ จัง ๆ บ้างจัง
โดยคุณ ฮอ
2008-01-02 09:30:40
อืมมม ตอนนี้ผมก็ใช้ CSS อยู่บ้างแม้จะไม่เยอะเท่าไหร่แต่ก็พอ กล่อมแกล้ม ไปได้
ผมทำเว็บเกม อยู่นะคับ 9AuM ใช้ AJAX ด้วยพอสมควร
แล้วก็ติดปัญหานิดหน่อย (ก็ไม่นิดหรอก) คือว่าจะมี MAP ให้ตัวละครเดินๆๆๆ นะครับ
แต่ทีนี้คือ ปัญหา ผู้เล่นสามารถเปิดหลายหน้าต่าง เพื่อให้ตัวละครอยู่หลายๆแมพ เพื่อผลประโยชน์ในบางอย่างของเค้าได้ แต่ผมไม่อยากให้เป็นแบบนั้น จะมีวิธีการป้องกันหรือเปล่าครับ
ถ้ามองภาพไม่ออก ลองสมัครไปเล่นก็ดีนะคับ เป็นกำลังใจให้ผมด้วยยย
คือมันค่อนข้างจะเป็นปัญหามากเลยครับตอนนี้ กับการเปิดเล่นหลายหน้า (และผมไม่อยากทำเป็น popup ด้วยซิ)
ยังงัยถ้าว่างก็ขอเรียนเชิญเพื่อนสมาชิกลองแวะไปเยี่ยมชมกันนะคับ (หาวิธีป้องกันให้ผมหน่อยน๊าคับ)
http://www.pet2you.in.th
ขอบคุณครับ
โดยคุณ พีกับยู
2008-01-02 10:15:27
สวัสดีปีใหม่คร้าบบบบ
หนทางสู่ความลำบากแสนสบาย หนทางสู่ความสบายแสนลำบาก www.memo8.com | www.gump.in.th 
โดยคุณ TaTump
2008-01-02 23:48:27
โดยคุณ พี่คะ แล้วถ้าเราอยากคลิกในปฏิทินแล้วให้มัน connect กับฐานข้อมูล
โชว์ผลลัพธ์อีกหน้านึงละคะ
ทำอย่างไรดี ตอนนี้กำลังหาโค้ดมาประยุกต์คะ
อ่อแล้ว ปฏิทินที่เป็นจาวาสคริบ เวลาเอามาใช้กับ.net มีerror เยอะจิงรึเปล่าคะ
จากเด็กขี้สงสัยคะ
โดยคุณ แก้ว
2008-01-10 14:01:05
อีกนิดนึงคะพี่ขา แหะ แหะ
ตอนนี้หัดใช้ ajax calendar ใน vb.net
แล้วต้องเน้นใช้งานกับฐานข้อมูล oracle
ช่วยแนะนำหนูหน่อยเถอะคะ
ขอบคุณคะ
โดยคุณ แก้ว
2008-01-10 14:05:14
เจ๋งจริงๆครับ code ดูสะอาดตาดีจัง ผมก็เคยทำแต่แบบเป็น table ดูยากพอสมควร
จริงๆทาง W3C เค้าน่าจะมี code ที่สำหรับสร้างตางรางแบบดู code ก็อ่านเห็นเป็นรูปตารางเลยมากกว่านะเนี่ย
โดยคุณ dogdoy
2008-01-18 21:29:41
อืมของเค้าดีจริงๆครับ ผมสนใจตรงที่ซ่อนโค้ดนี่แหละครับเพราะกำลังเขียน
โปรแกรมบนเว็บขายให้ลูกค้า
โดยคุณ nui
2008-01-25 17:54:55
รู้สึกว่า มันยังมีปัญหากับ เดือนที่มีวันเริ่มต้นเป็นวันอาทิตย์อยู่นะครับ
โดยคุณ Nut
2008-06-23 11:44:08
สุดยอดเลยครับขอนับถือครับ
โดยคุณ pee
2008-11-05 14:42:22
เจ๋งไปเลยครับเพ่ ตอนนี้ผมก็กะลังศึกษาเรื่องนี้อยู่พอดีเลยคับ
โดยคุณ tight
2008-12-27 15:51:20
ขอบคุณนะคะ
โดยคุณ chicken
2009-01-23 15:46:28
ขอบคุณน่ะครับ
โดยคุณ Chumpol Moka
2009-05-01 14:52:50
ขอบคุณครับ
โดยคุณ mdemigod
2009-07-13 02:18:00
ขอบคุณค่ะ มีตัวอย่าง+คำอธิบาย ละเอียดมากๆ ช่วยทำให้เข้าใจได้ดีขึ้นเยอะเลย
โดยคุณ ladybabara
2010-01-21 10:10:01
ขอบคุณมากครับ
โดยคุณ ผ่านมา
2010-04-26 17:17:08
ขอบคุณมากครับพี่ กำลังหาตัวอย่างสอนน้องๆ อยู่พอดี
โดยคุณ Tea
2010-09-20 23:59:32
ขอบคุฯมาก
โดยคุณ เยี่ยม
2011-11-22 22:38:24