jQuery plugins - fg.menu
aug 09

fg.menu

iPod stílusú drilldown menü

Verzió: 3.0
Kiadás dátuma: 2009/03/31
Fejlesztő: filament group
Liszensz: MIT, GPL
  • 2123
  • 10619
  • 0
  • -

Bevezető

Ha valaki ismeri a ThemeRoller nevű kis okosságot, annak feltűnhet, hogy azt is és ezt a plugin-t is egyazon cég fejlesztette. Természetesen innen egyből következik, hogy a plugin könnyedén személyre szabható a ThemeRoller-rel (a letölthető forráskódban is benne van egy témaválasztó).

Én azonban neki estem saját kezűleg átszabni... hát nem volt egyszerű. Maga a plugin könnyedén implementálható bármely oldalba, de ha valaki arra adná a fejét, hogy a CSS-t saját kezűleg módosítsa, az készüljön fel rá, hogy valószínűleg kicsit több időt kell majd rá szánnia... Ennyit a "bevezető" bevezetéseként.

De visszatérve magára a plugin-ra: miért is jó ez?

Talán nem csak én gondolom úgy, hogy a többszintű menükkel (és itt nem a kétszintűekre gondolok) mindig csak a baj van. A lebomló (dropdown) megoldás nem igazán felhasználóbarát: ha nagy nehezen a hatos színtű menüben eljutunk az ötödik szintig és véletlenül rossz helyre téved az egérmutató, akkor az bezáródik és kezdhetjük előröl az egész műveletet.

Ezzel a plugin-nal egy- és többszintű dropdown menü is megvalósítható, de nem ebben rejlik az "ereje". Az erő ott van, hogy segítségével iPod stílusú drilldown kinézetet és működést is biztosíthatunk a többszintű menünknek, ami teljesen felhasználóbarát és még jól is néz ki!

Implementálás

CSS

            <link type="text/css" rel="stylesheet" href="fg.menu.css" media="screen" />
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/fg.menu.js"></script>
          

Deklaráció

            $(document).ready(function(){
              $('#myMenu').menu({ 
                content: $('#myMenu').next().html()
              });
            });
          

Lehetőség van rá, hogy a menü tartalmát a plugin egy külső állományból olvassa be, erre példa a bemutató oldalon látható.

Használat

A többszintű menük kialakítása HTML szintjén a szokásos módon történik: egymásba ágyazott listákkal. Pont emiatt a plugin könnyedén alkalmazható már meglévő oldalak esetében is.

Teljes paraméterlista

  • content: a menü tartalma (alapértelmezett: null)
  • width: a menü konténerének szélessége pixel-ben (alapértelmezett: 180)
  • maxHeight: a menü konténerének maximum magassága pixel-ben. iPod stílusú menü esetén ebbe nem tartozik bele a breadcrumb (alapértelmezett: 180)
  • positionOpts: a menü helyzete a megnyitott menüponthoz képest (lehetséges értékeit lásd lejjebb)
  • showSpeed: a megjelenítés sebessége (alapértelmezett: 200)
  • callerOnState: CSS osztály, melyet az aktív menüponthoz rendelünk
    (alapértelmezett: 'ui-state-active')
  • loadingState: CSS osztály, amellyel személyre szabhatjuk a menüpontot, amíg a hozzá tartozó almenü kirajzolódik (alapértelmezett: 'ui-state-loading')
  • linkHover: CSS osztály, amellyel személyre szabhatjuk a hover állapotot
    (alapértelmezett: 'ui-state-hover')
  • linkHoverSecondary: alternatív CSS osztály hover állapothoz többszintű menük esetén
    (alapértelmezett: 'li-hover')

iPod- és flyout-stílusú menük esetén

  • crossSpeed: az átmeneti effekt sebessége (alapértelmezett: 200)
  • crumbDefaultText: az iPod-stílusú menüben a breadcrumb alapértelmezett szövege (alapértelmezett: Choose an option:)
  • backLink: boolean típus paraméter, amellyel engedélyezhetjük a 'vissza' gombot a menü alján (alapértelmezett: true)
  • backLinkText: a 'vissza' gomb szövege (alapértelmezett: 'Back')
  • flyOut: alapértelmezett esetben a többszintű menü iPod-stílusú, azonban ezzel a paraméterrel engedélyezhetjük a hagyományos lebomló stílust (alapértelmezett: false)
  • flyOutOnState: CSS osztály a menüponthoz, amelynek az almenüi látszódnak
    (alapértelmezett: 'ui-state-default')
  • nextMenuLink: CSS osztály az almenüvel rendelkező link-ekhez
    (alapértelmezett: 'ui-icon-triangle-1-e')
  • topLinkText: a breadcrumb-ban a legfelső szintre mutató link szövege (alapértelmezett: 'All')
  • nextCrumbLink: CSS osztály a breadcrumb-ben az egyes szintek elválasztásához
    (alapértelmezett: 'ui-icon-carat-1-e')

A 'positionOpts' paraméter lehetséges értékei:

  • posX: a menü bal szélének az igazítása ('left' | 'right') (alapértelmezett: 'left')
  • posY: a menü tetejének az igazítása ('top' | 'bottom') (alapértelmezett: 'bottom')
  • offsetX: a menü vízszintes eltolása - pixel-ben (alapértelmezett: 0)
  • offsetY: a menü függőleges eltolása - pixel-ben (alapértelmezett: 0)
  • directionH: a menü vízszintes kinyílásának iránya ('left' | 'right') (alapértelmezett: 'right')
  • directionV: a menü függőleges kinyílásának iránya ('top' | 'bottom') (alapértelmezett: 'bottom')
  • detectH: vizsgálja-e a vízszintes irányú ütközést/kilógást ('true' | 'false') (alapértelmezett: 'true')
  • detectV: vizsgálja-e a függőleges irányú ütközést/kilógást ('true' | 'false') (alapértelmezett: 'true')

Tippek

  • A plugin a jQuery 1.4.2-es verziójával működik, azonban pl. az 1.6.1-es verzióval már nem, vagy nem megfelelően!