Vivee - wordpress, webmastering, grafika i fotografia » Skrypty client-side http://vivee.info Blog o wordpress, webmasteringu, grafice i fotografii. Sat, 01 Jan 2011 22:14:10 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 jQuery Cycle http://vivee.info/2011/01/01/jquery-cycle/ http://vivee.info/2011/01/01/jquery-cycle/#comments Sat, 01 Jan 2011 22:14:10 +0000 agressiva http://vivee.info/?p=2125 jQuery Cycle to jedna z wielu ogólnodostępnych wtyczek, która pozwala nam zastosować na naszej stronie obecnie najpopularniejszy element - slider.
W porównaniu do innych gotowych rozwiązań pozwala nam dobrać wiele efektów przejścia obrazów - od tradycyjnego przenikania po bardziej złożone zmiany z wykorzystaniem zmiany położenia lub nawet wielkości zamieszczonych obrazków.

Jeszcze jedną jego zaletą jest rozbudowana dokumentacja i ogromna ilość podanych przykładów wdrożenia.
Oto strona oficjalna wtyczki: jQuery Cycle Plugin

demopobierz

jQuery Cycle

Instalacja:

Aby zainstalować ten plugin przede wszystkim musimy w sekcji kodu zamieścić bibliotekę jQuery:

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

A także główny skrypt jQuery Cycle:

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>

Podałam tutaj odnośniki zewnętrzne, ale oczywiście wtyczkę możecie pobrać ze strony autora: jQuery Cycle Plugin - Download

Ponadto należy zamieścić skrypt, w którym bardzo łatwy sposób określimy jaki efekt chcemy zastosować w swoim sliderze:

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
                //zdefiniowany efekt
        });
});
</script>

$('.slideshow') - nazwa diva, w którym umieszczamy slider

Struktura:

Jako, że jest to slider do zdjęć, to jego struktura ogranicza się do diva głównego oraz samych obrazków:

<div class="slideshow">
        <img src="img1.png" alt="" height="300" width="800" />
        <img src="img2.png" alt="" height="300" width="800" />
        <img src="img3.png" alt="" height="300" width="800" />    
</div>

Efekty

Przedstawię Wam kilka efektów jakie możemy uzyskać dzięki jQuery Cycle
Aby zastosować określony efekt należy w sekcji zamieścić odpowiedni kod i ewentualnie dostosować go do indywidualnych potrzeb:

1. Fade - czyli tradycyjne przenikanie:
Zobacz efekt

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
                fx: 'fade',
                speed: '2500',
        });
});
</script>

2. Scrolldown - przewijanie z góry na dół:
Zobacz efekt

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
                fx: 'fade',
                speed: '2500',
        });
});
</script>

3. Zoom:
Zobacz efekt

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
fx:    'zoom',
sync:   0,
delay: -4000
        });
});
</script>

4. Shuffle - przekładanie się zdjęć:
Zobacz efekt

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
                fx:    'shuffle',
    delay: -4000
        });
});
</script>

5. Scrollleft - przewijanie w lewo
Zobacz efekt

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
                fx:     'scrollLeft',
    timeout: 5000,
        });
});
</script>

6. Multi - zastosowanie wielu efektów jednocześnie
Zobacz efekt

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
                fx:     'scrollHorz,zoom,fadeZoom,slideX,turnUp,scrollHorz,toss,uncover,scrollDown,shuffle,wipe,fade',
    timeout: 5000,
        });
});
</script>

Te oraz inne efekty dokładnie opisane i zobrazowane znajdziecie na: Beginner Demos

Mam nadzieję, że ten prosty instruktarz okażę się pomocny.

]]> http://vivee.info/2011/01/01/jquery-cycle/feed/ 14 Jak za pomocą js poprawić wygląd formularzy http://vivee.info/2010/06/03/jak-za-pomoca-js-poprawic-wyglad-formularzy/ http://vivee.info/2010/06/03/jak-za-pomoca-js-poprawic-wyglad-formularzy/#comments Thu, 03 Jun 2010 23:02:29 +0000 palmiak http://vivee.info/?p=2036 Tworząc strony dość często trzeba powojować z formularzami. Niestety dość często się zdarza współpraca z grafikiem, który o htmlu to za dużo nie wie, a wizje formularzy ma dość... finezyjne (np. ostylowany button przy input type="file"). Wtedy możemy albo zacząć ostro kombinować (background, js, pełna przezroczstość... po prostu cuda) albo powiedzieć, że się nie da. Ostatecznie pozostaje nam użyć Niceforms, czyli skryptu, w którym autor ostro pokombinował za nas.

demo

Jak to działa?

Dla usera - po prostu banalnie. Całość ogranicza się do dopisania linijki (załączenie skryptu) oraz dopisania class="niceform". Dodatkowo jeżeli chcemy zmienić wygląd formatek należy zedytować pliczek psd załączony do archiwum i zapisać obrazki.

Pod maską już się dzieje o wiele więcej rzeczy. Najprościej mówiąc wszystko działa na zasadzie ukrycia pola formularza, utworzenia nowego obiektu, który służy głównie do wyglądania oraz przekazywania wartości wpisywanej/wyklikiwanej w nasz nowy twór do ukrytego już pola.

Taki niestety urok stylowania formularzy i stąd tak kombinacje.

Prosty formularzyk

Najpierw będziemy bazować na tym co otrzymujemy z Niceforms.

Nasz formularzyk będzie banalnym polem do wpisania jakiegoś słowa.

Po pierwsze pobieramy Niceforms ze strony autora: www.emblematiq.com.

W sekcji head dopisujemy:

<script language="javascript" type="text/javascript" src="niceforms.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="niceforms-default.css" />
 

Następnie w body piszemy już formularz właściwy:

<form action="" class="niceform">
  <fieldset>
    <legend>Formularz do napisania czegoś</legend>
    <dl>
      <dt><label for="napisz_cos">Napisz coś</label></dt>
      <dd><input id="napisz_cos" /></dd>
    </dl>
    <dl>
      <dt><input type="submit" name="submit" id="submit" value="Wyślij" /></dt>
    </dl>
  </fieldset>
</form>
 

Najważniejsze jest to class="niceform". I tak oto wygląda najprostsza wersja naszego formularza.

Załączone demo prezentujące wszystkie uroki Niceforms wygląda zaś następująco.

A gdybyśmy chcieli zmienić grafikę?

Potrzebować będziemy Photoshopa by otworzyć pliczek nf-standard-blue.psd. W nim zawarte są wszystkie grafiki związane z formularzem. Dodatkowo przygotowane są linie do cięcia, więc wystarczy wybrać zapisz dla web i zapisać same grafiki. Oczywiście można to zrobić po swojemu, tylko wtedy będzie troszkę więcej zabawy ze stylem. W sumie zabawy z PSem zostawiam Wam.

Opiszę teraz które klasy są używane do których elementów formularzy.

input type="text" - NFText(robi za kontener w którym trzymane są kolejne elementy oraz to właśnie nim stylujemy tekst, który wpisujemy), NFTextCenter(odpowiada za rozciągającą się część tła - czyli środkową). NFTextLeft(odpowiada za lewą krawędź inputa), NFTextRight(odpowiada za prawą krawędź inputa)

input type="checkbox" - NFCheck(odpowiada za ten buttonik czy coś jest zaznaczone czy nie)

input type="radio" - NFRadio(odpowiada za ten buttonik czy coś jest zaznaczone czy nie)

input type="button" - NFButton(środkowa część przycisku, rozszerzająca się w zależności od ilości tekstu), NFButtonLeft(lewa krawędź przycisku), NFButtonRight(prawa krawędź przycisku)

input type="file" - NFFileButton(fragment udający guzik w file), NFFileNew(nowy input który udaje funkcjonalność lewej części file) dodadkowo wykorzystywane są tutaj NFText oraz NFTextLeft

textarea - NFTextarea(tu wklepujemy zawartość), NFTextareaTop, NFTextareaBottom, NFTextareaTopLeft, NFTextareaTopRight, NFTextareaBottomLeft, NFTextareaBottomRight(poszczególne krawędzie pola), NFTextareaTopH, NFTextareaBottomH, NFTextareaTopLeftH, NFTextareaTopRightH, NFTextareaBottomLeftH, NFTextareaBottomRightH(poszczególne krawędzie po najeździe)

select - NFSelect(kontener dla kolejnych elementów), NFSelectLeft(lewa część selecta - warto się przyjrzeć obrazkom, że zrozumieć jak to jest konstruowane), NFSelectRight(prawa część selecta), NFSelectOptions(czyli to co się pojawia po pliknięciu w selecta - tak naprawdę jest to ul)

select multiple="multiple" - w sumie jest to prawie to co textarea, tylko nazwy zamiast NFTextarea mają na początku NFMultiSelect

Poza tymi klasami mamy kilka dodatkowych, których w większości przypadków ruszać nie należy:
NFfocused - są nadawane elementom na których obecnie jest focus
NFh - przesuwa tło by nadać mu pozycję 0 100% (używane w większości formatek)
NFhr - przesuwa tło by nadać mu pozycję 100% 100% (używane przy select)
NFhidden - ukrywa elementy, ale w taki sposób, że dalej są one funkcjonale (poprzez nadanie pełnej przezroczystości)

Mając opis klas, psd oraz gotowy wzór pozostaje tylko troszkę cierpliwości i powinno się udać.

