Scriptdd.com

บทความบ้าบ่นของคนทำเว็บ ปี 8

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">&lt;&lt;</div>
        <div id="c_month">ธันวาคม 2550</div>
        <div id="c_next">&gt;&gt;</div>
    </div>

<ul>
    <li>จ.</li>
    <li>อ.</li>
    <li>พ.</li>
    <li>พฤ.</li>
    <li>ศ.</li>
    <li>ส.</li>
    <li>อา.</li>


    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</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>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</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 ขนาดเท่าๆกัน ทำให้ข้อมูลเรียงออกมาเป็นลักษณะ ตารางได้เหมือนกัน


ตัวอย่างที่ได้ออกมา

Download Step 1


จับแต่งหน้าตาให้สวยงามซะหน่อย

กรุณาดูให้สวยด้วยนะครับ ฮา หัวศิลปะมีแค่นี้ใส่กรอบ 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;
}

เอาล่ะดูดีขึ้นมานิดนึงให้เห็นเป็นปฏิทินแล้วเป็นใช้ได้

Download Step 2


ใส่ Javascript และ PHP ให้สามารถเปลี่ยนวันได้

ผมเพิ่ม calendar.js และ calendar.php เข้าไปเพื่อให้หน้า calendar.html เรียก javascript กลับเข้ามาติดต่อหา Server
เรียก calendar ส่ง html ออกไปตามเดือนที่เรียกมา

Script เขียนและ Comment ไว้ค่อนข้างละเอียดแล้วลองไล่การทำงานดูนะครับ

Download Step 3


ย้าย Javascript และซ่อน Code ให้ชาวบ้านปวดหัวเล่น

เรียบร้อยแล้วแต่หน้า xhtml จะแสดงเดือนเริ่มเป็นธันวาคม ฉะนั้นผมย้ายตำแหน่ง Script ใหม่ให้มันเรียกตัวเอง
และถือเป็นการซ่อน Code ไปในตัว

สรุปสุดท้ายครับ

Download Final 


สรุปสุดท้าย

ตัวปฏิืทินนี้ผมเขียนให้เป็นไอเดียนะครับใครจะเอาไปประยุกต์ต่อทำอะไรก็ตามสะดวก พวกหน้าข่าวสารต่างๆอาจจะนำเสนอด้วย
ปฏิทินแบบนี้ก็เก๋ไปอีกแบบครับ เช่นหน้าของ iStudio

โดยโมดิฟายที่ calendar.php ตรง Loop for ที่วนสร้างปฎิทิน

### วน 42 รอบสร้าง li ##

อาจจะเขียนให้เข้าไปเช็คเงื่อนไขก่อนว่ามีข้อมูลข่าวสารในวันนี้หรือเปล่าถ้ามีก็เปลี่ยนเป็น Link ไปหาหน้าข่าวสารนั้นๆ

อะไรแบบนี้แหล่ะครับ ลองประยุกต์กันดู

 

 

รูปคุณ Read (39,984) Comments (22) 2007-12-28 03:12:05

ความคิดเห็น

ว้าว สุดยอดมากครับอยากได้พอดี ต้องไปหัดใช้ css มาเพิ่มซะแล้ว

รูปคุณ เอก โดยคุณ เอก 2007-12-29 10:45:41

เว็บนีเจ๋งจริง ผมอยากมีเว็บเป็นของตัวเองบ้างจัง ตอนนี้กำลังวาดฝันไว้อย่างสวยหรู -*-

รูปคุณ kengointer.hi5.com โดยคุณ kengointer.hi5.com 2007-12-30 04:40:48

เจ๋งครับ
สวัสดีปีใหม่นะครับ

รูปคุณ เบิร์ด โดยคุณ เบิร์ด 2007-12-31 00:35:06


Panoramap.in.th

เจ๋งดีพี่ ใช้งาน ได้จริง
เอาไปพัฒนาต่อไปเป็น ตารางกิจกรรมได้เลย ขอบคุณคับผม

รูปคุณ golf โดยคุณ 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

สวัสดีปีใหม่คร้าบบบบ

