jQuery plugins - Wookmark
ápr 27

Wookmark

Grid layout

Verzió: 0.5
Kiadás dátuma: 2012/03/19
Fejlesztő: Christoph Ono
Liszensz: MIT

Bevezető

A Wookmark oldalán található grid felület most már saját honlapunkra is könnyedén ráhúzható. A Wookmark tette közzé a plugin-t, melynek segítségével az oldalon megjelenített, eltérő hosszúságú elemek mindig az aktuális böngészőmérethez igazodnak, automatikusan szerveződnek.

Implementálás

CSS

            <link rel="stylesheet" type="text/css" href="css/style.css" />
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.wookmark.min.js"></script>
          

Deklaráció

            $(document).ready(function(){
              $('#pelda li').wookmark({
                container: $('#kontener');
              });
            });
          

Használat

            <div id="kontener">
              <ul id="pelda">
                <li><img src="img1.jpg" width="" height="" alt="" /></li>
                <li><img src="img2.jpg" width="" height="" alt="" /></li>
                <li><img src="img3.jpg" width="" height="" alt="" /></li>
                ...
              </ul>
            </div>
          

Teljes paraméterlista

  • container: a rácsba rendezendő elemek konténer eleme - fontos: a konténer elem relatív pozicionálású kell, hogy legyen (alapértelmezett: $('body'))
  • offset: az elemek közti (vízszintes és függőleges) térköz pixelben (alapértelmezett: 2)
  • autoResize: a böngészőablak átméretezésekor a felület automatikus frissítésének engedélyezése/tiltása (true | false) (alapértelmezett: false)
  • itemWidth: az elemek szélessége pixelben (alapértelmezett: $(this[0]).outerWidth())
  • resizeDelay: a böngészőablak átméretezését követően az elemek újraszervezésének késleltetése másodpercben (alapértelmezett: 50)