Roots Programming

Co to takiego Jquery?
piękna definicję podaję wiki http://pl.wikipedia.org/wiki/JQuery. Jednak dla mnie jquery to po prostu cud nie z tej ziemi i dzięki niemu można bez najmniejszego problemu sprawić, aby strona ożyła i zaczęła prezentować się o niebo lepiej, bez potrzeby katowania się nad czystym Java Scriptem.

Skąd to wziąć i jak się tego używa?
Najlepiej ze strony oficjalnej http://jquery.com i http://jqueryui.com pobrać biblioteki http://code.jquery.com/jquery-1.10.2.js oraz http://jqueryui.com/resources/download/jquery-ui-1.10.3.zip. W przypadku drugiego pliku nalezy odszukać plik jquery-ui.min.js, który jest poszukiwaną biblioteką.

Gdy już biblioteki są na dysku, zapisujemy je, gdzieś w katalogu gdzie znajduję się strona. Proponuję do tego celu utworzyć katalog Scripts i tam umieścić biblioteki. Ścieżka do plików powinna wyglądać mniej więcej tak:

C:\PROJECTS\JqueryTest\Scripts\jquery-1.4.1.js
C:\PROJECTS\JqueryTest\Scripts\jquery-ui.min.js

Skoro pliki już są w naszym katalogu przejdźmy do strony html. Aby móc korzystać z Jquery należy podpiąc biblioteki do strony, robimy to tak samo jak dodaje się inne biblioteki JS. Czyli umieszczamy w sekcji

No i to właściwie by było wszystko jeżeli chodzi o podpięcie Jquery to strony, gdyby nie to, że Jquery można śmiało podpinać bezpośrednio ze strony oficjalnej ! ! Niewiele to poprawia wydajność lub szybkość działania aplikacji ale mimo to zawsze server mniej obciążony i można zmniejszyć ilość plików aplikacji co zwiększa jej czytelność. Niestety plik jquery-ui.min.js trzeba podpiąć w tradycyjny sposób.

Podpinamy pliki w następujący sposób:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Przykłady ! !
Przykładów mogą być tysiące. Zastosowanie zależy tylko od wyobraźni i wymagań aplikacji tudzież strony. Szybki przykład zastosowania funkcji show() i hide() w aplikacji używającej taby jako nawigacji.

Nasz cel to utworzenie następującego menu nawigacyjnego:

Cały kod html to narazie tylko tyle. Na zielono zaznaczyłem dodane style do tabelki i biblioteki potrzebne do działania Jquery. Szybko zerkając widać również, że pojawia się tam czerwony kolor symbolizujący ten fragment kodu który będzie zmieniany przez Jquery. Funkcje show() oraz hide() służą przede wszystkim temu właśnie celowi. Aczkolwiek posiadają również swoje odpowiedniki z parametrami dzięki czemu można ustawić sposób pojawiania się lub znikania danej sekcji, prędkość lub funkcje dodatkowe.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="~/Styles/Tabs.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.min.js"></script>
</head>
<body>
<table>
<tr>
<td>
<table id="NavigationBar" class="NavigationBar">
<tr>
<td id="FirstTab">
First Tab
</td>
<td id="SecondTab">
Second Tab
</td>
<td id="ThirdTab">
Third Tab
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table id="ContentTable" class="ContentTable">
<tr id="FirstPage">
<td>
First Page
</td>
</tr>
<tr id="SecondPage" style="display:none;">
<td>
Second Page
</td>
</tr>
<tr id="ThirdPage" style="display:none;">
<td>
Third Page
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

No i Tabs.css, warto od samego początku tworzyć style w aplikacji, żeby później mieć zdecydowanie mniej pracy!

.NavigationBar
{
width: 500px;
}

.NavigationBar td
{
text-align:center;
border-style:solid;
border-width:thin;
border-color:Black;
cursor:pointer;
}

.ContentTable
{
width: 500px;
}

.ContentTable td
{
text-align:center;
border-style:solid;
border-width:thin;
border-color:Black;
height: 300px;
}

Skoro już istnieje podstawa do pracy to przejdźmy do konkretów. standardowa składnia Jquery wygląda nastepująco:

$(selektor).funkcja();

gdzie selektorem może być id pola html, klasa css, rodzaj taga lub jakiś inny selector ( :hover, :active, :link ).
Przykłady dla krótkiego kodu który już mamy polecam wypróbować wszystkie pokolei i popróbować samemu ;) Aby wypróbować kod na końcu całej strony tworzymy blok skrypt i umieszczamy nasze wywołania Jquery.

<script type="text/javascript">
//w trakcie jednej kompilacji testować tylko jeden selektor

$('#SecondPage').show(); //pokazujemy sekcje o nazwie SecondPage która dotychczas była ukryta stylem display:none

$('.ContentTable tr').first().hide(); //chowamy pierwszy wiersz w tabeli która ma klasę .ContentTable

</script>

Jak widać na przykładzie funkcje Jquery można łączyć przy pomocy kropek jak to ma miejsce w strukturach języków c. Pojawiła się również funkcja first(), która wybiera z selektora $('.ContentTable tr') pierwszy element bez znaczenia jaki ma typ.

Opiszmy teraz kolejny fajny trik Jquery. W większości funkcji Jquery istnieje rodzaj delegata umożliwiającego uruchomienie dowolnej funkcji jako parametru. Czyli w teori i praktyce wyglądałoby to tak.

$(selektor).funkcja(funckja());
przykład:
$('#FirstTab').hide(alert('znikam')); //W momencie wciśnięcia pierwszego taba ten tab znika oraz pojawia się komunikat 'znikam'.

Osobiście uważam to za cudowne rozwiązanie. Teraz dowiedzmy się o istnieniu funkcji click().
Jest to rodzaj callback'a który aktywuje się zawsze kiedy obiekt do którego jest przypisany zostanie kliknięty. Wykorzystując zdobytą wiedzę napiszmy w koncu pełną funkcjonalność naszych tabów. Podobnie jak wcześniej dodajemy blok script za zamknięciem <html> i piszemy na przykład taki kod.

<script type="text/javascript">
$('#FirstTab').click( //wcisniecie pierwszej zakładki
function () {
$('#FirstPage').show(); //pokaz pierwsza strone
$('#SecondPage').hide(); //ukryj drugą strone
$('#ThirdPage').hide(); //ukryj trzecia stronę
}
);

$('#SecondTab').click( //analogicznie tylko wciśniety drugi przycisk
function () {
$('#FirstPage').hide();
$('#SecondPage').show();
$('#ThirdPage').hide();
}
);

$('#ThirdTab').click( //analogicznie jak wyżej tylko wciśnięty trzeci przycisk
function () {
$('#FirstPage').hide();
$('#SecondPage').hide();
$('#ThirdPage').show();
}
);
</script>

No i mamy to czego potrzebowaliśmy uzyskaliśmy ładne funkcjonujące zakładki pisząć stosunkowo mało kodu. Teraz wystarczy dobrać odpowiednie style, szate graficzną i zapełnić stronę treścią. A pasek nawigacyjny pozwoli szybko przemieszczać się po stronie.

piątek, 15 listopada 2013

Jquery - czyli szybki kurs po co męczyć się z Java Script'em

środa, 13 listopada 2013

Rozpoczynamy