รับทำเว็บไซต์ครบวงจร
เลือกภาษา Thai English     facebook
รายการหลัก



บทความ


Page Ranking Tool

สร้าง ปฏิทิน ด้วย XHTML และ CSS


สอน AJAX
> สร้าง ปฏิทิน ด้วย XHTML และ CSS


หา่ยไปนานกับบทความเกี่ยวกับ 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 ไปหาหน้าข่าวสารนั้นๆ

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

 



Short URL click!
<< กลับคืน : เข้าชม 23,813 ครั้ง : ขึ้นไปด้านบน

รับทำเว็บไซต์ รับสร้างเว็บไซต์ รับออกแบบเว็บ รับเขียนเว็บ รับสอนทำเว็บ รับเช่า hosting รับเช่าพื้นที่เว็บไซต์ จดชื่อเว็บ รับโปรโมทเว็บไซต์ รับดูแลเว็บ SiteMap
สปริงเกอร์http://www.xn--22c2c4blb9n.xn--o3cw4h/