สร้างปฏิทินปรับการแสดงผลตามขนาดของหน้าจอด้วยปลั๊กอิน jQuery (ลองรับในมือถือ)


วันนี้เรามาดูเทคนิดในการสร้างปฏิทินกันบ้างครับแต่มันคงไม่ธรรมดาแน่นอนเพราะเป็นการใช้งานของปลั๊กอิน jQuery ที่นำมาสร้างปฏิทินสุดเจ๋งในวันนี้โดยจุเด็ดก้คือปฏิทินสามารถที่จะปรับความกว้างและรูปแบบการแสดงผลให้มีความสมดุลกับขนาดหน้าจอของผู้ที่ใช้งานและจะมีการใช้ css ในการกำหนดขนาดและการแสดงผล js ช่วยในส่วนของการเก็บข้อมูลหรือกันกำหนดวันให้ตรงตามปฏิทินปกติทั่วไป เราลองมาดูกันดีกว่าครับว่าจะเป็นอย่างไร



ส่วนนี้จะเป็นตัวอย่างการใช้งานบนมือถือ


เราลองมาดูรูปแบบของโค้ดครับตัวอย่างนี้เป็นตัวที่เราสามารถนำไปประยุคใช้งานได้ครับ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
< !DOCTYPE html>
<!--[if IE 9]><html class="no-js ie9">< ![endif]-->
<!--[if gt IE 9]><!--></html><html class="no-js"><!--<![endif]-->
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        </meta><meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Flexible Calendar</title>
        <meta name="description" content="Flexible Calendar with jQuery and CSS3" />
        <meta name="keywords" content="responsive, calendar, jquery, plugin, full page, flexible, javascript, css3, media queries" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico">
        <link rel="stylesheet" type="text/css" href="css/calendar.css" />
        <link rel="stylesheet" type="text/css" href="css/custom_1.css" />
        <script src="js/modernizr.custom.63321.js"></script>
    </link></meta></head>
    <body>
    <div class="custom-header clearfix">
    <h2>Flexible Calendar <span><span><a href="index.html">Demo 1</a></span> | <a href="index2.html">Demo 2</a>| <a href="index3.html">Demo 3</a></span></h2>
    </div>
<div id="calendar" class="fc-calendar-container">
   <div class="fc-calendar fc-five-rows">
      <div class="fc-head">
         <div>Monday</div>
         <div>Tuesday</div>
         <div>Wednesday</div>
         <div>Thursday</div>
         <div>Friday</div>
         <div>Saturday</div>
         <div>Sunday</div>
      </div>
      <div class="fc-body">
         <div class="fc-row">
            <div></div>
            <div></div>
            <div></div>
            <div><span class="fc-date"><a href="https://soraya.in.th">"1</a></span><span class="fc-weekday">Thu</span></div>
            <div><span class="fc-date">2</span><span class="fc-weekday">Fri</span></div>
            <div><span class="fc-date">3</span><span class="fc-weekday">Sat</span></div>
            <div><span class="fc-date">4</span><span class="fc-weekday">Sun</span></div>
         </div>
         <div class="fc-row">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
         </div>
         <div class="fc-row">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
         </div>
         <div class="fc-row">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>v>
         </div>
         <!-- ... -->
      </div>
   </div>
</div>
    </body>
</html>


จากตัวอย่างโค้ดเราจะเห็นได้ว่าเราสามารถที่จะเพิ่มรายละเอียดเข้าไปได้หรือเอาไปพัฒนาต่อโดยการเขียน loop หรือโค้ดคำสั่งเข้าไปเพื่อเพิ่มรายการโดยอัตโนมัตินั้นเอง


ส่วนโค้ดด้านล้างนี้จะเป็นตัวอย่างการเรียกใช้งานปลั๊กอินของ jquery และ js โดยจะทำการเพิ่มวันโดยอัตโนมัตเพื่อให้ตรงกับปฏิทินโดยทั่วไป

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
< !DOCTYPE html>
<!--[if IE 9]><html class="no-js ie9">< ![endif]-->
<!--[if gt IE 9]><!--></html><html class="no-js"><!--<![endif]-->
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        </meta><meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Flexible Calendar</title>
        <meta name="description" content="Flexible Calendar with jQuery and CSS3" />
        <meta name="keywords" content="responsive, calendar, jquery, plugin, full page, flexible, javascript, css3, media queries" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico">
        <link rel="stylesheet" type="text/css" href="css/calendar.css" />
        <link rel="stylesheet" type="text/css" href="css/custom_1.css" />
        <script src="js/modernizr.custom.63321.js"></script>
    </link></meta></head>
    <body>
        <div class="container">
            <!-- Codrops top bar -->
            <div class="codrops-top clearfix">
                <a href="http://tympanus.net/Development/Stapel/"><strong>&laquo; Previous Demo: </strong>Adaptive Thumbnail Pile Effect</a>
                <span class="right">
                    <a href="http://tympanus.net/codrops/?p=12416"><strong>Back to the Codrops Article</strong></a>
                </span>
            </div><!--/ Codrops top bar -->
            <div class="custom-calendar-wrap custom-calendar-full">
                <div class="custom-header clearfix">
                    <h2>Flexible Calendar <span><span>Demo 1</span> | <a href="index2.html">Demo 2</a>| <a href="index3.html">Demo 3</a></span></h2>
                    <h3 class="custom-month-year">
                        <span id="custom-month" class="custom-month"></span>
                        <span id="custom-year" class="custom-year"></span>
                        <nav>
                            <span id="custom-prev" class="custom-prev"></span>
                            <span id="custom-next" class="custom-next"></span>
                            <span id="custom-current" class="custom-current" title="Got to current date"></span>                        </nav>
                    </h3>
                </div>
                <div id="calendar" class="fc-calendar-container"></div>
            </div>
        </div><!-- /container -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.calendario.js"></script>
        <script type="text/javascript" src="js/data.js"></script>
        <script type="text/javascript">
            $(function() {
                var cal = $( '#calendar' ).calendario( {
                        onDayClick : function( $el, $contentEl, dateProperties ) {
                            for( var key in dateProperties ) {
                                console.log( key + ' = ' + dateProperties[ key ] );
                            }
                        },
                        caldata : codropsEvents
                    } ),
                    $month = $( '#custom-month' ).html( cal.getMonthName() ),
                    $year = $( '#custom-year' ).html( cal.getYear() );
                $( '#custom-next' ).on( 'click', function() {
                    cal.gotoNextMonth( updateMonthYear );
                } );
                $( '#custom-prev' ).on( 'click', function() {
                    cal.gotoPreviousMonth( updateMonthYear );
                } );
                $( '#custom-current' ).on( 'click', function() {
                    cal.gotoNow( updateMonthYear );
                } );
                function updateMonthYear() {               
                    $month.html( cal.getMonthName() );
                    $year.html( cal.getYear() );
                }
                // you can also add more data later on. As an example:
                /*
                someElement.on( 'click', function() {
                    cal.setData( {
                        '03-01-2013' : '<a href="#">testing</a>',
                        '03-10-2013' : '<a href="#">testing</a>',
                        '03-12-2013' : '<a href="#">testing</a>'
                    } );
                    // goes to a specific month/year
                    cal.goto( 3, 2013, updateMonthYear );
                } );
                */
            });
        </script>
    </body>