Jeżeli nie będziecie zmieniać rozmiarów podmiana obrazków będzie bardzo szybkim procesem. W przeciwnym razie będzie trzeba troszkę podrasować arkusz stylu.

Podsumowanie

Jak widzicie stworzenie wymarzonych formularzy dzięki Niceforms jest w sumie prostym i w miarę przyjemnym procesem. Szkoda, że do osiągnięcia takich efektów potrzebne jest sporo tricków dziejących się pod maską. Pozostaję nam więc starać się edukować grafików ze szczególnie ułańską fantazją, żeby akurat przy formularzach troszkę odpuścili.

]]> http://vivee.info/2010/06/03/jak-za-pomoca-js-poprawic-wyglad-formularzy/feed/ 6 Budujemy stronę internetową przewijaną w poziomie! http://vivee.info/2010/01/12/budujemy-strone-internetowa-przewijana-w-poziomie/ http://vivee.info/2010/01/12/budujemy-strone-internetowa-przewijana-w-poziomie/#comments Tue, 12 Jan 2010 21:51:22 +0000 agressiva http://vivee.info/?p=1402 Przeglądając w ostatnim czasie kilka serwisów o tematyce projektowania stron www natknęłam się na ranking najciekawszych projektów stron www przewijanych w poziomie.
Strony takie stały się w ostatnim czasie bardzo popularne. Najczęściej służą jako portfolio graficzne, fotograficzne. Mimo swojej ograniczonej struktury dają nam całkiem spore pole do popisu. Wszystko zależy od naszej wyobraźni graficznej.
Przedstawię Wam jedną z technik projektowania takich stron...

demo

HTML

Stronka, którą przygotowałam w celu zademonstrowania Wam tej techniki ma bardzo prostą konstrukcję HTML. Najważniejsze divy to te oznaczone klasą box. To właśnie one ustawione są na naszej stronie jeden za drugim, narzuconą mają określoną szerokość oraz margin z prawej strony aby zachować między nimi odpowiednią odległość.

Ogólna struktura przedstawia się następująco:

<div id="page">

<h1 id="title">Horizontal Scrolling Website <span>tutorial od <a href="http://vivee.info">vivee.info</a></span></h1>
 
<div id="menu">
<ul>
        <li><a href="#o_mnie">o mnie</a></li>
        <li><a href="#oferta">oferta</a></li>
        <li><a href="#webdesign">webdesign</a></li>
        <li><a href="#fotografia">fotografia</a></li>
        <li><a href="#linki">linki</a></li>
        <li><a href="#kontakt">kontakt</a></li>
</ul>
<div class="end"></div>
</div>
 
<div id="content">

        <div class="box" id="o_mnie">
        <h2>O mnie</h2>
        </div>    
   
        <div class="box" id="oferta">  
        <h2>Oferta</h2>
        </div>  
           
        <div class="box" id="webdesign">  
        <h2>Webdesign</h2>
        </div>  
   
        <div class="box" id="fotografia">
        <h2>Fotografia</h2>    
        </div>            
   
        <div class="box" id="linki">      
        <h2>Linki</h2>
        </div>    
   
        <div class="box" id="kontakt">        
        <h2>Kontakt</h2>
        </div>          
   
<div class="end"></div>
</div>
 
</div>
 

To co zamieścimy w divach box zależy tylko i wyłącznie od nas. Jak widać ze wersji demo ja postanowiłam podzielić stronkę na kilka działów, ale nie koniecznie trzeba tak robić.

CSS

Najważniejszą kwestią w stylowaniu naszej poziomej strony jest nadanie <body> odpowiedniej szerokości (takiej, w której zmieści się cała zawartość strony) - niestety jest to technika "na sztywno", ale połączeniu z wyfloatowanymi divami o klasie box sprawia, że wszystko układa się w płaszczyźnie horyzontalnej.
W naszym przypadku <body> ma nadaną szerokość 5650px.

Oto wszystkie najbardziej kluczowe elementy w CSS:

body {
        background:url(flightplan-l-1920.gif) no-repeat fixed  center center;
        width:5650px;
        font-family:Georgia, "Times New Roman", Times, serif;
}

#page {
        float:left;
        padding:10px;
        margin:0px 0 0 0px;
        position:relative;
}

h1#title {
        font-size:46px;
        color:#FFF;
        padding:20px;
        height:100px;
        width:800px;
        position:fixed;
}

h1#title span {
        display:block;
        font-size:15px;
        margin:0 0 0 525px;
        line-height:8px;       
}

h1#title span a {
        color:#e3e0d5;
}

h1#title span a:hover {
        color:#eceae1;
}

#menu {
        height:32px;
        margin:80px 0 0 15px;
        position:fixed;
}

#menu ul {
        list-style-type:none;
}

#menu ul li {
        display:inline;
}

#menu ul li a {
        font-size:12px;
        margin:0 5px 0 0;
        padding:6px 4px;
        display:block;
        float:left;
        color:#afa991;
        background:#3c3a30;
        font-weight:bold;
        border-right:3px solid #817b61;        
        border-bottom:3px solid #817b61;                       
}

#menu ul li a:hover {
        color:#e3e0d5;
        border-right:3px solid #8c8772;        
        border-bottom:3px solid #8c8772;               
}

#content {
        margin:130px 0 0 15px;
}

.box {
        width:800px;
        padding:15px;
        float:left;
        font-size:12px;
        line-height:19px;
        text-align:justify;
        background:url(tlo.png) repeat;
        height: auto !important;
        min-height: 300px;
        height: 300px;
        margin:0 40px 0 0;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;      
        border-radius:5px;      
}
 

Pozostałe ostylowane elementy htmla można podejrzeć w pliku style.css.

Przewiń do... czyli zastosowanie Horizontal Tiny Scrolling

Dla ułatwienia przewijania naszej strony zastosowałam skrypt Horizontal Tiny Scrolling. Pozwala on automatycznie przewinąć stronę do boxa dzięki kliknięciu w odpowiedni link w menu.
Jak to działa?
Cały plugin składa się tylko z jednego pliku thw.js i nie wymaga żadnej konfiguracji z naszej strony.
Jedyną sprawą o jakiej musimy pamiętać to forma linków w menu oraz id divów do których te linki będą nas kierować. Należy pamiętać, że w href="" oraz w id="" diva do które będzie kierować musi znaleźć się taka sama wartość. Na przykładzie niżej jest to #oferta.
Przykład:
Tak wygląda link w menu

<li><a href="#oferta">oferta</a></li>
 

Div do którego będzie nas przenosił:

<div class="box" id="oferta">  
        <h2>Oferta</h2>
</div>  
 

Jest to cała filozofia korzystania z Tiny Scrolling, ponadto skrypt ten zapewnia bezproblemowe przewijanie strony za pomocą scrolla w myszy komputerowej.

Na koniec... trochę inspiracji

Budujemy stronę internetową przewijaną w poziomie!

Budujemy stronę internetową przewijaną w poziomie!

Budujemy stronę internetową przewijaną w poziomie!

Budujemy stronę internetową przewijaną w poziomie!

Budujemy stronę internetową przewijaną w poziomie!

Budujemy stronę internetową przewijaną w poziomie!

Budujemy stronę internetową przewijaną w poziomie!

Budujemy stronę internetową przewijaną w poziomie!

Budujemy stronę internetową przewijaną w poziomie!

Budujemy stronę internetową przewijaną w poziomie!

]]> http://vivee.info/2010/01/12/budujemy-strone-internetowa-przewijana-w-poziomie/feed/ 36 Pojawiająca się belka za pomocą jQuery http://vivee.info/2009/12/28/pojawiajaca-sie-belka-za-pomoca-jquery/ http://vivee.info/2009/12/28/pojawiajaca-sie-belka-za-pomoca-jquery/#comments Mon, 28 Dec 2009 16:58:57 +0000 palmiak http://vivee.info/?p=1418 Dziś pokażę Wam dość przydatny trick, który podpatrzyłem korzystając z Magento. Otóż gdy przeglądamy jakieś długie strony i zjedziemy na tyle nisko, że znika nam z oczu górne menu pojawia się belka z kilkoma najważniejszymi opcjami.

demopobierz

Było to na tyle przydatne, że na początku nawet nie zwróciłem uwagi na tą belkę - po prostu zawsze była tam kiedy jej potrzebowałem.

To, że zostało to użyte w panelu administracyjnymi wcale nie znaczy, że nie znajdzie to użycia na normalnych stronach. Mozna przecież na tej belce umieścić dowolne informacje takie jak np. możliwość przypomnienia użytkownikowi, że jeśli podoba mu się ta strona niech zasubskrybuje rss lub uproszczone menu strony.

xhtml i css

Do naszego przykładu użyjemy następującej strony. Jak widać jest to prostu tabelka oraz guzik 'dodaj produkt'. Dopiszemy do niej naszą belkę na której będzie zawsze można zobaczyć przycisk 'dodaj produkt':

<div id="menu">
        <div class="wrap"><a href="#"><img src="dodaj.png" alt="" /></a></div>
</div>

Oczywiście u każdego może to wyglądać troszkę inaczej. Ostylujmy to teraz:

#menu {
        width:100%;
        background:#ffef87;
        position:fixed;
        top:0;
        display:none;
}

#menu .wrap {
        text-align:right;
}

Najważniejsze w tym jest tak naprawdę display:none, które ukrywa belkę (w czasie stylowanie warto to sobie wykomentować) oraz position:fixed; top:0; które spowodują, że belka zawsze będzie przyklejona do górnej krawędzi ekranu (nie działa to w IE6, jednak dość łatwo to można ominąć, np. tutaj).

