Přizpůsobení komponent pomocí CSS
Velmi často budete chtít přizpůsobit předpřipravené JavaScript komponenty tak, aby lépe zapadaly do Vašich webových stránek, případně do Vašeho specifického rezervačního procesu. Například, když nechcete používat platebních možností FlexBooku, tak potřebujete schovat tlačítko pro platbu rezervace. Optimální je použít unikátních CSS identifikátorů nebo FlexBook CSS tříd (class), které jsou přiřazeny všem HTML komponentám použitých v rámci JavaScript komponent.
Použití CSS identifikátorů
Níže je uvedena ukázka schování platebních tlačítek pomocí CSS.
1
button#flexbook_resource_calendar_1_editReservationResourceButtonSavePay {
2
display: none;
3
}
4
5
button#flexbook_resource_calendar_2_editReservationResourceButtonSavePay {
6
display: none;
7
}
8
9
button#flexbook_resource_list_editReservationResourceButtonSavePay {
10
display: none;
11
}
Copied!
CSS identifikátory jsou generovány unikátně pro každou komponentu a jako prefix je použit identifikátor FlexBookové JavaScript komponenty. V uvedeném případě jsou to prefixy
  • flexbook_resource_calendar_1
  • flexbook_resource_calendar_2
  • flexbook_resource_list
Ukázka JavaScript kódu pro tento CSS styl je uvedena zde.
1
<script>
2
flbInit('http://www.flexbook.cz/ajax.php',4);
3
flbProfile('flexbook_profil');
4
flbResourceList('flexbook_resource_list');
5
flbResourceCalendar('flexbook_resource_calendar_1', {
6
resourceId: [7],
7
resourceLabel: 'Rezervace',
8
});
9
flbResourceCalendar('flexbook_resource_calendar_2', {
10
resourceId: [7,10],
11
resourceLabel: 'Rezervace',
12
});
13
14
</script>
Copied!
Použití CSS tříd
Jako příklad použití CSS třid použijeme způsob změny textu v konkrétním HTML DIVu, který je použit pro popis (label) konkrétního atributu zdroje z rezervačního systému FlexBook.
V HTML kódu to vypadá následovně
<div class="label flb_event_name_label"><span>Nazev akce:</span></div>
a pomocí CSS stylu jste schopni změnit automaticky generovaný text za text jiný.
1
<style>
2
div.label.flb_event_name_label:after {
3
content: "Event name:";
4
}
5
div.label.flb_event_name_label > span {
6
display: none;
7
}
8
</style>
Copied!
Last modified 3yr ago
Copy link