czwartek, 3 października 2013

Tabs jQuery

Prosty tabs w jQuery

<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
  <script>
  $(document).ready(function() {
    $("#tabs").tabs();
  });
  </script>
</head>
<body style="font-size:62.5%;">
<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>Zakladka pierwsza</span></a></li>
        <li><a href="#fragment-2"><span>Zakladka druga</span></a></li>
        <li><a href="#fragment-3"><span>Zakladka trzecia</span></a></li>
        <li><a href="#fragment-4"><span>Zakladka ...itp</span></a></li>     
    </ul>
    <div id="fragment-1">
        <p>Pierwsza zakladka kod  :)</p>
        <pre><code>$('#example').tabs();</code></pre>
    </div>
    <div id="fragment-2">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div id="fragment-3">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
     <div id="fragment-4">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>
</body>
</html>
Autor: o
Etykiety:

Brak komentarzy:

Prześlij komentarz

Subskrybuj: Komentarze do posta (Atom)

lubię to

Popularne posty

  • Prosta strona w php
    Jest to bardzo prosty przykład ale demonstruje sposób budowania stron w php Nagłówek strony naglowek.php <?php // sprawdzenie czy zmie...
  • Integracja Zoo z Jcomments
    Pobieramy paczkę com_zoo.plugin.php Link do paczki I umieszczamy w components/com_jcomments/plugins .  Następnie Pobieramy Pozostałe 3 el...
  • jQuery panel boczny
    Dzisiaj pokażę w jaki sposób stworzyć wysuwany panel boczny z wykorzystaniem jQuery i css3 ----------------------------------------------...
  • Bootstrap joomla zastosowanie
    Bootstrap zastosowanie Czym jest twitter bootstrap nie bende się rozwodził ,najogólniej to frameworkiem HTML5, CSS3, JS (jQuery) to co ...
  • microdata ,itemscope ,itemtype
     Jak oznaczyć zawartość za pomocą microdata  1.Co to jest microdata: Kiedy czytasz strone bądz wstęp do niej wisz o czy jest w zasadzie ....
  • zablokować bingbota
    Jak zablokować bingbota Blokowanie msnbot lub jak kto woli bingbota to nie zawsze prosta sprawa.Postanowiłem napisać kilka słów na ten tema...
  • Joomla B2J Contact
    Joomla  B2J contact   Polecam wszystkim ten znakomity komponent .Sporo opcji dobra konfiguracja
  • joomla easy blog jos_easyblog_fields_groups_acl' doesn't exist
    Jak to naprawić administrator/components/com_easyblog/models/fieldgroupacl.php edytujemy i zmieniamy : $query = 'DELETE FROM `jos_ea...
  • Pisanie modułu joomla 2.5
    Pisanie modułu joomla 2.5 Dzisiaj pokażę jak napisać moduł joomla prosty W skład modułu joomla  wejdą -mod_helloworld.php (silnik całego ...
  • Joomla przekierowanie 404
    Modyfikujemy plik  error.php  umieszczamy w folferze głównym szablonu domyslnego strony . Zawartość pliku error.php . Po tym zabiegu , po w...