Grid, obsahové bloky
(+420) 371 787 838
Grid, obsahové bloky
Obsahové gridy vychází z filozofie jquerymobile grids:
- Maximální počet sloupců je 5
- Každy sloupec - blok uvnitř gridu musí mít jednu z tříd block1, block2, block3, block4, block5. Pořadí sloupců/bloků v gridu dáno sovislou číselnou řadou "blockX" vždy od 1-5.
- Volitelně je každy obsah bloku zabalen do bloku class="bbody".
- Každy nový řádek začína "block1" třídou. Maximální počet řádek je neomezen.
Grid/počet sloupců | Třída (class="") | použitelné třídy pro bloky/sloupce (class="") | Popis |
---|---|---|---|
2 sloupce | grid c2 |
block1, block2 | pořadí bloků je vždy od 1. |
3 sloupce |
|
block1, block2, block3, (blockX two) | |
4 sloupce |
|
block1, block2, block3, block4, (blockX two, blockX three) | |
5 sloupců |
|
block1, block2, block4, block5, (blockX two, blockX three, blockX four) | |
doplňkové třídy: |
|
||
|
např. b grid c4 udělám dva bloky block1 three a block2 | tohle mi rozdělí 4 sloupcový grid na 1 a 3 sloupce dohromady. | |
|
zarovná tlačítka pomocí ABS stylů na spodní hranu bloku. | ||
|
třída aplikovaná na akční odstavec p - speciální blok uvnitř sloupce kde se vysytuje akční tlačítko apod. | ||
|
zarovná akční tlačítko doprava. | ||
|
zarovná akční tlačítko na střed. | ||
|
na všechny bbody bloky je volána JS fce které stsanoví jejich výšku v řádce stejnou. třídou "disAutoHeight" to mohu zakázat. |
Velikosti a barvy tlačítek více viz Tlačítka a ovládací prvky
Ukázky použití vložené přes TinyMce editor - templates
Lorem ipsum dmet, consetetur
sadipscing elitr, sed diam no elitr, elitr, sed diam nonumyscing elitr, sed diamscing elitr, sed diamscing elitr
Lorem ipsum sit amet, consetetur
sadipscing elitr, sed diam no elitr, elitr, sed diam nonumyscing elitr, sed diamscing elitr, sed diamscing elitr
Lorem ipsum dolorcons etetur
sadipscing elitr, sed diam nonumy eirmd tempor invidunt sadipscing elitr, sed diam et dolore magduo dolores accusam et
Lorem ipsum dolor consetetur
sadipscing elitr, sed diam nonumy eirmd tempor invidunt sadipscing elitr, sed diam et dolore magduo dolores accusam et
Lorem sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmd tempor invidunt sadipscing elitr, sed diam et dolore magduo dolores accusam et
Ukázky použití z "test/testGrids.tpl":
ipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod temp
Lorem ipsum dmet, consetetur
sadipscing elitr, sed diam no elitr, elitr, sed diam nonumyscing elitr, sed diamscing elitr, sed diamscing elitr,
Lorem ipsum sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Lorem ipsum dolorcons etetur
sadipscing elitr, sed diam nonumy eirmd tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Lorem ipsum dolor consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Lorem sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Lorem ipsum dolorconsetetur
sadipscing elitr, sed diam nonumy eirmd tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Lorem ipsum dolorconsetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Lorem sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonum et dolore magduo dolores accusam et just et dolore magduo dolores accusam et just et dolore magduo dolores accusam et justy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diat
Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Lorem sitd temporsitd tempor
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Lorem sitet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Lorem, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Lorem sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Lorem sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor iut labore et dolore magduo dolores accusam et justo du
»přečíst si více nebo objednat
Lorem sit amettur
sadipscing elitr, sed diam nonumy eirmodam nonumy dunt ut tempor invidunt od tempor iut laborod tempor iut laborod tempor iut laborut labore et dolore magduo dolores accusam et justo du
- sadipscing elitr, sed diam nonumy
- eirmod tempor iut labore et dolore magduo dolores accusam et justo du
Lorem sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Lorem sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Kombinace grid c4 merged - rozlozeni sloupcu 2-2 s formularem
Lorem ipsum dolorconsetetur
mposadipscing elitr, sed diam nonumy eirmod ter insed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Lorem ipsum
sadipscing elitr, sed diam nonumy eirmod temporeirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Lorem ipsum dolorconsetetur ipsum dolorconsetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed d eirmod tempor invidunt ut labore et eirmod tempor invidunt ut labore et iam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod temporu
Testovaci kombinace c4 gridu
Pokud pouziji jakoukkoliv spojenou cast musim pridat tridu merged je tam potiz s kombinaci 1-1-2 kde nejde vybrat pomoci CSS bez JS prostredni blok.
Kombinace grid c4 merged - rozlozeni sloupcu 1-3
sadipscing elitr, sed diam nonumy eirmod ter insed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam
sadipscing elitr, sed diam nonumy eirmod ter insed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam
Kombinace grid c4 merged - rozlozeni sloupcu 3-1
sadipscing elitr, sed diam nonumy eirmod ter insed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam
sadipscing elitr, sed diam nonumy eirmod ter insed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam
Kombinace grid c4 merged - rozlozeni sloupcu 2-2
sadipscing elitr, sed diam nonumy eirmod ter insed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam
sadipscing elitr, sed diam nonumy eirmod ter insed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam
Kombinace grid c4 merged - rozlozeni sloupcu 2-1-1
sadipscing elitr, sed diam nonumy eirmod ter insed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
sadipscing elitr, sed diam nonumy eirmod ter insed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam
sadipscing elitr, sed diam nonumy eirmod ter insed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam
Kombinace grid c4 merged - rozlozeni sloupcu 1-1-2
!!!POZOR!!! tady nejsou slouce 1 a 2 stejne siroke - kvuli dodrzeni stejne mezery mezi bloky
sadipscing elitr, sed diam nonumy eirmod ter insed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam
sadipscing elitr, sed diam nonumy eirmod ter insed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam
sadipscing elitr, sed diam nonumy eirmod ter insed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
Kombinace grid c4 merged - rozlozeni sloupcu 1-2-1
sadipscing elitr, sed diam nonumy eirmod ter insed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam
sadipscing elitr, sed diam nonumy eirmod ter insed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magduo dolores accusam et justo du
sadipscing elitr, sed diam nonumy eirmod ter insed diam nonumy eirmod tempor invidunt sadipscing elitr, sed diam
Testovaci kombinace c5 gridu
mpor invidunt ut labore et dolore magduo dolores iam nonumy eirmod tempor invidunt ut labore et d eirmod tempor invidunt ut labore et eirmod tempor invidunt ut labore et olore magdu