jQuery plugins - Curtain
feb 23

Curtain

Egy oldalas weblapokhoz

Verzió: 1.1
Kiadás dátuma: 2011
Fejlesztő: Victor Coulon
Liszensz: MIT

Bevezető

Látványos plugin, amely leginkább az 'egy oldalas' weboldalaknál (single page website) hódít mostanság. Az effektusra nem tudom, létezik-e valamiféle szakszó, mindenesetre a Curtain plugin készítője találóan 'függöny hatás'-nak hívja.

Kompatibilitás:

  • Safari
  • Firefox
  • Chrome
  • IE7 / IE8 / IE9
  • iOs (iPhone/iPad) - a 'curtain' effekt nem engedélyezett
  • Android (Chrome/Opera) - a 'curtain' effekt nem engedélyezett

Implementálás

CSS

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

JavaScript

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

Deklaráció

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

Használat

A használathoz hozzunk létre egy listát - ennek elemei szolgáltatják az egyes paneleket:

            <ol class="curtains">
              <li id="intro">
                Első panel tartalma...
              </li>
              <li>
                Második panel tartalma...
              </li>
              ...
            </ol>
          

Belső linkek (horgonyok) használatához a kívánt panelhez egyedi azonosítót kell rendelni.
(pl. a fenti példában az első panel esetén ez "intro")

Navigációs gombok használata:

            <ul class="menu">
              <li><a href="#up" title="fel">↑</a></li>
              <li><a href="#down" title="le">↓</a></li>
            </ul>
          

Teljes paraméterlista

  • scrollSpeed: scrollozás sebessége (alapértelmezett: 400)
  • menu: CSS szelektor navigációs gombokhoz (fel/le) (alapértelmezett: null)
  • curtainLinks: belső linkek (horgonyok) CSS szelektora (alapértelmezett: '.curtain-links')

Tippek

  • A plugin a jQuery 1.6.1-es verziójával nem működött, így aki a jelenlegi legfrissebb (1.7.1) verziónál régebbi jQuery-t használ, előtte mindenképpen tesztelje vele a plugin-t!
  • A panelekhez dinamikusan is hozzá lehet fűzni újabb panelt az insert () metódus segítségével:
                    var html = [
                      '<h1>Cím!</h1>',
                      '<p>Tetszőleges tartalom...</p>'
                    ].join('');
    
                    $('#pelda').data('plugin_curtain').insert({
                      html: html,
                      htmlId: 'ujPanel',
                      htmlClass: 'cover'
                    });