Nasz właściwy skrypt

Skrypt musi robić dwie rzeczy:

  • sprawdzać ile pikseli jesteśmy od górnej krawędzi strony
  • na podstawie tego wyniku pokazać lub ukryć belkę

Napiszmy więc sobie funkcyjkę

function show_bar(identyfikator, wielkosc){

        var scroll_size = $(window).scrollTop();

        $(window).scroll(function () {
                scroll_size = $(window).scrollTop();
                if(scroll_size>wielkosc) {
                        $(identyfikator).fadeIn('fast');
                } else {
                        $(identyfikator).fadeOut('fast');
                }
        });
}

Zmiennej scroll_size przypisujemy odległość od górnej krawędzi strony.

Następnie za każdy przesunięciem strony ($(window).scroll()) przeliczamy tą wielkość i sprawdzamy czy przekroczyła ona ustalony przez nas limit - jeżeli tak to pokaże nam belkę.

Teraz pozostaje to wywołać:

$(document).ready(function(){
    var bar = show_bar("#menu", 80);
});

Jako pierwszą wartość podajmy id elementu który ma się pokazywać. Drugi to wysokość od której ma się pokazywać.

Gdybyście mieli jakieś problemy zerknijcie na źródło dema.

Podsumowanie

I już. Uzyskaliśmy naprawdę miły i przydatny gadżecik za pomocą kilku linijek jQuery.

]]> http://vivee.info/2009/12/28/pojawiajaca-sie-belka-za-pomoca-jquery/feed/ 5 “Szybki podgląd” za pomocą jQuery http://vivee.info/2009/09/15/szybki-podglad-za-pomoca-jquery/ http://vivee.info/2009/09/15/szybki-podglad-za-pomoca-jquery/#comments Tue, 15 Sep 2009 20:00:58 +0000 agressiva http://vivee.info/?p=1237 Jak już nie raz zdążyliśmy się przekonać JavaScript daje nam ogromne możliwości jeżeli chodzi o poszerzenie funkcjonalności naszych stron www oraz innych narzędzi webowych.
Tym razem chcę Wam pokazać w jaki sposób zastosować bardzo przydatny plugin do szybkich podglądów obrazków oraz opisów w tekście (a także połączenie jednego z drugim).

demo pobierz

Na sam początek

Podstawową czynnością jeżeli chodzi o wykorzystywanie skryptów opartych o jQuery jest pobranie samej biblioteki.
A następnie wklejenie do sekcji head kodu wywołującego tą bibliotekę.

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

Dla każdej funkcjonalności z osobna przygotowaliśmy pliki JS o indywidualnych nazwach, w tym celu aby nie myliły się nikomu z ich przeznaczeniem.
preview_img.js - podgląd dla samych obrazków,
preview_text.js - podgląd dla samego tekstu,
preview.js - podgląd dla obrazków na linkach w treści.

<script src="preview_img.js" type="text/javascript"></script>
<script src="preview_text.js" type="text/javascript"></script>
<script src="preview.js" type="text/javascript"></script>
 

Podgląd zastosowany na obrazkach

Galeria (obrazki bez opisu "title")

Szybki podgląd za pomocą jQuery

W naszym przykładzie kod html wygląda następująco:

<a href="1.jpg" class="preview">
<img src="1m.jpg" alt="gallery thumbnail" /></a>
 

W tym przypadku kiedy chcemy aby podgląd większego zdjęcia był na miniaturce należy koniecznie pamiętać o dodaniu klasy preview dla znacznika a oraz dodaniu w kodzie CSS odpowiednich dla tej klasy wartości:

#preview{
        position:absolute;
        border:1px solid #ffffff;
        background:#d0d0d1;
        padding:7px;
        display:none;
        color:#626262;
        font-size:12px;
        font-weight:bold;
        }
 

Szczególnie ważnymi pozycjami są position:absolute; oraz display:none; o których nie można zapomnieć.

Galeria (obrazki z opisem "title")

Szybki podgląd za pomocą jQuery

Na tym przykładzie kod html odrobinę się różni od tego powyżej, pojawił się tutaj opis dużego zdjęcia w title, który podczas wyświetlenia podglądu będzie umieszczony pod obrazkiem:

<a href="1.jpg" class="preview" title="Duża wersja zdjęcia"><img src="1m.jpg" alt="gallery thumbnail" /></a>
 

Znaczniki a posiadają tutaj tą samą klasę co wyżej także, kod CSS wygląda identycznie. Przypisane zostały wartości dla koloru czcionki oraz jej wielkości i są one teraz dziedziczone przez tekst wyświetlany w title.

#preview{
        position:absolute;
        border:1px solid #ffffff;
        background:#d0d0d1;
        padding:7px;
        display:none;
        color:#626262;
        font-size:12px;
        font-weight:bold;
        }
 

Podgląd obrazka zastosowany w tekście

Dla tych osób, którym zależy na zaoszczędzeniu miejsca na stronie istnieje także możliwość podpięcia podglądu obrazka na standardowym linku w treści.

Szybki podgląd za pomocą jQuery

Według własnych potrzeb można wstawić dla obrazka tytuł w title lub też nie.
Kod html:

<p>Jeżeli chcesz zobaczyć podgląd zdjęcia najedź na <a href="http://vivee.info" class="screenshot" rel="1.jpg" title="Podgląd zdjęcia">ten link</a></p>
 

W tym przypadku obrazek, który ma się pojawić po najechaniu na link jest przekazywany za pomocą rel, co jest dość istotne, bo daje nam to możliwość przypisania standardowego linka dla a.
Podobnie jak wcześniej należy pamiętać o dodaniu odpowiedniej klasy dla znacznika a, tym razem nazywa się ona screenshot.
CSS dla tej klasy:

#screenshot{
        position:absolute;
        border:1px solid #ffffff;
        background:#d0d0d1;
        padding:7px;
        display:none;
        color:#626262;
        font-size:12px;
        font-weight:bold;
        }
 

Wszystkie pozycje w CSSie są dowolne do przypisania, najważniejsze jak zawsze jest pozycja position:absolute; i display:none; których nie można pominąć.

Podgląd opisu linka zastosowany w tekście

W tym przypadku po najeździe na link pojawi się jego opis zamieszczony w atrybucie title

Szybki podgląd za pomocą jQuery

Kod html:

<p>Wróć do serwisu <a href="http://vivee.info" class="tooltip" title="blog o webmasteringu, grafice i fotografii">Vivee.info</a></p>
 

Tutaj pojawia się kolejna ważna klasa dla znacznika a - tooltip
Tak samo jak we wcześniejszych przypadkach w kodzie CSS należy zamieścić position:absolute; i display:none;.

#screenshot{
        position:absolute;
        font:11px "Trebuchet MS", Arial, Helvetica, sans-serif!important;
        padding:8px;
        border:1px solid #d0d0d1;
        background:#ffffff;    
        color:#333;
        display:none;
        }
 

Wersje Demo do wszystkich prezentowanych podglądów dostępne są na tej stronie.

Mamy nadzieję, że narzędzie to okaże się dla wielu osób przydatne. :)

]]> http://vivee.info/2009/09/15/szybki-podglad-za-pomoca-jquery/feed/ 15 Menu akordeonowe z odrobiną CSS3 http://vivee.info/2009/07/06/menu-akordeonowe-z-odrobina-css3/ http://vivee.info/2009/07/06/menu-akordeonowe-z-odrobina-css3/#comments Mon, 06 Jul 2009 20:18:48 +0000 agressiva http://vivee.info/?p=1044 W tym artykule dowiecie się w jaki sposób stworzyć menu akordeonowe, które funkcjonuje m.in. na stronie www.apple.com. Na tej samej zasadzie działa również moje portfolio, gdzie każda zakładka działa jak osobny dział na stronie (www.waterdesign.pl).

demo

Krok 1 - Struktura html naszej rozwijanej listy

Całe menu akordeonowe oparte jest na liście zagnieżdżonej oraz divach, w których zamieszczane są pozycje drugiego zagłębienia menu oraz ewentualna treść nie będąca listą.

Pojedyncza zakładka od strony htmlowej w naszym przykładzie wygląda następująco:

<ul>

<li class="kategoria"><div class="naglowek"><a class="link rss" href="#">Subscribe RSS</a></div>
<ul class="fade">
<li>
<div class="text">
<ul>
<li><a href="http://pl.wikipedia.org/wiki/RSS">RSS - Wikipedia</a></li>
 <li><a href="http://vivee.info/2009/02/15/jak-wyizolowac-liczbe-subskrybentow-rss-korzystajac-z-feedburnera/">RSS - korzystanie z feedburnera</a></li>
 <li><a href="http://dobreprogramy.pl/index.php?dz=1&t=95&Czytniki+RSS">Czytniki RSS</a></li>
</ul>  
</div>
</li>  
</ul>
</li>

</ul>
 

Wygląd:

Full of colours

Pierwsza pozycja w menu (li.kategoria) jest zawsze widoczna. Elementem, który dzięki funkcji javascript będzie chowany, a po kliknieciu na li.kategoria będzie ukazywany jest ul.fade.

Całkowity kod html naszej pokazówki przestawia się tak jak widać to poniżej:

<div id="page">
<ul>
                <li class="kategoria"><div class="naglowek"><a class="link rss" href="#">Subscribe RSS</a></div>
                <ul class="fade">
                <li>
                        <div class="text">
        <ul>
          <li><a href="http://pl.wikipedia.org/wiki/RSS">RSS - Wikipedia</a></li>
          <li><a href="http://vivee.info/2009/02/15/jak-wyizolowac-liczbe-subskrybentow-rss-korzystajac-z-feedburnera/">RSS - korzystanie z feedburnera</a></li>
          <li><a href="http://dobreprogramy.pl/index.php?dz=1&t=95&Czytniki+RSS">Czytniki RSS</a></li>
        </ul>  
                        </div>
                </li>  
                </ul>
                </li>
               
                <li class="kategoria"><div class="naglowek"><a class="link facebook" href="#">Facebook</a></div>
                <ul class="fade">
                <li>
                        <div class="text">
        <ul>
          <li><a href="http://www.facebook.com/">Facebook - Main Page</a></li>
          <li><a href="http://www.facebook.com/">Facebook - Rejestracja</a></li>
          <li><a href="http://www.facebook.com/pages/create.php">Facebook - Stwórz swoją stronę</a></li>
        </ul>  
                        </div>
                </li>  
                </ul>
                </li>
               
                <li class="kategoria"><div class="naglowek"><a class="link technorati" href="#">Technorati</a></div>
                <ul class="fade">
                <li>
                        <div class="text">
        <ul>
          <li><a href="http://technorati.com/">Technorati - Main Page</a></li>
          <li><a href="http://technorati.com/technology/">Technorati - Technology</a></li>
          <li><a href="http://technorati.com/technology/it/">Technorati - IT</a></li>
        </ul>                              
                        </div>
                </li>          
                </ul>
                </li>
               
                <li class="kategoria"><div class="naglowek"><a class="link twitter" href="#">Twitter</a></div>
                <ul class="fade">
                <li>
                        <div class="text">
        <ul>
          <li><a href="http://twitter.com/">Twitter - Main Page</a></li>
          <li><a href="https://twitter.com/signup">Twitter - Join</a></li>
          <li><a href="https://twitter.com/viveeinfo">Vivee na Twitterze</a></li>
        </ul>              
                        </div>
                </li>  
                </ul>
                </li>
               
                <li class="kategoria"><div class="naglowek"><a class="link vimeo" href="#">Vimeo</a></div>
                <ul class="fade">
                <li>
                        <div class="text">
        <ul>
          <li><a href="http://vimeo.com/">Vimeo - Main Page</a></li>
          <li><a href="http://vimeo.com/join">Vimeo - Join</a></li>
          <li><a href="http://vimeo.com/upload/video">Vimeo - Upload</a></li>
        </ul>  
                        </div>
                </li>  
                </ul>
                </li>          

</ul>
</div>
 

Niektóre dodatkowe klasy w htmlu zostały tutaj wprowadzone celowo w celu upiększeń poszczególnych zakładek pierwszego poziomu. Także na klasy typu "twitter", "vimeo", itp w swoich wersjach menu akordeonowego nie musicie zwracać uwagi (chyba, że tak jak tutaj chcecie aby każda zakładka miała inny kolor, ikonkę, itp).

Upiększanie menu, czyli struktura CSS

Jak łatwo jest się domyślić każdy kod CSS, który decydować będzie o wyglądzie może być inny.

* {
        padding:0;
        margin:0;
        }
       
img {
        border:0;
        }
       
body {
        background:#f4f3ef;
        text-align:center;
        }
       
#page {
        width:800px;
        text-align:left;
        margin:0 auto;
        }      
       
#page ul {
        list-style-type:none;
        width:100%;
        padding:20px 0 0 0;
        }
       
ul ul {
        background:url(img/tlo.png);
        padding:0!important;
        }
       
li {
        font:22px "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
        word-spacing:3px;
        vertical-align:middle;
        }
       
div.text {
        width:780px;
        padding:10px;
        line-height:20px;
        text-align:justify;
        font:11px Tahoma, Arial, Helvetica, sans-serif;
        letter-spacing:1px;
        color:#7a7a7a;
        background:url(text.png) repeat-x top;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;    
        border-radius: 5px;            
        }      
       
div.text p {
        margin:0 0 10px 0;
}      

div.text ul {
        list-style-type:none;
}

div.text ul li {
        font:12px Helvetica, Tahoma, Arial, Geneva, sans-serif!important;
        margin:2px 0!important;
}

div.text ul li a {
        color:#585858;
        font-weight:bold;
        text-decoration:none;
}

div.text ul li a:hover {
        color:#08a2b9;
}
       
.kategoria a.link {
        display:block;
        width:780px;
        padding:22px 0 5px 20px;
        font:22px "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
        font-weight:bold;
        color:#fafafa;
        text-decoration:none;  
        margin:0 0 2px 0;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;    
        border-radius: 5px;    
        height:47px;
        text-shadow: 1px 1px 1px #5d5d5d;
}      
       
.kategoria a.link:hover {
        color:#ffffff;
        text-decoration:none;
        }      
 

Całkowita szerokość zakładek i zawartości, która się pojawia po kliknięciu na nie uzależiona jest od od diva w jakim się znajduje czyli od diva #page. Ma on nadaną konkretną szerokość i wyśrodkowany jest on względem okna przeglądarki.

Odrobina CSS3

CSS3 niestety na obecną chwilę nie jest jeszcze obsługiwany przez wszystkie przeglądarki internetowe. Te, które radzą sobie z nim całkiem sprawnie to:

  • Firefox (od wersji 3 w górę)
  • Google Chrome
  • Safari
  • Opera (wersja 9.64 obsługuje zaledwie kilka możliwości jakie daje nam CSS3)

W menu akordeonowym zostały wykorzystane takie efekty jak:
1. Cień pod napisem

        text-shadow: 1px 1px 1px #5d5d5d;      
 

2. Zaokrąglone rogi

        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;    
        border-radius: 5px;    
 

Full of colours

Efekt końcowy zabawy htmlowo-cssowej podejrzeć można w wersji Demo

jQuery

Do w pełni działajacych zakładek brakuje nam jeszcze podłączenie odpowiednich skryptów JS.
W sekcji należy zamieścić odnośnik do jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

oraz skrypt, z funkcją dzięki której zakładki zachowują się zgodnie z naszymi założeniami.

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

Nasz skrypt, który decyduje o pojawianiu się i znikaniu zawartości wygląda następująco:

 $(document).ready(function() {
        $("ul.fade").not(":first").hide();
        $("a.link").click(function(){
                        $(".fade:visible").hide();
                        $(this).parent().next('.fade').fadeIn();
                        return false;
        });
 });
 

gdzie:

$("ul.fade).not(":first").hide();

Po wczytaniu skryptu ukrywa nam wszystkie podtreści zakładek poza pierwszą, która zawsze będzie pokazana i tym samym sugeruje userom, że kliknięcie w następną zakładkę pokaże się jej zawartość.

$(".fade:visible").hide();

Zagnieżdżone ul o klasie .fade będzie ukazywane po wcześniejszym kliknięciu na a.link.
Nadanie klasy pojawiającemu się ul dodatkowo zabezpiecza nas przed sytuacją kiedy w treści mamy następne ul i nie chcemy aby one dziedziczyły to zachowanie.

Został również zastosowany efekt fadeIn dla pojawiających się zawartości menu.

$(this).parent().next('.fade').fadeIn();

Więcej o fade'ach przeczytać możecie w artykule: "FadeIn, fadeOut, fadeTo – czyli o pojawianiu się i znikaniu".

Jeżeli chcemy aby zawartość pojawiała się nam po najeździe na zakładkę, a nie dopiero po kliknięciu należy w tym fragmencie js'a

$("a.link").click(function(){

podmienić click na hover:

$("a.link").hover(function(){

Hover sprawi, że menu to zachowywać się będzie identycznie jak to zamieszczone na www.apple.com.

Jeszcze jednym efektem dla urozmaicenia wyglądu tego menu jest zwiększenie krycia po najechaniu kursorem na .kategoria a.link.

$(".kategoria a.link").fadeTo("fast", .8);                                     
$(".kategoria a.link").hover(function(){
        $(this).fadeTo("fast", 1);
        },function(){
        $(this).fadeTo("fast", .8);
});    
 

Tym sposobem tak oto wygląda całkowity kod JS, który przyczynia się do ozywienia menu akordeonowego:

 $(document).ready(function() {
        $("ul.fade").not(":first").hide();
        $("a.link").click(function(){
                        $(".fade:visible").hide();
                        $(this).parent().next('.fade').fadeIn();
                        return false;
        });

$(".kategoria a.link").fadeTo("fast", .8);                                     
$(".kategoria a.link").hover(function(){
        $(this).fadeTo("fast", 1);
        },function(){
        $(this).fadeTo("fast", .8);
});

});
 

W taki sposób przestawia się tworzenie akoreonowego menu,
mamy nadzieje, że artykuł ten okaże się dla Was pomocny.

]]> http://vivee.info/2009/07/06/menu-akordeonowe-z-odrobina-css3/feed/ 41 Efekt graficznego podświetlenia w jQuery i Prototype z Scriptaculous http://vivee.info/2009/02/10/efekt-graficznego-podswietlenia-w-jquery-i-prototype-z-scriptaculous/ http://vivee.info/2009/02/10/efekt-graficznego-podswietlenia-w-jquery-i-prototype-z-scriptaculous/#comments Tue, 10 Feb 2009 00:09:48 +0000 m1chu http://vivee.info/?p=620 Jedni nie korzystają z nich wcale, niektórzy tylko po to aby zwiększyć funkcjonalność tworzonych przez siebie stron, a u jeszcze innych zauważalny jest przepych tego typu rozwiązań. Biblioteki programistyczne języka JavaScript, bo o ich wykorzystaniu tu mowa to źródło bardzo różnorodnych, nie tylko funkcjonalnych, ale także estetycznych efektów. Sieć aż kipi od dobrych i słabych, lepiej oraz słabiej wytłumaczonych przykładów użycia możliwości MooTools, jQuery, Prototype z Scriptaculous, czy innych mniej powszechnych frameworków.

Jednym z takich efektów jest możliwość stworzenia animowanego, graficznego podświetlenia pojawiającego się np. nad grafiką wywołującą animację. Interaktywność taka została opisana na NetTuts z wykorzystaniem MooTools. My osiągniemy taki wynik dzięki zastosowaniu jQuery (w jednym przykładzie) oraz dodatkowo także za pomocą Prototype wraz z Scriptaculous (w drugim przykładzie).

Oczekiwany efekt
Oczekiwany efekt.

Krok 1: Za co się chwycić na początku...

Na początek musisz wiedzieć w jakim celu potrzebny jest Ci prezentowany w tym artykule efekt. Menu? Wyświetlanie dodatkowych informacji w graficznej liście produktów? Czy może szybki, animowany splash? Wybór jest Twój i podług niego będziesz musiał zaopatrzyć się w dodatkowe, niezbędne elementy do wykonania podświetlenia.

Chodzi tu mianowicie o grafiki, których musi być dwa razy więcej niż elementów podatnych na działanie mechanizmu. Powiedzmy, jeżeli chcemy w pięcioelementowym menu zastosować w każdym zdarzenie po najechaniu myszką zgodne z przesłaniem tego artykułu to potrzebujemy dziesięciu grafik. Pięć opisujących przyciski menu i drugie tyle będące "treścią" pojawiającą się po podświetleniu.

Po uporaniu się z wizualną częścią problemu oraz strony internetowej możemy ruszyć krok dalej.

Krok 2: Zaopatrujemy się w jQuery i/lub Prototype i Scriptaculous!

jQuery to aktualnie najpopularniejsza biblioteka. I najłatwiej ją skatalogować w czeluścia własnego projektu. Wystarczy ze strony głównej pobrać wersję 1.3.1 production/Minified i umieścić ją w obrębie plików tworzonego przez nas przykładu (niezbędny będzie tylko plik jquery-1.3.1.min.js).

Z Prototype sprawa jest ciut bardziej skomplikowana, bo prócz standardowego frameworka musimy pobrać także dodatkowy interfejs w postaci Scriptaculous, dzięki któremu uzyskamy dostęp do efektu pozwalającego na dynamiczne zmienianie właściwości CSS elementów strony. Ściągamy więc wersję 1.6.0.3 pierwszej biblioteki, oraz paczkę z wersją 1.8.2 drugiej. Z obydwu wyodrębniamy pliki i w ramach folderu tworzonego przez nas projektu umieszczamy tylko prototype.js oraz effects.js (z drugiego archiwum).

W przypadku tego artykułu umownie pliki związane z frameworkami będą znajdować się w podkatalogu javascript folderu głównego. Obydwa przykłady (dotyczące, jeden jQuery, a drugi Prototype z Scriptaculous) będą oczywiście wykonywane w osobnych plikach znajdujących się w dwóch różnych katalogach.

Rozdzielenie implementacji przykładów na dwa katalogi
Przykładowe rozdzielenie implementacji przykładów na dwa katalogi. W naszym przypadku pliki .js znajdują się dodatkowo w podkatalogu javascript.

Krok 3: Tworzymy strukturę XHTML

Atutem naszego rozwiązania jest kompatybilność z serwowaniem dokumentu XHTML w postaci application/xhtml+xml, czego bardzo często brakuje w przypadku efektów opartych na bibliotekach JS. Z racji tego także, że i w przypadku Prototype i jQuery struktura strony pozostaje niezmienna to obojętnie który framework wykorzystujesz poniższe tłumaczenie i partie kodu będą prawidłowe.

Z powodu tego w jaki sposób będziemy wysyłać treść strony posłużymy się małą częścią kodu PHP, a co za tym idzie plik korzystający z naszego mechanizmu musi mieć też takie rozszerzenie (no chyba, że serwer jest inaczej skonfigurowany, ale to już problematyka do rozwiązania na inny temat).

<?php
if ( stristr($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml') ) // jeżeli przeglądarka obsługuje application/xhtml+xml
{
        header("Content-Type: application/xhtml+xml; charset=utf-8"); // wysłanie odpowiednich nagłówków
        print '<?xml version="1.0" encoding="utf-8"?>'."\r\n";
        print '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"'."\r\n";
        print '"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">'."\r\n";
}
else // wysłanie dokumentu jako text/html dla przeglądarek nie obsługujących typu zawartości pliku z powyższego warunku, np. dla IE
{
        header("Content-Type: text/html; charset=utf-8");
        print '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"'."\r\n";
        print '"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'."\r\n";
}
?>

Poniżej dodajemy uniwersalny układ strony. Ważnym ułatwieniem jest możliwość tworzenia odnośników z elementów graficznych podatnych mechanizmowi, a także fakt, że nie korzystamy w nim z tagów img, a efektu zbliżonego do sliding-doors w celu wyświetlania obrazów.

<html lang="pl" xml:lang="pl" xmlns="http://www.w3.org/1999/xhtml">
<head>
        <meta http-equiv="Content-type" content="<?php print ( stristr($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml') ? 'application/xhtml+xml' : 'text/html' ); // typ zawartości zależny do możliwości przeglądarki użytkownika ?>; charset=utf-8" />
        <meta name="Description" content="Product highlighter - tworzenie dynamicznych opisów produktów - m1chu.eu" />
        <meta name="Keywords" content="product, highlighter" />
        <title>Product highlighter</title>
        <style type="text/css">@import url('stylesheet.css');</style> <!-- arkusz stylów -->
</head>
<body>
        <div id="siteContainer">
                <div id="highlightsContainer"> <!-- zbiór grafik wyświetlanych przy najechaniu kursorem -->
                        <div class="highlights" id="highlight1"></div>
                        <div class="highlights" id="highlight2"></div>
                        <div class="highlights" id="highlight3"></div>
                </div>
               
                <div id="pageContainer"> <!-- zbiór grafik podatnych na efekt -->
                        <div class="pages" id="page1"><a href="http://m1chu.eu/"></a></div>
                        <div class="pages" id="page2"><a href="http://vivee.info/"></a></div>
                        <div class="pages" id="page3"><a href="http://utnij.eu/"></a></div>
                </div>
        </div>
</body>
</html>

Krok 4: Stylizujemy strukturę strony za pomocą CSS

Posługując się metodami pozycjonowania elementów dostępnymi w kaskadowym arkuszu stylów możemy operując na elementach o identyfikatorach siteContainer, pageContainer, highlightsContainer oraz divach potomnych ułożyć i wystylizować wygląd, w tym położenie jak na wyżej zamieszczonym filmiku (screenie) obrazującym wykonanie zadania z tego artykułu.

Do wszystkich bloków kodu CSS odwołujących się do tagów zawierających identyfikatory grafik zostały dodane także właściwości background z adresem pliku tła.

W naszym przypadku poniższy kod zapisujemy do pliku stylesheet.css.

/* ustawienia domyślne dla ciała strony (w poprawnie wysyłanym XHTML jest to html+body, a nie tylko body) */
html, body {
        margin: 0px;
        padding: 0px;
        background: #000 url('bg.png') repeat-x;
}

#siteContainer {
        margin: 150px auto 0px auto; /* marginesy - wyśrodkowanie poziome */
        width: 573px;
        height: 345px;
        position: relative; /* relatywna pozycja, kontener */
        background: transparent url('container.png') no-repeat top left;
}      
#pageContainer {
        position: absolute; /* pozycja względem #siteContainer */
        z-index: 5; /* ponad ciałem strony i pod #highlightsContainer */
        top: 128px;
        left: 0px;
}
#highlightsContainer {
        position: absolute; /* pozycja względem #siteContainer */
        z-index: 10; /* ponad pozostałymi elementami */
        left: 178px;
        top: 30px;
}
/* ustawienie w linii wraz z zmianą wyglądu kursora */
#pageContainer > div {
        float: left;
        cursor: pointer;
}
/* rozmiary klikalnych divów potomnych znajdujących się w kontenerze listy grafik podatnych na działanie mechanizmu */
#pageContainer > div a {
        width: 178px;
        height: 178px;
        display: block;
}
#page1 {
        margin-right: 19px; /* prawy margines - odstęp od kolejnego diva */
}
#page1 a {
        background: url('icon_1.png') no-repeat; /* tło grafiki podatnej na działanie efektu */
}
#page2 {
        margin-right: 20px; /* prawy margines - odstęp od kolejnego diva */
}      
#page2 a {
        background: url('icon_2.png') no-repeat; /* tło grafiki podatnej na działanie efektu */
}
#page3 a {
        background: url('icon_3.png') no-repeat; /* tło grafiki podatnej na działanie efektu */
}

