Курс валют

Хостинг в России


Дешевле белорусского в 3 раза

Хостинг в Беларуси

Аксиома

Любой кузнец может выковать саблю, но только мастер может сделать настоящий клинок.

Web-студия

Разработка сайтов

Делаем полностью адаптивные веб-сайты, которые одинаково хорошо будут смотреться и на ПК, и на мобильных устройствах.

Расскажем как управлять сайтом без помощи программиста или веб-мастера, Сделаем полную настройку движка сайта (CMS).

Пожизненная консультация о работе вашего сайта, по крайней мере до тех пор пока существует наша веб-студия.

Статистика



Сетевые филиалы

Наш 2-й сайт 2o2.by

Наш 3-й сайт 12h.by

Наш 4-й сайт 24ch.by


 Подборка полезного кода jQuery

Никому не секрет, что jQuery стал широко развиваться и использоваться в веб-дизайне, благодаря своим широким возможностям. jQuery вдохнул новую жизнь в jаvascript. В данном уроке приводится некоторые, полезные вставки кода jQuery, которые облегчат решение повседневных задач, возникающих при создании веб-приложений. Данная статья станет полезной не только для опытных веб-разработчиков, но и для начинающих мастеров. Это позволит упростить разработку компонентов сайта, и прикрутить некоторые полезные вещи, что упростит пользователям жизнь..

Подборка полезного кода jQuery

ОТКЛЮЧАЕМ КЛАВИШУ “ENTER” В ФОРМАХ:

По умолчанию, форма может быть отправлена нажатием клавиши “Enter”. Но в некоторых формах такой функционал может оказаться лишним и порождать некоторые проблемы при вводе данных. Ниже приведенный код подавляет функционирование клавиши “Enter” в форме.

$("#form").keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});


ПЛАВНОЕ ПРОЯВЛЕНИЕ/ЗАТУХАНИЕ ПРИ НАВЕДЕНИИ КУРСОРА МЫШИ:]

Еще один приятный визуальный эффект, который очень популярен — плавное проявление/затухание элементов при наведении на них курсора мыши. Следующий код устанавливает непрозрачность 100% при наведении курсора мыши, и 60% — при потере фокуса.

$(document).ready(function(){
    $(".thumbs img").fadeTo("slow", 0.6); // Устанавливаем непрозрачность миниатюр до 60% при загрузке страницы.
 
    $(".thumbs img").hover(function(){
        $(this).fadeTo("slow", 1.0); // При наведении курсора, непрозрачность становится 100%.
    },function(){
        $(this).fadeTo("slow", 0.6); // Пр потере фокуса непрозрачность опять становится 60%.
    });
});


ПЛАВНАЯ ПРОКРУТКА ДЛЯ ССЫЛКИ:

jQuery известен своим функционалом для создания визуальных эффектов. Простой, но приятный эффект — плавное проскальзывание содержания до ссылки. Следующий код создает такой эффект, когда нажимается ссылка с классом topLink.

$(document).ready(function() {
	$("a.topLink").click(function() {
	$("html, body").animate({
	scrollTop: $($(this).attr("href")).offset().top + "px"
	}, {
	duration: 500,
	easing: "swing"
	});
	return false;
	});
});


СНАБЖАЕМ ССЫЛКИ АТРИБУТОМ TARGET=”BLANK”:

Следующий код будет открывать все ссылки, снабженные атрибутом rel="external" в новой закладке или окне. Код легко модифицировать для открытия ссылок только с определенным классом.

$('a[@rel$='external']').click(function(){
     this.target = "_blank";
});
 
/*
   Использование:
   <a href="http://www.rudebox.org.ua" rel="external">www.rudebox.org.ua</a>
*/


РАВНАЯ ВЫСОТА КОЛОНОК:

При построении шаблона с использованием колонок очень хочется, чтобы они были одинаковой высоты, как в старой доброй таблице. Ниже приведенный код автоматически вычисляет самую высокую колонку и выравнивает остальные по ней.

var max_height = 0;
$("div.col").each(function(){
    if ($(this).height() > max_height) { max_height = $(this).height(); }
});
$("div.col").height(max_height);




Просмотров: 172

Авторское право © 2000-2022, Беларусь, WEB студия «Stels Lab Team». Все Права Защищены.