jQuery plugins - Uniform
aug 11

Uniform

Egyedi űrlap jQuery-vel

Verzió: 1.7.3
Kiadás dátuma: 2010/02/09
Fejlesztő: Josh Pyles
Liszensz: MIT

Bevezető

Aki CSS-sel átszabta már az űrlapjait, biztos találkozott azzal a problémával, hogy a következő űrlapelemeket nem lehet(ett eddig) rábírni a változásra (CSS-sel):

  • jelölőnégyzet (checkbox)
  • rádió gomb (radio button)
  • lebomló menü (select)
  • file feltöltő mező

A Uniform segítségével ezeket is átszabhatjuk ízlésünknek megfelelően, és úgy, hogy a végeredmény kompatibilis marad a következő böngészőkkel:

  • Safari 3+
  • Firefox 3+
  • IE7+
  • Chrome
  • Opera 10+

Implementálás

CSS

            <link type="text/css" rel="stylesheet" href="uniform.default.css" media="screen" />
          

JavaScript

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

Deklaráció

Bármely űrlapelemet át lehet "rajzolni". Hogy melyikeket szeretnénk, azt a deklaráció során kell megadnunk:

            $(document).ready(function(){
              $("select, input:checkbox, input: radio, input:file").uniform();
            });
          

Teljes paraméterlista

  • selectClass: CSS osztály hozzárendelése a lebomló menü konténer eleméhez
    (alapértelmezett: 'selector')
  • radioClass: CSS osztály hozzárendelése a rádió gomb konténer eleméhez
    (alapértelmezett: 'radio')
  • checkboxClass: CSS osztály hozzárendelése a jelölőnégyzet konténer eleméhez
    (alapértelmezett: 'checker')
  • fileClass: CSS osztály hozzárendelése a file feltöltő elem konténer eleméhez
    (alapértelmezett: 'uploader')
  • filenameClass: CSS osztály hozzárendelése a file feltöltő elemen belüli, a kiválasztott file nevét megjelenítő elemhez (alapértelmezett: 'filename')
  • fileBtnClass: CSS osztály hozzárendelése a file feltöltő elemen belül ahhoz a div-hez, amely "tallózás" gombként funkcionál (alapértelmezett: 'action')
  • fileDefaultText: a file nevet megjelenítő elem felirata (alapértelmezett: 'No file selected')
  • fileBtnText: a file feltöltés gomb felirata (alapértelmezett: 'Choose File')
  • checkedClass: CSS osztály hozzárendelése az aktív (kiválasztott) elemekhez - rádió gomb és jelölőnégyzet esetén (alapértelmezett: 'checked')
  • focusClass: CSS osztály hozzárendelése a fókuszban lévő elemekhez (alapértelmezett: 'focus')
  • disabledClass: CSS osztály hozzárendelése a letiltott elemekhez (alapértelmezett: 'disabled')
  • activeClass: CSS osztály hozzárendelése az aktív (adott pillanatban benyomott állapotban lévő) elemekhez (alapértelmezett: 'active')
  • hoverClass: CSS osztály az elemek hover eseményéhez (alapértelmezett: 'hover')
  • useID: ha értéke igaz (true), akkor minden űrlapelem konténer div-jéhez hozzárendel egy ID-t, amely az adott űrlapelem ID-jéből és az idPrefix paraméterben megadott prefix (előtag) sztringből tevődik össze (alapértelmezett: 'true')
  • idPrefix: ez a sztring lesz minden űrlapelem konténer div-jének ID előtagja, ha a useID paraméter igazra van állítva (alapértelmezett: 'uniform')
    Pl. ha egy inputbox ID-je 'telefon', akkor az inputbox konténer div-jének ID-je így alakul alapbeállítások mellett: 'uniform-telefon'
  • resetSelector: egy selector megadásával "reset" gomb állítható be az űrlaphoz
    (alapértelmezett: 'false')

Tippek

  • Ha az űrlap értékeit dinamikusan kívánjuk módosítani, akkor a változtatások életbe léptetéséhez frissíteni kell az űrlapot, amely az update() metódus meghívásával történik:
                    $.uniform.update(); 
                  
    Ebben az esetben minden űrlapelem frissül, de lehetőség van csak egy meghatározott elem frissítésére is, ekkor a kívánt elem azonosítóját kell paraméterként megadnunk:
                    $.uniform.update('#urlapelemID'); 
                  
  • A Uniform űrlap elemeit le lehet kérdezni az elements metódus meghívásával, amely egy tömbben adja vissza az összes DOM elemet:
                    var uniformUrlapelemek = $.uniform.elements;
                  
  • A plugin fejlesztői úgy gondolták (nagyon rendes amúgy tőlük), hogy megadnak minden segítséget ahhoz, hogy a plugin-t bárki könnyedén átszabhassa saját ízlésének megfelelően. Ehhez kapunk egy Theme kit-et, amely .psd sablonokat tartalmaz, illetve ehhez társul még egy online alkalmazás is, mellyel az új témánkhoz szükséges kódot generálhatjuk le.
    Theme kit letöltése
    Custom theme generator
  • A gyártó oldalán kész témákat is találunk - érdemes megnézni!
  • A plugin IE6 alatt nem működik! Ez azonban csak a módosított kinézetet érinti, az űrlap ettől még a hagyományos formájában megjelenik.

Oldalak