web-touristjquery – основи, ефекти, селектиране
Автор: NewGuy
Jquery е една от най-големите библиотеки която се разпространява от близо 3 години. Тя служи за улеснение на програмистите. Мощен инструмент с доста възможности. Без да знаете javascript благодарение на библиотеката на jquery с няколко реда код може да замените един тон javascript код. Повечето хора се плашат от думата библиотека. Това е просто един файл който се сваля от сайта на jquery и се добавя в index файла. В този урок ще видим повече ефекти и малко ajax.
Можете да изтеглите демо файловете от тук или да гледате видео урока.
Старал съм се да има максимално подробно описание и на много места наистина досадно. Повтарял съм неща, които трябва да се запомнят.
Урока е разделен на 3 части. Заглавията им и описанието може да ви се вижда много „елементарно“ както и трябва да бъде.
Част първа използване на hide() и show() и работа с onclick.
Създайте един файл с име index.html или index.php както желаете. Изтеглете библиотеката (файлчето). За да добавим библиотеката в сайта ни трябва да сложим този ред между <head> и </head>
<script type="text/javascript" src="jquery.js">За по-голямо удобство е най-добре да създадете нов файл с разширение .js за да може да се пише целия jquery код само в 1 файл а не в index файла.
Аз създадох файл и го нарекох learn.js
Добавете го в индекса с същия код като горния но променете името.
<script type="text/javascript" src="learn.js">Отваряме го и добавяме тези редове
$(function(){ // $(function() { НЯКАКВО УСЛОВИЕ }); заменя $(document).ready(function() { НЯКАКВО УСЛОВИЕ }) . Не ви говори нищо? Този код служи за изпълнение на някакви действие след като страницата е заредена.
$("#show").hide(); // Тук добавям условието, че искам да се скрие елемента с id SHOW. Забележете как се задава. $("#show") избира елемента с id show и след това изпълнява действието hide() който служи за скриване на дадени елементи. Може да се зададе и с css - display: none;
});
function pokaji(){ //Създаваме функция pokaji когато тя бъде извикана ще бъде извършено някакво действие
$("#show").show(); //Подобно на горния код избираме елемента с id show но този път го показваме с show();
}
function skrij(){ //Създаваме функция skrij когато тя бъде извикана ще бъде извършено някакво действие
$("#show").hide(); // Тук добавям условието, че искам да се скрие елемента с id SHOW. Забележете как се задава. $("#show") избира елемента с id show и след това изпълнява действието hide() който служи за скриване на дадени елементи. Може да се зададе и с css - display: none;
}
Надявам се описанията да са достатъчни.
Отиваме в index файла, който създадохме преди малко и добавяме между <body> и </body> тези редове
<!-- Показване/скриване на елементи с Jquery и използване на click--><a href="#" onClick="pokaji()">Покажи</a>
<!-- Създаваме един линк който не води на никъде с id pokaji. Когато се натисне върху него нашата цел е да покаже DIV-а с id SHOW който се намира малко по-надолу -->|<a href="#" onClick="skrij()">Скрий</a>
<!-- Създаваме един линк който не води на никъде с id skrij. Когато се натисне върху него нашата цел е да скрие вече показания DIV с id SHOW -->
<div class="show" id="show">
<!-- Създаваме div с id SHOW. По него ще се ориентира jquery кода кога да го показва и скрива -->В първата част от урока вече се запознахме с jquery а сега и с създаването на функции и...
<br>
<a href="http://docs.jquery.com/Show" target="_blank">Jquery show()</a>
<br>
<a href="http://docs.jquery.com/Hide" target="_blank">Jquery hide()</a>
</div>Вече може да запазим файловете и да отворим index файла. Трябва да имаме 2 линка. При натискането на единия, който пише „Покажи“ ще се появи един „скрит“ div със съдържанието което сме му задали. В случея то е линк към документацията на jquery, с която може да си помагате изключително много.
Част втора въведение в ajax използване на load
В тази част ще продължим с файловете от по-горния пример с вече добавената библиотека и файла learn.js. Тук ще ви покажа как може да добавяте различни файлове само с промяна на линка. При натискането на линка страницата НЕ СЕ ПРЕЗАРЕЖДА а добавя този файл.
Добавяме в index файла това:
<a href="#" onClick="ajaxtest('1')">Файл 1.html</a>
<!-- Целта на този линк е да му се зададе една функция която да бъде извиквана при натискане на линка. При натискането трябва да бъде зареден файла 1.html -->|<a href="#" onMouseOver="ajaxtest('2')">Файл 2.html</a>
<!-- В първата част и в началото на втората както виждате използваме onclick то служи когато се натисне бутона да изпълнява/зарежда някакво действие. Тук обаче аз използвам onmouseover. Служи когато се мине с мишката през линка/елемента да изпълнява някакво действие. -->
<div class="show" id="show1">
</div>А в learn.js това:
function ajaxtest(val){ //Създаваме функция ajaxtest с параметър val. При извикването на функцията ще извърши някакво действие.
$("#show1").load("" + val + ".html"); // Забележете как се задава. $("#show") избира елемента с id show1 и след това изпълнява действието load("името на файла.html") който добавя файла в това id което сме избрали. Освен html файлове може да се добавят и други php, txt и т.н.
}Нека създадем и 2 пробни файла с различни съдържание.
Кръстете ги1.html и 2.html добавете ги в директорията в която е и index файла.
Напълнете ги с каквато информация вие желаете може да добавяте и HTML тагове и браузъра ще ги чете.
Част трета ефекти
Подобно на предишните части ще използваме jquery и learn.js файла от тях.
В index файла добавяме:
<a href="#" onClick="slide()">SlideToggle демо</a>
<!-- Извикваме функцията slide при натискане на линка. -->|<a href="#" onClick="slidedown()">SlideDown демо</a>
<!-- Извикваме функцията slidedown при натискане на линка. -->|<a href="#" onClick="slideup()">SlideUp демо</a>
<!-- Извикваме функцията slideup при натискане на линка. -->
<br>
----
<br>
<!-- FadeIn FadeOut FadeTo --><a href="#" onClick="fadeOut()">fadeOut демо</a>
|<a href="#" onClick="fadeIn()">fadeIn демо</a>
|<a href="#" onClick="fadeTo()">fadeTo демо</a>
|
<div class="show" id="fade">
В третата част от урока се запознахме с:
<br>
<a href="http://docs.jquery.com/Effects/slideToggle" target="_blank">Jquery slideToggle</a>
<br>
<a href="http://docs.jquery.com/Effects/slideDown" target="_blank">Jquery slideDown</a>
<br>
<a href="http://docs.jquery.com/Effects/slideUp" target="_blank">Jquery slideUp</a>
<br>
<br>
<a href="http://docs.jquery.com/Effects/fadeIn" target="_blank">Jquery fadeIn</a>
<br>
<a href="http://docs.jquery.com/Effects/fadeOut" target="_blank">Jquery fadeOut</a>
<br>
<a href="http://docs.jquery.com/Effects/fadeTo" target="_blank">Jquery fadeTo</a>
<br>
</div>А в learn.js файла:
function slide(){ //Създаваме функция slide когато тя бъде извикана ще бъде извършено някакво действие
$("#show").slideToggle("slow"); //SlideToggle се използва за слайдер. Много удобно и лесно се правят хубави менюта. Параметъра който има е показва колко бързо се изпълнява действието. "slow" може да бъде заменен с "normal" или "fast" както и милисекунди. Те не трябва да се слагат в кавички.
}
function slidedown(){ //Създаваме функция slidedown когато тя бъде извикана ще бъде извършено някакво действие
$("#show").slideDown("slow"); //slideDown е само слайдер надолу. При повторно натискане на бутона няма да има никакъв ефект.
}
function slideup(){ //Създаваме функция slideup когато тя бъде извикана ще бъде извършено някакво действие
$("#show").slideUp("slow"); //slideDown е само слайдер надолу. При повторно натискане на бутона няма да има никакъв ефект.
}
function fadeOut(){ //Създаваме функция slideup когато тя бъде извикана ще бъде извършено някакво действие
$("#fade").fadeOut("slow"); //fadeOut прави така, че скрива елемента който му зададем "ефектно". В случея този с id fade. Както по-горе съм написал за SlideToggle може да му се зададе каква да бъде скоростта на показване.
}
function fadeIn(){
$("#fade").fadeIn("slow"); //fadeIn прави така, че показва елемента "ефектно" който му зададем в случея този с id fade. Както по-горе съм написал за SlideToggle може да му се зададе каква да бъде скоростта на показване.
}
function fadeTo(){
$("#fade").fadeTo("slow", 0.50); //fadeTo служи за слагане на opacity (прозрачност) на даден елемент. Първото условие е да му се зададе бързината подобни на предишните 2 а вторият колко прозрачен да стане елемента. Както е зададено в момента на 0.50 това значи, че елемента ще стане прозрачен на 50%
}В тази част може да се види как се слага opacity как се прави слайдер плавно показване/скриване на дадени елементи.
Моля четете коментарите в HTML-а и javascript-а.
За въпроси тук или във форума.
