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:
