Полезни jQuery снипети - част I

Малки фрагменти jQuery код, които можете да ползвате в сайтовете си за да добавяте допълнителна функционалност - нещо незадължително, което обаче веднъж като използвате обикновено не изоставяте

Акцент: да е полезно и използваемо по познатата методика copy-paste (любимата на разни шефчета, които грам не разбират от кодиране/програмиране и постоянно ръсят вицове от рода на “Какво толкова?! Ако седна ще го напиша за пет минути!” - ами айде, седни :@)

1. Поле за търсене с някакъв подразбиращ се текст + приложен стил -> автоматично скриване на текста + смяна на стила, когато потребителят започне да пише (полето е на focus):

$(”#searchField”).bind(”focus blur”, function() {
if ( $(this).val() == ” Търсене за..” ) { $(this).val(”"); }
$(this).toggleClass(”activeSearchField”);
});

- input поле с id=”searchField” -> следим за focus и blur;
- ако при focus/blur стойността на полето е тази, която сме задали by default (value=”") я изтриваме;
- сменяме класа на полето, т.е можем, например, да зададем различен цвят на шрифта спрямо цвета на текста by default, да сменяме рамката на input полето и изобщо какво там се сетим;

Може да се добави и обратното:

$(”#searchField”).bind(”blur”, function() {
if ( $(this).val() == “” ) { $(this).val(” Търсене за..”); }
});

2. Забележка за load:

load( url, [data], [callback] ) : Load HTML from a remote file and inject it into the DOM

Note: Keep in mind that Internet Explorer caches the loaded file, so you should pass some extra random GET parameter to prevent caching if you plan to call this function more than once

Най-лесният начин е да правим нещо като:

$(”css selector here”).load(’path-to-ajax-script/script-name.php?=<?=uniqid();?>’, data, function (responseText, textStatus, XMLHttpRequest) { });

3. Добавяне на малки иконки към различен тип връзки, например към всички външни връзки:

- добавяме специфичен клас за CSS селектора, например “external”
- добавяме 2 реда (1) jQuery код:

var extImg = ‘ <img class=”extLinkImg” src=”‘ + root + ‘images/icons/i-external.png” alt=”External Link” />’;
$(”a.external”).each(function() { $(this).append(extImg); });

- (option) добавяме съответните CSS правила за иконките за класа “extLinkImg”
- (option) дефинираме root (ако работите с modRewrite и/или ви трябват абсолютни адреси)
- (option) ако jQuery снипетът не е във външен js файл за да не пречи кода на валидатора го поставяме в CDATA секция + (option) обичайното скриване на кода от по-старите браузъри, вкл. и CDATA-та:

<script type=”text/javascript”>
<!–
/* <![CDATA[ */

jQuery / native JavaScript code here

/* ]]> */
//–>
</script>

Това е. Предимства пред хардкорването:

- чист и по-малко код (няма JS, ботът не вижда неща, които не го касаят)
- всичко това се добавя via jQuery след като страницата е вече заредена - минимално увеличение на скоростта на зареждане
- след като нещата са подготвени, единственото, за което остава да се грижим оттук нататък е добавянето на class=”external” - абсолютно в съгласие с концепцията на jQuery: write less, do more!