Tworzymy animowany kalendarz
W dzisiejszym poradniku tworzymy animowany kalendarz który z pewnością urozmaici twoją stronę. Kalendarz z tego tutoriala jest na 2014 rok, jednak nic nie stoi na przeszkodzie aby poprzestawiać trochę dni i zrobić na każdy inny rok. Kalendarzyk jest prosty w tworzeniu, wiec jeśli ktoś by chciał go użyć np. jako wtyczkę do WordPressa, to nie powinien mieć z tym problemu. Tak wiec, jeśli jesteś zainteresowany takim kalendarzykiem – zapraszam Cię do lektury. Kalendarzyk wygląda jak każdy inny, z tą różnicą, że każdy kolejny miesiąc przerzucamy jak normalną kartkę. Animację te oczywiście możemy wykorzystać w inny sposób – ostatni raz użyłem go w projekcie dla firmy ACANTHUS, gdzie “media” otwierają się w postaci gazetki – jednak najlepsze są praktyczne rozwiązania, tak więc do dzieła 🙂 Oczywiście jeśli chcesz zobaczyć, co będziemy robić, w linku poniżej umieściłem gotową stronę do poglądu. [button url=”http://demo.wojtek1150.com/CalendarBook” target=”blank” size=”6″ center=”yes” icon=”icon: flask”]DEMO[/button] Zanim zaczniemy potrzebne Ci będą te biblioteczki:
- modernizr
- Jquery 1.9.1
- jquery.bookblock
Wszystkie te pliczki znajdziesz w katalogu js w źródłach, które są zamieszczone na końcu artykułu. Jeśli już masz wszystko gotowe, to zaczynamy. Zacznijmy od HTML’a, główna struktura kodu wygląda tak:
<div id="bb-bookblock" class="bb-bookblock"> <div class="bb-item"> <!-- Jakaś treść --> </div> </div>
Aby dodać kolejne miesiące powielamy tą treść:
<div class="bb-item"> <img class="cal-image" src="images/image1.jpg" alt="image01"/> <div class="fc-calendar-wrap"> <h2>Styczeń 2014</h2> <div class="fc-calendar-container"> <div class="fc-calendar fc-five-rows"> <div class="fc-head"><div>Poniedziałek</div><div>Wtorek</div><div>Środa</div><div>Czwartek</div><div>Piątek</div><div>Sobota</div><div>Niedziela</div></div> <div class="fc-body"> <div class="fc-row"> <div></div> <div></div> <div><span class="fc-date">1</span><span class="fc-weekday">Śr</span></div> <div><span class="fc-date">2</span><span class="fc-weekday">Cz</span></div> <div><span class="fc-date">3</span><span class="fc-weekday">Pt</span></div> <div><span class="fc-date">4</span><span class="fc-weekday">Sb</span></div> <div><span class="fc-date">5</span><span class="fc-weekday">Ni</span></div> </div> <div class="fc-row"> <div><span class="fc-date">6</span><span class="fc-weekday">Pn</span></div> <div><span class="fc-date">7</span><span class="fc-weekday">Wt</span></div> <div><span class="fc-date">8</span><span class="fc-weekday">Śr</span></div> <div><span class="fc-date">9</span><span class="fc-weekday">Cz</span></div> <div><span class="fc-date">10</span><span class="fc-weekday">Pt</span></div> <div><span class="fc-date">11</span><span class="fc-weekday">Sb</span></div> <div><span class="fc-date">12</span><span class="fc-weekday">Ni</span></div> </div> <div class="fc-row"> <div><span class="fc-date">13</span><span class="fc-weekday">Pn</span></div> <div><span class="fc-date">14</span><span class="fc-weekday">Wt</span></div> <div><span class="fc-date">15</span><span class="fc-weekday">Śr</span></div> <div><span class="fc-date">16</span><span class="fc-weekday">Cz</span></div> <div><span class="fc-date">17</span><span class="fc-weekday">Pt</span></div> <div><span class="fc-date">18</span><span class="fc-weekday">Sb</span></div> <div><span class="fc-date">19</span><span class="fc-weekday">Ni</span></div> </div> <div class="fc-row"> <div><span class="fc-date">20</span><span class="fc-weekday">Pn</span></div> <div><span class="fc-date">21</span><span class="fc-weekday">Wt</span></div> <div><span class="fc-date">22</span><span class="fc-weekday">Śr</span></div> <div><span class="fc-date">23</span><span class="fc-weekday">Cz</span></div> <div><span class="fc-date">24</span><span class="fc-weekday">Pt</span></div> <div><span class="fc-date">25</span><span class="fc-weekday">Sb</span></div> <div><span class="fc-date">26</span><span class="fc-weekday">Ni</span></div> </div> <div class="fc-row"> <div><span class="fc-date">27</span><span class="fc-weekday">Pn</span></div> <div><span class="fc-date">28</span><span class="fc-weekday">Wt</span></div> <div><span class="fc-date">29</span><span class="fc-weekday">Śr</span></div> <div><span class="fc-date">30</span><span class="fc-weekday">Cz</span></div> <div><span class="fc-date">31</span><span class="fc-weekday">Pt</span></div> <div></div> <div></div> </div> </div> </div> </div> </div> </div>
Gdy już mamy wszystkie miesiące przygotowane, to możemy przejść do ostylowania naszego kalendarza, którego kodu jest prawie 400 linijek, wiec pozwoliłem sobie na dołączenie odpowiednich komentarzy w pliku component.css, w którym znajdziecie tylko opcje do poprawnego wyświetlenia kalendarzyka, tak więc bez zbędnego kodu 🙂 Gdy już mamy gotową stronę i ostylowaną możemy kończyć dzieło, czyli JavaScript:
var Page = (function() { var config = { // Ustalenie zmiennych $bookBlock : $( '#bb-bookblock' ), $navNext : $( '#bb-nav-next' ), $navPrev : $( '#bb-nav-prev' ) }, init = function() { config.$bookBlock.bookblock( { // Ustawienia pluginu orientation : 'horizontal', speed : 700 } ); initEvents(); }, initEvents = function() { // Przypisanie sterowania config.$navNext.on( 'click touchstart', function() { config.$bookBlock.bookblock( 'next' ); return false; } ); config.$navPrev.on( 'click touchstart', function() { config.$bookBlock.bookblock( 'prev' ); return false; } ); }; return { init : init }; // Zwracamy init, abyśmy mogli tą funkcję wywołać poniżej })();
Całość wywołujemy poprzez:
Page.init();
Dodatkowe informacje od autora pluginu, czyli opcje i odwołania: Opcje:
// vertical or horizontal flip orientation : 'vertical', // ltr (left to right) or rtl (right to left) direction : 'ltr', // speed for the flip transition in ms. speed : 1000, // easing for the flip transition. easing : 'ease-in-out', // if set to true, both the flipping page and the sides will have an overlay to simulate shadows shadows : true, // opacity value for the "shadow" on both sides (when the flipping page is over it). // value : 0.1 - 1 shadowSides : 0.2, // opacity value for the "shadow" on the flipping page (while it is flipping). // value : 0.1 - 1 shadowFlip : 0.1, // if we should show the first item after reaching the end. circular : false, // if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'. nextEl : '', // if we want to specify a selector that triggers the prev() function. prevEl : '', // If true it overwrites the circular option to true! autoplay : false, // time (ms) between page switch, if autoplay is true. interval : 3000, // callback after the flip transition. // page is the current item's index. // isLimit is true if the current page is the last one (or the first one). onEndFlip : function( page, isLimit ) { return false; }, // callback before the flip transition. // page is the current item's index. onBeforeFlip: function( page ) { return false; }
Metody:
- $( ‘#bb-bookblock’ ).bookblock( ‘next’ )
- $( ‘#bb-bookblock’ ).bookblock( ‘prev’ )
- $( ‘#bb-bookblock’ ).bookblock( ‘jump’, position )
- $( ‘#bb-bookblock’ ).bookblock( ‘first’ )
- $( ‘#bb-bookblock’ ).bookblock( ‘last’ )
Oczywiście całość możecie pobrać w przygotowanej paczce: