jQuery plugins - ddSlick
jan 10

ddSlick

Formás lebomló menü

Verzió: 2.0
Kiadás dátuma: 2012
Fejlesztő: Prashant Chaudhary
Liszensz: nincs adat
  • 1458
  • 9937
  • 0
  • -

Bevezető

A ddSlick segítségével olyan lebomló menüket készíthetünk, amelyek elemeiben akár képeket is megjeleníthetünk (pl. kiválóan alkalmas nyelvválasztó menük létrehozására, ahol a nyelv neve mellett az adott ország zászlóját is szeretnék feltüntetni). További érdekessége, hogy a lebomló menü előállításához a szükséges adatokat akár JSON formátumban is megadhatjuk.

Implementálás

JavaScript

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

Deklaráció

            $(document).ready(function(){
              $('#pelda').ddslick();
            });
          

Használat

A plugin kétféleképpen vehető használatba. Az egyik megoldás, hogy a lebomló menü adatait JSON forrásból olvassuk be, ez esetben a plugin-nak csak egy konténer elemre van szüksége:

            <div id="json-pelda"></div>
          

A másik megoldás a <select> (HTML5) alkalmazása:

            <select id="html5-pelda">
              <option value="0" data-imagesrc="kep1.jpg" data-description="Leírás 1">
                Első menüpont címe
              </option>
              <option value="1" data-imagesrc="kep2.jpg" data-description="Leírás 2">
                Második menüpont címe
              </option>
              <option value="2" data-imagesrc="kep3.jpg" data-description="Leírás 3">
                Harmadik menüpont címe
              </option>
              ...
            </select>
          

Teljes paraméterlista

  • data: adatok beolvasása JSON formátumból (példa a bemutató oldalon) (alapértelmezett: '[ ]')
  • width: a lebomló menü szélessége képpontban (alapértelmezett: 260)
  • height: a lebomló menü magassága képpontban (ha a lebomló rész meghaladja a definiált magasságot, automatikusan aktiválódik egy görgető sáv) (alapértelmezett: null)
  • background: a lebomló menü háttérszíne (hexadecimális színkód mellett CSS deklaráció is használható: background: #000 url(kep.jpg) no-repeat 0 0) (alapértelmezett: '#eee')
  • selectText: alapértelmezett szöveg, ha még nincs kiválasztva opció (alapértelmezett: 'Select...')
  • imagePosition: a képek tájolása a lebomló menüben ('left' | 'right') (alapértelmezett: 'left')
  • showSelectedHTML: elem kiválasztásakor a teljes elem megjelenítésének engedélyezése/tiltása (false érték esetén csak a cím jelenik meg) (true | false) (alapértelmezett: true)
  • defaultSelectedIndex: kezdeti aktív elem sorszáma (alapértelmezett: null)
  • truncateDescription: hosszú szöveg tördelésének engedélyezése/tiltása, ha az adott elem az aktív (az opció tiltása esetén a lebomló menü magassága automatikusan igazodik a hosszú szöveghez) (true | false) (alapértelmezett: true)
  • onSelected: függvény meghívása, ha kiválasztottunk egy elemet (alapértelmezett: 'function () { }')
  • keepJSONItemsOnTop: lehetőség van a plugin beállításánál, hogy egyszerre használjuk a HTML és a JSON forrásból való olvasást. Adott opció segítségével engedélyezhetjük/tilthatjuk, hogy a HTML adatok felülíródjanak, ha ugyanaz az adat a JSON forrásban is megtalálható. (true | false) (alapértelmezett: false)

Metódusok:

  • select: tetszőleges elem kiválasztása
                    $('#pelda').ddslick('select', {index: i });
                  
  • open: a lebomló menü lenyitása
                    $('#pelda').ddslick('open');
                  
  • close: a lebomló menü bezárása
                    $('#pelda').ddslick('close');
                  
  • destroy: plugin megszüntetése
                    $('#pelda').ddslick('destroy');