Body zdarma Java týden
Využij podzimních slev a získej od nás až 40 % bodů zdarma! Více zde
Pouze tento týden sleva až 80 % na Java e-learning!

Diskuze: Packery

Aktivity (2)
Avatar
hankova31
Člen
Avatar
hankova31:6. června 9:31

Ahoj, nemá někdo zkušenost s touhle knihovnou https://packery.metafizzy.co/ ? Dá se zde v gridu vytvořit více sloupců než 12 případně jak?

Děkuji.

 
Odpovědět 6. června 9:31
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:6. června 11:19

Myslim, ze s tim zbytecne ztracis cas. Zkus bootstrap/css/js i bez js. Tam mas sloupce definovane primo v css. neni problem dopsat dalsi kod.

Edit: Beru zpet, ty to asi chces kvuli tomu drag-drop efektu, ne jen kvuli layoutu.

Editováno 6. června 11:21
 
Nahoru Odpovědět 6. června 11:19
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:6. června 11:28

https://packery.metafizzy.co/options.html
mozna columnWidth, prepisuji hodnotu podle class v css

<style>
/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns wide */
.grid-item--width2 { width: 40%; }
</style>
// use outer width of grid-sizer for columnWidth
columnWidth: '.grid-sizer',
itemSelector: '.grid-item',
percentPosition: true

<!-- in HTML --> (uplne nahore na te strance je jak se to inicializuje s parametry)

<div class="grid" data-packery='{ "itemSelector": ".grid-item", "gutter": 10 }'>
 
Nahoru Odpovědět 6. června 11:28
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:6. června 11:36

Mozna se vyjadruji prilis divne...

Rekneme, ze se program normalne spousti v JS/jquery

var program;
program = new program(); // vytvoreni objektu
program.spustiMe() // spusteni funkce z objektu

A nektere programy umiznuji predtim nastavit ruzne moznosti a nebo v dobe spousteni.

program = new program({a:123}); // vytvoreni + inicializace
program.spustiMe()
//nebo
program = new program(); // vytvoreni
program.spustiMe({a:123}) // inicializace + spusteni

Faze, kdy se neco provede pred spustenim hlavni funkce se nazyva inicializace.

Tve stranky jsem nevidel, nemuzu rici, kterou z tech 3 moznosti nahore na te strance mas pouzit. jquery nebo vanila nebo html. Staci jedna z nich.

 
Nahoru Odpovědět 6. června 11:36
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
hankova31
Člen
Avatar
Odpovídá na Peter Mlich
hankova31:6. června 11:39

Potřebuji to právě kvůli drag and drop, jinak bych to udělala jinak, jenže sloupců potřebuji zkrátka více než 12 a co jsem koukala tak všechny knihovny co jsem k tomu nějak našla tak jsou napsané na max. 12 sloupců a nevím si rady jak to upravit. S tou sirkou jsem to taky zkoušela, jen se změní šířka, ale sloupců zůstane max. 12...

 
Nahoru Odpovědět 6. června 11:39
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:6. června 13:02

Pokud je to fixne 12, tak si to prepis v js kodu na jine cislo

Na teto strance jsem prepsal tyto cisla a podle mne to nejak prizpusobuje pocet sloupcu.
https://codepen.io/…ro/pen/fGrKe

.grid-sizer {  width: 5%;}
.grid-item--width2 { width: 10%; }
.grid-item--height2 { height: 200px; }

$('.grid').isotope({
  layoutMode: 'packery',
  itemSelector: '.grid-item',
  percentPosition: false,
  packery: {
    gutter: 2
  }
});
 
Nahoru Odpovědět 6. června 13:02
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:6. června 13:12

https://codepen.io/…ro/pen/fGrKe
do html jsem si nakopiroval asi 20x <div class="grid-item"></div> nebo <div class="grid-item">1</div>
.grid-sizer { width: 5%;}
.grid-item--width2 { width: 10%; }
gutter: 12
na jedne sirce okna mam 17 obdelnicku(proto ty cisla uvnitr divu)
na jine 16 ctverecku
On nejspis vypocita pocet moznych sloupcu a pak se snazi nejak roztahnout ty obdelnicky, pokud jsou resene na %.

 
Nahoru Odpovědět 6. června 13:12
Avatar
hankova31
Člen
Avatar
hankova31:6. června 13:18

Díky, s tímhle už asi něco udělám!

 
Nahoru Odpovědět 6. června 13:18
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.