</html>


โดยข้อมูลที่แสดงในแต่ละวันจะอยู่ในไฟล์ของ js/date.js โดยเราสามารถเพิ่มข้อมูลเข้าไปให้ตรงกับวันหรือเขียนโค้ดเพิ่มเต็มเพื่อดึงข้อมูลออกมาจาก BD เพื่อแสดงผลก็ได้ครับมาลองดูกัน

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var codropsEvents = {
'11-23-2012' : '<a href="https://soraya.in.th/2012/11/27/using-transparency-in-web-design-dos-and-donts/">เทคนิคที่นักออกแบบไม่ควรพลาดการใช้ความโปร่งใสเพื่อออกแบบเว็บไซต์</a>',
'11-21-2012' : '<a href="https://soraya.in.th/2012/11/25/three-script-updates/">ปรับปรุงใหม่ 3 เทคนิคการสร้างแกลลอรี่และSWATCH BOOK ด้วยCSS3 และ jQuery</a>',
'12-23-2012' : '<a href="https://soraya.in.th/2012/11/27/using-transparency-in-web-design-dos-and-donts/">เทคนิคที่นักออกแบบไม่ควรพลาดการใช้ความโปร่งใสเพื่อออกแบบเว็บไซต์</a>',
'12-21-2012' : '<a href="https://soraya.in.th/2012/11/25/three-script-updates/">ปรับปรุงใหม่ 3 เทคนิคการสร้างแกลลอรี่และSWATCH BOOK ด้วยCSS3 และ jQuery</a>',
'11-23-2012' : '<a href="https://soraya.in.th/2012/11/27/using-transparency-in-web-design-dos-and-donts/">เทคนิคที่นักออกแบบไม่ควรพลาดการใช้ความโปร่งใสเพื่อออกแบบเว็บไซต์</a>',
'01-21-2013' : '<a href="https://soraya.in.th/2012/11/25/three-script-updates/">ปรับปรุงใหม่ 3 เทคนิคการสร้างแกลลอรี่และSWATCH BOOK ด้วยCSS3 และ jQuery</a>',
'01-23-2013' : '<a href="https://soraya.in.th/2012/11/27/using-transparency-in-web-design-dos-and-donts/">เทคนิคที่นักออกแบบไม่ควรพลาดการใช้ความโปร่งใสเพื่อออกแบบเว็บไซต์</a>',
'02-21-2013' : '<a href="https://soraya.in.th/2012/11/25/three-script-updates/">ปรับปรุงใหม่ 3 เทคนิคการสร้างแกลลอรี่และSWATCH BOOK ด้วยCSS3 และ jQuery</a>',
'02-23-2013' : '<a href="https://soraya.in.th/2012/11/27/using-transparency-in-web-design-dos-and-donts/">เทคนิคที่นักออกแบบไม่ควรพลาดการใช้ความโปร่งใสเพื่อออกแบบเว็บไซต์</a>',
'03-21-2013' : '<a href="https://soraya.in.th/2012/11/25/three-script-updates/">ปรับปรุงใหม่ 3 เทคนิคการสร้างแกลลอรี่และSWATCH BOOK ด้วยCSS3 และ jQuery</a>',
'03-23-2013' : '<a href="https://soraya.in.th/2012/11/27/using-transparency-in-web-design-dos-and-donts/">เทคนิคที่นักออกแบบไม่ควรพลาดการใช้ความโปร่งใสเพื่อออกแบบเว็บไซต์</a>',
'04-21-2013' : '<a href="https://soraya.in.th/2012/11/25/three-script-updates/">ปรับปรุงใหม่ 3 เทคนิคการสร้างแกลลอรี่และSWATCH BOOK ด้วยCSS3 และ jQuery</a>',
};

ดาวน์โหลดโค้ด…..!!!



ขอบคุณข้อมูลจาก http://tutorialzine.com

Comments

comments

Powered by Facebook Comments