/* rozmiary wszystkich potomków typu div kontenera zawierającego podświetlenia */
#highlightsContainer > div {
        position: absolute;
        width: 222px;
        height: 101px;
        display: block;
}
/* pliki tła w pojawiających się podświetleniach */
#highlight1 {
        background: transparent url('highlights_1.png') no-repeat;
}
#highlight2 {
        background: transparent url('highlights_2.png') no-repeat;
}
#highlight3 {
        background: transparent url('highlights_3.png') no-repeat;
}

Krok 5a: Dodajemy jQuery do dokumentu

Tego, czego zabrakło dotychczasowo w naszym dokumencie to załączenie bibliotek oraz pliku .js w którym będzie znajdować się kod animujący pożądany przez nas efekt.

Dla jQuery w sekcji head należy dodać pliki jquery-1.3.1.min.js oraz product-highlighter.js (który umownie będzie zawierał dodatkowy kod).

        <script type="text/javascript" src="javascript/jquery-1.3.1.min.js"></script>
        <script type="text/javascript" src="javascript/product-highlighter.js"></script>

Krok 5b: Dodajemy Prototype z Scriptaculous do dokumentu

Tym razem musimy dodać jeden plik więcej. Bibliotekę (prototype.js), jej dodatkowy interfejs, a dokładniej plik zawierający obiekt Effect (effects.js) oraz jak w powyższym przypadku plik z naszym kodem animacji (product-highlighter.js).

                <script type="text/javascript" src="javascript/prototype.js"></script>
        <script type="text/javascript" src="javascript/effects.js"></script>
        <script type="text/javascript" src="javascript/product-highlighter.js"></script>

Krok 6a: Implementujemy kod animacji z użyciem jQuery

Jak to bywa w przypadku tego frameworka, aby jakieś zdarzenie działało poprawnie powinno się je umieszczać w funkcji $(document).ready(), której zawartość zostanie załadowana w momencie załadowania drzewa dokumentu.

$(document).ready(function() {
        [kod]
});

W [kod] musimy przypisać (do tablicy) wg. klasy wszystkie grafiki wyświetlane podczas podświetlenia, ustawić parametry podstawowe CSS oraz stworzyć sprawdzanie w pętli, czy dana grafika o klasie .pages nie jest najechana przez kursor i w zależności o danego trybu (kursor na/kursor poza) wykonać pożądaną animacji (wyłonienie dodatkowego tła / zanikanie dodatkowego tła).

Poniższy kod umieszczamy w pliku product-highlighter.js.

$(document).ready(function() {
        // tablica elementów o klasie .highlights
        var highlights = $('.highlights');
       
        // ustawienie pełnej przezroczystości elementów pojawiających się w czasie najechania myszką na obiekty podatne efektowi oraz widzialności ich kontenera
        $('.highlights').css('opacity', 0);
        $('#highlightsContainer').css('visibility', 'visible');
       
        // sprawdzanie każdego elementu podatnego mechanizmowi
        $('.pages').each(function(i) {
                // jeżeli na danym elemencie znajduje się kursor
                $(this).mouseover(function() {
                        // wykonanie animacji grafiki wyłanianej i przypisanej do najechanego elementu (margines o 15px w górę i brak przezroczystości w czasie 0,5 sekundy)
                        $(highlights[i]).animate({
                                opacity: 1,
                                marginTop: '-15px'
                        }, 500);
                }).mouseout(function(){ // jeżeli na danym elemencie nie znajduje się już kursor
                        $(highlights[i]).animate({
                                opacity: 0,
                                marginTop: '-0px'
                        }, 500);
                });
        });
});

Należy jeszcze wyjaśnić dokładniej w jaki sposób działa $(highlights[i]).animate(). Mianowicie przy każdej iteracji pętli $('.pages').each() przekazuje ona do parametru function(i) aktualny numer elementu na którym się znajduje. Ponieważ w id pageContainer znaczniki potomne muszą być posegregowane i musi być ich tyle samo co obiektów graficznych w highlightsContainer to jeżeli kursor znajduje się na pierwszym podatnym na efekt obrazie to w podświetleniu wyłania się także pierwsza grafika. Wszystko to dzięki wyłuskaniu jej z tablicy highlights poprzez parametr i.

Krok 6b: Implementujemy kod animacji z użyciem Prototype z Scriptaculous

Podobnie w Prototype obserwujemy zdarzenie, ale tym razem załadowania całej strony w celu późniejszej obserwacji aktywności kursora na wybranych elementach aktywnych. Można oczywiście podobnie jak w poprzednim podpunkcie wykonać obserwacje zdarzeń wraz z załadowanie DOM (drzewa dokumentu) poprzez użycie document.observe('dom:loaded', function() {}). To tylko kwestia osobistego wyboru.

Event.observe(window, 'load', function() {
        [kod]
});

Dalsze postępowanie jest adekwatne do tego opisanego w przypadku zastosowania jQuery. Z tymże, tablicę elementów o danej klasie pobiera się poprzez podwójny znak dolara ($$), a najechanie oraz zjechanie kursorem poza zadany obszar rozpoznaje się także poprzez obiekt Event i metodę observe(). Do animacji służy funkcja Morph instancji Effect z pliku effects.js interfejsu Scriptaculous.

Event.observe(window, 'load', function() {
        var highlights = $$('.highlights'); // utworzenie tablicy
       
        $$('.highlights').invoke('setStyle', { opacity: 0 }); // ustawienie stylu przezroczystości
        $$('#highlightsContainer').invoke('setStyle', { visibility: 'visible' }); // widzialność kontenera
       
        $$('.pages').each(function(v, i) { // pętla
                Event.observe(v, 'mouseover', function() { // zdarzenie wykonywane w momencie pojawienia się kursora na elemencie
                        new Effect.Morph(highlights[i], { // animacja
                                style: 'opacity: 1; margin-top: -15px;',
                                duration: 0.5 // czas 0,5 sekundy
                        });
                });
                Event.observe(v, 'mouseout', function() { // zdarzenie wykonywane w momencie wyjechania kursorem poza element
                        new Effect.Morph(highlights[i], {
                                style: 'opacity: 0; margin-top: 0px;',
                                duration: 0.5
                        });
                });
        });
});

Tym razem do funkcji w $$('.pages').each() przekazywane są dwa parametry: v i i. Pierwszy z nich jest odpowiednikiem this i wskazuje na aktualnie przetwarzany element tablicy znaczników o klasie .pages. Drugi to numer pokazujący który z kolei tag jest aktualnie sprawdzany. Inaczej pisząc jego zadanie jest równoznaczne do działania parametru i w przykładzie z jQuery.

Demonstracja wyników...

Stworzyłem dwa gotowe przykłady, których analiza pozwoli Wam jeszcze bardziej zrozumieć jak stworzyć ten efekt. Pierwszy, za pomocą jQuery. Drugi, za pomocą Prototype z Scriptaculous.

Jeżeli chcecie dowiedzieć się więcej o tych bibliotekach to zapraszam do ich dokumentacji (Prototype, jQuery).

copyright © 2008-2009, m1chu

udostępnione na licencji CC dla vivee.info i m1chu.eu

]]> http://vivee.info/2009/02/10/efekt-graficznego-podswietlenia-w-jquery-i-prototype-z-scriptaculous/feed/ 5 Google Maps API – pierwsze starcie http://vivee.info/2009/02/08/google-maps-api-pierwsze-starcie/ http://vivee.info/2009/02/08/google-maps-api-pierwsze-starcie/#comments Sun, 08 Feb 2009 20:13:25 +0000 kamilgeneral http://vivee.info/?p=613 W moim kolejnym tutorialu przedstawię jak wstawić mapę od Google i ją zmodyfikować.

demo

Pobranie klucza

Na stronie http://code.google.com/intl/pl/apis/maps/signup.html akceptujemy regulamin i wpisujemy adres strony.
Po naciśnięciu na Generale API Key pojawi nam się długi klucz, kopiujemy go – zaraz nam się przyda.

Kod mapy

W sekcji head dajemy tylko, że zamiast NASZ_KLUCZ wpisujemy ten wygenerowany wcześniej

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=NASZ_KLUCZ" type="text/javascript"></script>

Cały kod powinien być w

function initialize() {
                  if (GBrowserIsCompatible()) {
// Nasz kod
        }
}

Dzięki temu mamy pewność, że mapy będzie można oglądać tylko w przeglądarkach w których Google Maps są wyświetlane poprawnie.

Teraz pora dodać naszą mapę.
Pierwszy wiersz mówi gdzie ma być wyświetlona mapa (w tym przypadku w divie o id map_canvas). Drugi jakie współrzędne ma wyświetlić, a trzeci przybliżenie

var map = new GMap2(document.getElementById("map_canvas"));
var center = new GLatLng(51.76869, 19.47155);
map.setCenter(center, 12);

Warto dodać sterowanie mapą. Pierwsza linijka kodu ładuję funkcje, druga daje możliwość przełączanie pomiędzy mapa/satelita/hybrydowa, a ostatnie linijka dodaje sterowanie mapą

var mapControl = new GMapTypeControl();
map.addControl(mapControl);
map.addControl(new GLargeMapControl());

Warto by było coś na tej mapie zaznaczyć, więc dodajemy marker. Jeśli wpiszemy true marker będzie przesuwalny, a przy false zostanie nieruchomy

var marker = new GMarker(center, {draggable: true});

Jeśli zaznaczyliśmy, że marker da się przesuwać warto dodać ten kod by podczas przesuwanie go chmurka znikła

GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();  
});

A teraz dodajemy co ma się wyświetlić nad znaczkiem gdy na niego klikniemy

GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Testowy tekst!");
});

I teraz wyświetlenie markerów na mapie

map.addOverlay(marker);

Zamiast zwykłego powinno być

<body onload="initialize()" onunload="GUnload()">

A przykładowy div, w którym wyświetla się mapa to np.

<div id="map_canvas" style="width: 500px; height: 350px"></div>

Współrzędne

By pobrać współrzędne wchodzimy na http://maps.google.pl, ustawiamy tak mapę jak nam odpowiada i naciskamy na Link.
Pojawi nam się np. coś takiego http://maps.google.pl/?ie=UTF8&ll=52.025459,19.204102&spn=6.112899,14.150391&z=6
52.025459,19.204102 to nasze współrzędne, a 6 na końcu to przybliżenie.

Cały kod

<html>
  <head>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=NASZ_KOD" type="text/javascript"></script>
    <script type="text/javascript">

                function initialize() {
                  if (GBrowserIsCompatible()) {
                  var map = new GMap2(document.getElementById("map_canvas"));
                  var center = new GLatLng(51.76869, 19.47155);
                  map.setCenter(center, 12);
                  var mapControl = new GMapTypeControl();
                  map.addControl(mapControl);
                  map.addControl(new GLargeMapControl());

                var marker = new GMarker(center, {draggable: true});
               
                GEvent.addListener(marker, "dragstart", function() {
                  map.closeInfoWindow();  
                  });
                 
                GEvent.addListener(marker, "click", function() {
                  marker.openInfoWindowHtml("Testowy tekst!");
                  });

                map.addOverlay(marker);
        }
}

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 350px"></div>
  </body>
</html>

Podsumowanie

Po raz kolejny widać, że stosowanie googlowych wynalazków jest banalne. Z drugiej strony to co przedstawiłem powyżej jest tylko niewielką cząstką tego co z tym można zrobić. Wystarczy rozejrzeć się po stronach internetowych by zobaczyć wiele sposobów zastosowania Google Maps. Jednak taka integracja wymaga już od nas czegoś więcej niż przeczytanie dokumentacji API.

]]> http://vivee.info/2009/02/08/google-maps-api-pierwsze-starcie/feed/ 7 Efektowne wykresy za pomocą Google Visualization API http://vivee.info/2009/01/16/efektowne-wykresy-za-pomoca-google-visualization-api/ http://vivee.info/2009/01/16/efektowne-wykresy-za-pomoca-google-visualization-api/#comments Fri, 16 Jan 2009 16:35:15 +0000 kamilgeneral http://vivee.info/?p=513 W tym tutorialu postaram się Wam przedstawić jak zrobić wykres kołowy i słupkowy (pionowy jak i poziomy) za pomocą Google Visualization API.

Wykres kołowy

Efektowne wykresy za pomocą Google Visualization API

Demo

Na początku musimy załadować JavaScript API.

google.load('visualization', '1', {'packages':['piechart']});

Rysowanie wykresu.

google.setOnLoadCallback(drawChart);

Teraz tworzenie tabeli. Musimy podać rodzaje i nazwy kolumn, oraz ilość rekordów.

function drawChart() {
var data = new google.visualization.DataTable();
 data.addColumn('string', 'Zadanie');
 data.addColumn('number', 'Godzin dziennie');
 data.addRows(5);

Pora na dane do tabeli. Teraz w naszych danych podajemy numer w jakiej kolejności mają być pokazywane rekordy (zaczynamy liczenie od zera). Po przecinku podajemy 0 jeśli chcemy podać następnie nazwę rekordy i w następnym wierszu 1 jeśli chcemy dać wartość.

data.setValue(0, 0, 'Spanie');
data.setValue(0, 1, 10);
data.setValue(1, 0, 'Jedzenie');
data.setValue(1, 1, 1);
data.setValue(2, 0, 'Szkoła');
data.setValue(2, 1, 8);
data.setValue(3, 0, 'Kompter');
data.setValue(3, 1, 3);
data.setValue(4, 0, 'Inne');
data.setValue(4, 1, 2);

Podajemy gdzie ma się pojawić wykres i jaki rodzaj . W tym przypadku pojawi się w divie o nazwie chart_div i rodzaju tak jak podaliśmy wcześniej PieChart.

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

I na koniec wielkość, rodzaj (2D/3D) i nazwa całego wykresu.

chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Mój dzień'});

Cały kod:

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">    
      google.load('visualization', '1', {'packages':['piechart']});
     
      google.setOnLoadCallback(drawChart);
         
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Zadanie');
        data.addColumn('number', 'Godzin dziennie');
        data.addRows(5);
        data.setValue(0, 0, 'Spanie');
        data.setValue(0, 1, 10);
        data.setValue(1, 0, 'Jedzenie');
        data.setValue(1, 1, 1);
        data.setValue(2, 0, 'Szkoła');
        data.setValue(2, 1, 8);
        data.setValue(3, 0, 'Kompter');
        data.setValue(3, 1, 3);
        data.setValue(4, 0, 'Inne');
        data.setValue(4, 1, 2);

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Mój dzień'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Wykres słupkowy

Demo

Efektowne wykresy za pomocą Google Visualization API

Tak samo jak w poprzedni przykładzie rozpoczynamy od podlinkowanie JavaScript API.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Teraz jako rodzaj wykresu wybieramy columnchart jeśli chcemy wykres pionowy lub barchart dla wykresu poziomego.

google.load("visualization", "1", {packages:["columnchart"]});

Następnie rysowanie wykresu.

google.setOnLoadCallback(drawChart);

Tabelę danych tworzymy na tej samej zasadzie co poprzednio:

function drawChart() {
 var data = new google.visualization.DataTable();
 data.addColumn('string', 'Rok');
 data.addColumn('number', 'Sprzedarz');
 data.addColumn('number', 'Koszty');
 data.addRows(4);

Tym razem dane się nam zmieniły. Też mamy numer, potem pod 0 mamy nazwę (w tym przykładzie rok), pod '1' pierwsza wartość, a pod '2' druga wartość.

data.setValue(0, 0, '2004');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1170);
data.setValue(1, 2, 460);
data.setValue(2, 0, '2006');
data.setValue(2, 1, 660);
data.setValue(2, 2, 1120);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1030);
data.setValue(3, 2, 540);

I na koniec taki sam kod tak jak przedtem, więc nie będę go omawiał. Musimy typamiętać by podać ColumnChart jeśli mamy wykres pionowy, albo BarChart jeśli mamy poziomy.

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Zyski'});

Cały kod:

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["columnchart"]});
         
      google.setOnLoadCallback(drawChart);
         
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Rok');
        data.addColumn('number', 'Sprzedarz');
        data.addColumn('number', 'Koszty');
        data.addRows(4);
        data.setValue(0, 0, '2004');
        data.setValue(0, 1, 1000);
        data.setValue(0, 2, 400);
        data.setValue(1, 0, '2005');
        data.setValue(1, 1, 1170);
        data.setValue(1, 2, 460);
        data.setValue(2, 0, '2006');
        data.setValue(2, 1, 660);
        data.setValue(2, 2, 1120);
        data.setValue(3, 0, '2007');
        data.setValue(3, 1, 1030);
        data.setValue(3, 2, 540);

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Zyski'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>

Podsumowanie

To co tutaj zaprezentowałem jest tylko ułamkiem możliwości Google Visualization API. Zachęcam do odwiedzenia oficjalnej strony. Można tam znaleźć pełną dokumentację oraz ciekawe przykłady zostosowań.

W połączeniu z umiejętnościami programistycznymi na bazie Google Visualization API można wyczarowań naprawdę wiele efektownie wyglądających rzeczy.

]]> http://vivee.info/2009/01/16/efektowne-wykresy-za-pomoca-google-visualization-api/feed/ 3 Pobieranie danych z MySQL w tle http://vivee.info/2009/01/01/pobieranie-danych-z-mysql-w-tle/ http://vivee.info/2009/01/01/pobieranie-danych-z-mysql-w-tle/#comments Thu, 01 Jan 2009 11:47:39 +0000 majareq http://vivee.info/?p=338 Temat jak najbardziej na czasie dla każdego webmastera. Żyjemy w czasach kiedy Ajax jest chlebem powszednim dla każdego profesjonalnego twórcy stron WWW. Jednak rzadko kto umie wykorzystać techniki Ajaxa w praktyce. Ten artykuł obrał za cel przynajmniej w części to zmienić.

demo pobierz


Całość artykułu i skryptu opierałem na rozwiązaniu Ajax'owym z W3School.

Więc do rzeczy! By zrobić to u siebie musisz wykonać następujące czynności:

  1. Utworzyć odpowiednią tabelę w bazie danych.
  2. Stworzyć kod HTML z listą w formularzu, odwołujący się do pliku Ajaxa.
  3. Stworzyć kod Ajaxowy obsługujący drugi plik PHP.
  4. Stworzyć plik PHP wywołujący dane z bazy.

Tabela SQL

Najpierw potrzebna nam w bazie danych tabela zawierające dane, które mamy dynamicznie pobierać.
U mnie jest to w formie:

id imie nazwisko miasto
1 Adam Kowalski Warszawa
2 Joanna Ogrodnik Kraków
3 Paweł Kostucha Gniezno
4 Marta Ługowska Elbląg

Zrzut bazy danych dostępny jest tutaj.

