| Autor | Zpráva | ||
|---|---|---|---|
| blaaablaaa Profil |
#1 · Zasláno: 3. 3. 2020, 11:24:39
Ahoj,
mám na webu nekonečné stránkování (tlačítko "Načíst další"), které vždy načte X dalších položek s pevnou šířkou, které jsou zobrazeny v gridu. Jak ale řešit takové stránkování v responzivním webu tak, aby načtené položky vždy vyplnily celý řádek a nestalo se například toto: X X X X X X X X X X X X Načíst další a po načtení např. 8 dalších: X X X X X X X X X X X X X X X X X X X X Načíst další Napadlo mě jedině při prvním načtení zobrazit jen celé řádky a zbytek skrýt. Při dalším ajaxovém požadavku už vím, kolik položek se vejde na jeden řádek, takže si dopočítám, kolik jich načíst. Je toto správné řešení nebo to lze vyřešit nějak elegantněji? |
||
| Kcko Profil |
#2 · Zasláno: 3. 3. 2020, 11:33:02
Nerozumím. Načítáš další tak, aby ti to vyplnilo řádek (to máš mít vyřešeno v CSS), pokud máš např. produkty po 4, tak načítám např. dalších 12, takže to vyjde.
Pokud se dostaneš na konec (což se dostane málokdo), tak pak tlačítko stejně zmizí. |
||
| Kajman Profil |
#3 · Zasláno: 3. 3. 2020, 12:39:48
blaaablaaa:
A co když si uživatel otočí telefon? To už nevadí, že to nesedí? Nejjednodušší je, pokud je omezený počet možných sloupců, pak se dá dotahovat množství, které je všemi možnostmi dělitelné - např. 60. A u toho ajaxu můžete přeci také ignorovat ty, co by přebývaly - tedy říci si o víc, ale zapamatovat si, že jsem zobrazil jen některé. |
||
| blaaablaaa Profil |
#4 · Zasláno: 3. 3. 2020, 13:29:18
Kcko:
Položek může být 2-6 na řádku, takže nevím, kolik jich aktuálně je a není to vždy dělitelné tak, aby to vyšlo. Kajman: Načítám sudý počet a pokud otočí telefon, vychází to 2 na řádek, takže tady v pořádku. Nejspíš to tedy udělám tak, že načtu více a zobrazím tak, aby to vždy vyšlo na celý řádek a zbytek při dalším načtení. |
||
| blaaablaaa Profil |
Řešení pro bootstrap + jquery, kdyby se někomu hodilo:
1. Detekce aktualniho breakpointu: <div class="device-xs visible-xs"></div> <div class="device-sm visible-sm"></div> <div class="device-md visible-md"></div> <div class="device-lg visible-lg"></div> function getBreakpoint() {
if ( $('.device-lg').is(':visible') ) {
return 'lg';
}
if ( $('.device-md').is(':visible') ) {
return 'md';
}
if ( $('.device-sm').is(':visible') ) {
return 'sm';
}
if ( $('.device-xs').is(':visible') ) {
return 'xs';
}
return 'xxs';
}2. podle breakpointu pak vím, kolik prvků je na řádku (šlo by zautomatizovat a vyčíst z col-breakpoint-X) const per_line = {'lg': 6, 'md': 4, 'sm': 3, 'xs': 2}; //pocet prvku na radek dle breakpointu
const $items = $('#container .item'); //jednotlive prvky
const item_cnt = $items.length;
// detekce posledni stranky
if ( isLastPage() ) {
$items.show();
return;
}
const show_only_cnt = (item_cnt - item_cnt % per_line[getBreakpoint()]); //spocitam si, kolik jich mam zobrazit
$items.show().slice(show_only_cnt).hide(); // zobrazim vsechny, prebytek skryju |
||
| Kajman Profil |
#6 · Zasláno: 5. 3. 2020, 11:20:11
A opravdu není jednodušší v úvodním zobrazení i v dotahovaní dalších položek používat počet dělitelný 12?
|
||
| blaaablaaa Profil |
#7 · Zasláno: 5. 3. 2020, 14:03:49
Kajman:
Je, pokud člověk není idiot :D Původně jsem nejel v bs gridu a zobrazoval jsem třeba i 5 prvků na řádek a dotahovat 60 už jsem nechtěl ... přepsal jsem to pak do bs a neuvědomil si, že teď už to bude jednoduché a vymýšlel složitosti ... díky |
||
|
Časová prodleva: 4 roky
|
|||
0