Zarejestruj się na BitBay.net
Home > jQuery > jQuery + lightBox plugin – formularze wielojęzyczne

jQuery + lightBox plugin – formularze wielojęzyczne

jQueryOstatnimi czasu stanąłem przed zadaniem zrobienia formularza do dodawania nowych wpisów na stronę w kilku językach.  Na początku pomyślałem sobie, że po prostu dla każdego języka zrobię osobne pole na tytuł, treść wpisu itd.  Nie mniej jednak już po kilku minutach tworzenia doszedłem do wniosku, że rozwiązanie to nie jest najlepszym wyjściem ponieważ  cały formularz przy wersji dla czterech języków nie mieścił się na jednej stronie i żeby coś dodać trzeba było przewijać dokument na sam dół.   Rozwiązaniem tego problemu okazało się jQuery oraz jQuery lightBox plugin. Poniżej przykładowy kod.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<head>
<title>jQuery + lightbox = input switcher</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.lightbox.js" type="text/javascript"></script>
<script>
  $(document).ready(function(){
    // na starcie ukrywamy wszystkie pola
    // których className zaczyna się od pole-
    $('div[class^=pole-]').hide();
    // następnie pokazujemy tylko pole z className: pole-pl
    $('div[class^=pole-pl]').show();

    // Obsługa kliknięcia
    // Zczytujemy atrybut id z hiperłącza,
    // dodajemy do niego string 'pole-' i wykonujemy
    // określoną akcję na polu z taką className
    $('a[id^=]').click(function() {
      var $this = $(this);
      var x = $this.attr("id");
      $('div[class^=pole-]').hide();
      $('.pole-' + x).toggle(1000);
     });
   });
</script>
</head>
<body>
<a href="#" id="pl">PL</A> |
<a href="#" id="cz">CZ</A> |
<a href="#" id="en">EN</A>

<div class="pole-pl">
PL: <input type="text" name="tytul_pl">
</div>

<div class="pole-cz">
CZ: <input type="text"  name="tytul_cz">
</div>

<div class="pole-en">
EN: <input type="text"  name="tytul_en">
</div>

</body></html>

Przykład działania

Kategorie:jQuery Tagi:, ,
  1. Brak komentarzy
  1. Brak jeszcze trackbacków

*