รูปคุณ TaTump โดยคุณ TaTump 2008-01-02 23:48:27


หนทางสู่ความลำบากแสนสบาย หนทางสู่ความสบายแสนลำบาก

www.memo8.com | www.gump.in.th

 

Extension FF เยอะจัง - -"

รูปคุณ Scentz โดยคุณ Scentz 2008-01-06 18:39:45


Hackme :) | SMF

พี่คะ แล้วถ้าเราอยากคลิกในปฏิทินแล้วให้มัน 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 โดยคุณ dogdoy 2008-01-18 21:29:41

อืมของเค้าดีจริงๆครับ ผมสนใจตรงที่ซ่อนโค้ดนี่แหละครับเพราะกำลังเขียน
โปรแกรมบนเว็บขายให้ลูกค้า

รูปคุณ nui โดยคุณ nui 2008-01-25 17:54:55

รู้สึกว่า มันยังมีปัญหากับ เดือนที่มีวันเริ่มต้นเป็นวันอาทิตย์อยู่นะครับ

รูปคุณ Nut โดยคุณ Nut 2008-06-23 11:44:08

สุดยอดเลยครับขอนับถือครับ

รูปคุณ pee โดยคุณ pee 2008-11-05 14:42:22

เจ๋งไปเลยครับเพ่ ตอนนี้ผมก็กะลังศึกษาเรื่องนี้อยู่พอดีเลยคับ

รูปคุณ tight โดยคุณ tight 2008-12-27 15:51:20

ขอบคุณนะคะ

รูปคุณ chicken โดยคุณ chicken 2009-01-23 15:46:28

ขอบคุณน่ะครับ

รูปคุณ Chumpol Moka โดยคุณ Chumpol Moka 2009-05-01 14:52:50

ขอบคุณครับ

รูปคุณ mdemigod โดยคุณ mdemigod 2009-07-13 02:18:00

ขอบคุณค่ะ มีตัวอย่าง+คำอธิบาย ละเอียดมากๆ ช่วยทำให้เข้าใจได้ดีขึ้นเยอะเลย

รูปคุณ ladybabara โดยคุณ ladybabara 2010-01-21 10:10:01

ขอบคุณมากครับ

รูปคุณ ผ่านมา โดยคุณ ผ่านมา 2010-04-26 17:17:08

ขอบคุณมากครับพี่ กำลังหาตัวอย่างสอนน้องๆ อยู่พอดี

รูปคุณ Tea โดยคุณ Tea 2010-09-20 23:59:32

ขอบคุฯมาก

รูปคุณ เยี่ยม โดยคุณ เยี่ยม 2011-11-22 22:38:24

ร่วมแสดงความคิดเห็น



ขอความกรุณา ปัญญาชน ทุกๆท่าน รณรงค์การใช้ภาษาไทยให้ถูกต้อง
กรุณา ลงความคิดเห็นโดยใช้ภาษาไทยให้เป็นภาษาไทย งดการใช้ภาษาวัยรุ่น,
แอ๊บแบ๊ว บอกตรงๆปัญญาอ่อน !! Admin นั่งอ่านแล้วปวดหัว

เข้าระบบ


จำไว้ด้วยนะจ้ะ

สมัครสมาชิก
ลืมรหัสผ่าน

บทความล่าสุด

Gallery

Tags

Internet MySQL Music CSS Downloads Developer Gallery ASP Diary Plugin PHP Search Engine Testdrive Honda Firefox AIS HTML Clip Video barcampbkk2 Web2.0 SMS Perl Ajax Software Motorcycle FTR ล้อหมอบ MSN Live Google Security

อื่นๆ ...

เพื่อนบ้าน

สถิติส่วนตัว

คลิกรับ Feed สิจ๊ะ

TwitterCounter for @9aum

Scriptdd.com | ctdd Version 3.0 ติดต่อฐานข้อมูลทิ้งสิ้น 6 ครั้งใช้เวลาประมวลผล 0.2206 วินาที
โปรแกรมโดย 9AuM | ออกแบบโดย styleshout