Pole id jest kluczem w tabeli i zawiera dodatkowy argument – auto_increment.
Oznacza to (auto_icrement), że nie musimy za każdym razem gdy dodajemy nową osobę do bazdy danych, wpisywać kolejnego id. Skrypt zrobi to za nas.
Ustawiając PRIMARY KEY (klucz główny) na id, spełniamy wymóg jaki narzuca nam działanie relacyjnych baz danych, identyfikujemy wiersze w tabeli.

Główny plik – ajax.php

Skoro już mamy tabelę w bazie możemy zapełnić ją rekordami. Dane wpisujcie dowolnie ;)
Przystępujemy do drugiego kroku naszego tutoriala. Plik ajax.php:
Pierwsza i najważniejsza kwestia: połączenie z bazą danych. Robimy to w następujący sposób:

mysql_connect('host','użytkownik_bazy','hasło_użytkownika');
mysql_select_db('nazwa_bazy_danych') or die("Nie odnaleziono bazy danych");

Pierwszą wywoływaną funkcją jest mysql_connect() gdzie parametrami są kolejno: host, użytkownik i hasło. W 99% przypadków w miejsce hostu należy wpisać po prostu localhost.

Potem wywołujemy funkcję mysql_select_db() która oznacza, jak nie trudno jest się domyśleć, wybranie bazy danych. Dalsza część kodu zaczynająca się od or die zakończy działanie skryptu i wyświetli napis znajdujący się pomiędzy cydzysłowami jeśli za pomocą wcześniej podanych informacji na temat użytkownika i hostu nie można połączyć się z bazą dany MySQL.

Jeśli dobrze wypełniłeś ten fragment kodu możemy przejść dalej:

echo'<script src="ajax.js"></script>';

Tego chyba nie muszę tłumaczyć. Oznacza to odwołanie się do pliku ajax.js. Możemy iść dalej.
Zajmiemy się teraz instrukcją liczącą rekordy w tabeli i wyświetlający odpowiednie napisy:

$liczRekordy = mysql_num_rows(mysql_query("SELECT * FROM ajaxsql"));
if ($liczRekordy > 0) {
echo '<center><font size="3" color="#7dab1b">Mamy '.$liczRekordy.' osób w bazie.</font></center>';
} else {
echo '<center><font size="3" color="#df1080">Nie ma osób w bazie.</font></center>';
}

Co zrobiliśmy teraz?

  1. Zmiennej o nazwie $liczRekordy nadaliśmy wartość ilości rekordów w tabeli o nazwie ajaxsql.
  2. Sprawdziliśmy czy jest jakiś rekord w tej tabeli i wyświetliśmy napis pokazujący ile jest tych rekordów. W przeciwnym wypadku napisaliśmy napis „Nie ma osób w bazie.”.

Przyszła pora na listę wyboru oraz tak zwany placeholder czyli miejsce gdzie będą pokazywać się rekordy z bazy danych. Dokonujemy tego za pomoca następującego kodu:

echo'<form>Wybierz osobę:
<select name="users" onchange="showUser(this.value)"><option>wybierz zgloszenie</option>';
$sql2="SELECT * FROM ajaxsql ORDER by id ASC";
$result2 = mysql_query($sql2);
while($row2 = mysql_fetch_array($result2))
 {
 echo "<option value="" . $row2['id'] . "">(" . $row2['id'] . ") " . $row2['imie'] . " " . $row2['nazwisko'] . "</option>";
 }
echo'</select></form><div id="txtHint"></div>';

Pora na krótką analizę:
Najpierw tworzymy formularz za pomocą <form>, potem tworzymy listę wyboru <select> nadajemu mu m.in parametr onchange wywołujący funkcję JS showUser która pokazuje aktualnie wybraną wartość. Potem wywołujemy wszystkie rekordy z tabeli 'ajaxsql' sortując rosnąco. Wyświetlania rekordów z bazy dokonujemy za pomocą pętli while. Następnie zamykamy listę i formularz oraz tworzymy placeholder, który niedługo zdefiniujemy w pliku ajax.js

No dobrze. Skończyliśmy pisać plik ajax.js . Twoja wersja tego pliku powinna wyglądać mniej więcej tak:

<?php
mysql_connect('host','użytkownik_bazy','hasło_użytkownika');
mysql_select_db('nazwa_bazy_danych') or die("Nie odnaleziono bazy danych");
echo'<script src="ajax.js"></script>';
$liczRekordy = mysql_num_rows(mysql_query("SELECT * FROM ajaxsql"));
if ($liczRekordy > 0) {
echo '<center><font size="3" color="#7dab1b">Mamy '.$liczRekordy.' osób w bazie.</font></center>';
} else {
echo '<center><font size="3" color="#df1080">Nie ma osób w bazie.</font></center>';
}
echo'<form>Wybierz osobę:
<select name="users" onchange="showUser(this.value)"><option>wybierz zgloszenie</option>';
$sql2="SELECT * FROM ajaxsql ORDER by id ASC";
$result2 = mysql_query($sql2);
while($row2 = mysql_fetch_array($result2))
 {
 echo "<option value="" . $row2['id'] . "">(" . $row2['id'] . ") " . $row2['imie'] . " " . $row2['nazwisko'] . "</option>";
 }
echo'</select></form><div id="txtHint"></div>';
?>

Plik Ajaxa – ajax.js

Plik ajax.js oparłem na rozwiązaniu W3School więc od razu zaznaczam, że nie ja jestem jego autorem. Lecz postaram się w miarę moich skromnych możliwości skutecznie go objaśnić. Nie będę teraz pokazywał poszczególnych cześci kodu, ponieważ śmiało możecie go pobrać z tego adresu.

Plik ten zawiera 3 funkcje. Pierwsza z nich to wspominana już funkcja showUser.
Sprawdza ona najpierw czy Twoja przeglądarka obsługuje HTTP Reguest, jeśli nie to wyświetli po prostu komunikat „Browser does not support HTTP Request”. Używa także ostatniej w pliku funkcji czyli GetXmlHttpObject(), której działanie opisuje następne zdanie.

Jeśli przeglądarka nie obsługuje XMLHttpRequest (a obługują przeglądarki na Gecko) to używa ona ActiveXObject obsługiwanego przez popularnie nazywane badzIEwie czyli Internet Explorer.

Potem definiuję zmienną url, która będzie odwoływać się do pliku omówionego w następnym kroku – getajax.php
Obsługuje ona też dalsze parametry adresu url definiując tablicę $_GET['q'].

Kolejna funkcja - stateChanged() definuje nasz opisany już placeholder.

To koniec pliku ajax.js :) Pora na następny krok.

Plik obsługiwany przez Ajax – getajax.php

Tutaj godne podkreślenia jest to że należy osobno łączyć się z bazą danych. Nie można używać żadnych z tych funkcji: include(), require(), require_once(), include_once(). Zatem... PHP czas zacząć!

$q=$_GET["q"];
$con = mysql_connect('host', 'user', 'hasło');
if (!$con)
 {
 die('Nie mogę się połączyć. Error: ' . mysql_error());
 }

Tym kodem zrobiliśmy następujące rzeczy: przekazaliśmy do zmiennej $q dane z tablicy $_GET['q'] czyli parametry url'a. Potem wywołaliśmy instrukcję łączenia się z bazą danych. W przypadku nie powodzenia skrypt wyświetli nam błąd o treść: „Nie mogę się połączyć. Error: szczegóły_błędu”. A oto co wykonujemy potem:

header("Content-type: text/html; charset=iso-8859-2");
mysql_select_db("baza", $con);
$sql="SELECT * FROM ajaxsql WHERE id = '".$q."'";
$result = mysql_query($sql);

Najpierw wyslaliśmy MIME informujący, że kod pobierany przez Ajax w przeglądarce będzie typu HTML, a kodowanie tekstu będzie w iso-8859-2. Następnie połączyliśmy się z bazą danych, wybraliśmy rekordy z tabeli i zapisaliśmy do zmiennej $result. Co robimy dalej?

while($row = mysql_fetch_array($result))
 {
 echo "(" . $row['id'] . ") ";
 echo "" . $row['imie'] . " " . $row['nazwisko'] . "
";
 echo "<strong>Miasto: </strong>" . $row['miasto'] . "";
}
mysql_close($con);

Ponownie używamy pętli while do wyświetlenia pobranych rekordów z tabeli. Tym razem w instrukcji while ładnie wyświetlamy wszystkie informacje na temat osoby znajdującej się w stworzonej już przez nas tabeli 'ajaxsql'. Potem zamykamy połączenie z bazą danych.

Całość tego pliku przedstawiam poniżej:

<?php
$q=$_GET["q"];
$con = mysql_connect('host', 'user', 'hasło');
if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }
header("Content-type: text/html; charset=iso-8859-2");
mysql_select_db("baza", $con);
$sql="SELECT * FROM ajaxsql WHERE id = '".$q."'";
$result = mysql_query($sql);

while($row = mysql_fetch_array($result))
 {
 echo "(" . $row['id'] . ") ";
 echo "" . $row['imie'] . " " . $row['nazwisko'] . "
";
 echo "<strong>Miasto: </strong>" . $row['miasto'] . "";
}

mysql_close($con);
?>

To już koniec naszego tutoriala. Przedstawiłem Wam metodę dynamicznego pobierania informacji z tabeli w bazie danych MySQL. Można to dowolnie dostosowywac do swoich projektów.
Wersję do pobrania znajdziecie tutaj.

MajareQ

]]> http://vivee.info/2009/01/01/pobieranie-danych-z-mysql-w-tle/feed/ 18