Skocz do zawartości
Forum komputerowe

jQuery loader by JacobCode.pl


Rekomendowane odpowiedzi

Dzisiaj przedstawie Wam, jak w prosty sposób wykonać loader na waszą stronę WWW.
Zacznijmy od samego pliku js który pobieramy z załącznika. Wgrywamy folder z pliczkiem do głównego katalogu naszej strony.

Czas na index.html. W tym pliku w sekcji head wklejamy 2 linijki:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<script type="text/javascript" src="js/queryLoader.js"></script> 

Pierwsza odpowiada za jquery druga zaś za nasz loader.

przed znacznikiem </body> wklejamy kod który uruchamia nasz loader:

<script type="text/javascript"> 

   QueryLoader.init(); 

</script>

Czas na styl. Otwieramy plik css i wklejamy ten oto kod:

.QOverlay{ 
background-color:#080808;  
z-index:9999; 
} 

.QLoader{ 
height:1px; 
background-color:#1485dd; 
}

.QOverlay - odpowiada za kolor tła.

QLoader - kolor naszego loadera i szerokość paseczka.

Poradnik napisany przez JacobCode.pl

Odnośnik do odpowiedzi
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.
  • Podobna zawartość

    • Przez Dazai
      Zajmuje się tworzeniem stron internetowych HTML, landing-page, one-page, strony wizytówki, a także proste szablony pod CMS Wordpress. Oferuje staranność, dokumentacje, nowoczesność a przede wszystkim przejrzysty kod zrozumiały nawet dla laika. 
      Wykonam: strony HTML, landing-page, one-page, multi-page, blogowe szablony WordPress
      Zakres umiejętności:
      HTML5 & CSS3 JavaScript (podstawowy) Bootstrap 3.x UIKit  RWD WordPress Sass & Gulp.js Adobe Photoshop Podstawy UI/UX Chętnych zapraszam do kontaktu a także przejrzenia mojego portfolio, gdzie link dostępny jest na moim profilu forumowym.
      Kontakt: PW na forum lub [email protected]
    • Przez Magmus
      Cześć mam pytanie do was jak zrobić efekt rozwijanego menu / listy w jQuery ? Widziałem coś takiego jak slideUp collapse ale nie wiem jak tego użyć w moim kodzie :| 
      link do mojej strony: CodeStudio
    • Przez krugerz
      Nie znalazłem na internecie żadnego fajnego pluginu dropdown do jquery, więc napisałem swój. Zamyka się po kliknięciu na obszar poza blokiem, a otwiera po wciśnięciu wybranego elementu.

      Screen/Demo: Edit fiddle - JSFiddle

      HTML
      <span id="activer">Otwórz</span> <ul class="dropdown"> <li>test</li> <li>test 2</li> </ul> CSS
      .dropdown { background: #ccc; list-style: none; padding: 10px; margin: 0; width: 100px; border: 1px solid #000; } .dropdown li { border-bottom: 1px solid #000; } #active { cursor: pointer; display: block; } jQuery
      (function($) { $.fn.dropdown = function(options) { var el = $(this); if (typeof options["activer"] !== "undefined" && $(options["activer"]).length != 0) { var activer = $(options["activer"]); el.hide(); activer.click(function(e) { e.stopPropagation(); el.fadeToggle(); }); $(document).click(function(e) { if(!el.is(":hidden") && !$(e.target).is(el) && !$(e.target).parents().is(el) && !$(e.target).is(activer)) { el.fadeOut(); } }); } } })(jQuery); $(".dropdown").dropdown({ activer: '#activer' })
    • Przez -n3veR
      Cześć! To znowu ja i kolejne nabijanie reputacji
      Efekt:
      Demo:
      Ukryta zawartość
      Przyznaj reputację lub odpowiedz w temacie aby zobaczyć ukrytą zawartość.
×
×
  • Dodaj nową pozycję...