ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Управление поведением ссылок

Ссылки позволяют нам перемещаться по Интернету, получать мгновенный доступ к информации размещенной в сети. Поскольку ссылки это один из наиболее обычных и мощных компонентов HTML, существует множество способов JavaScript для улучшения их работы.

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

Выборка ссылок с помощью JavaScript

Чтобы выполнить любую операцию со ссылкой на странице, сначала эту ссылку нужно выбрать. Вы можете выбрать все ссылки на странице, только одну ссылку или отдельную группу взаимосвязанных ссылок, например, ссылки, сгруппированные в одной из частей страницы, ссылки, объединенные определенными характеристиками ( например, внешние ссылки, ведущие за пределы вашего сайта).

Библиотека jQuery предоставляет большую гибкость при выборе элементов документа. Код $('а') создает выборку jQuery, в которую входят все ссылки страницы. Более того, библиотека jQuery обеспечивает более точные выборки, например, вы можете быстро выбрать все ссылки с отдельного участка страницы.

После того как вы выбрали ссылки, вы можете использовать jQuеrу-функции для работы с этими ссылками. Например, проработать каждую ссылку в цикле с помощью функции each(), присвоить класс этим ссылкам, используя функцию addClass(), или добавить к ним функции событий.

Определение направления ссылки

После того как вы выбрали одну или более ссылок, вы можете поинтересоваться, куда они ведут. Например, в галерее, которую вы создали ранее, каждая ссылка указывала на крупное изображение. Находя путь, мы использовали язык JavaScript для отображения этого большого изображения. Иными словами, мы извлекали значение ссылки href и использовали его для создания на странице нового элемента irng. Таким же образом несложно извлечь значение ссылки href, ведущей на другую веб-страницу, и вместо того чтобы перейти по ссылке, мы можем отобразить новую веб-страницу поверх текущей веб-страницы.

В каждом случае вам необходим доступ к атрибуту href, чего несложно добиться с помощью jQuеrу-функции attr{). Например, вы присвоили идентификатор ссылке, которая ведет на домашнюю страницу сайта. Вы можете найти путь этой ссылки таким способом:

var homePath = $("#homelink").attr("href");

Например, нам понадобился полный URL-адрес ссылки, ведущей за пределы нашего сайта, после самого текста ссылки. Мы можем легко это сделать с помощью следующего кода:


$(document).ready(function() {
$('a[href^="http://"]').each(function() {
var href = $(this).attr('href');
href = href.replace('http://','');
$(this).after('(' + href + ')');
});
});
<!DOCTYPE html>
<html>
<title>Управление поведением ссылок</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link href="../../css/w3.css" rel="stylesheet" type="text/css">
<style>

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('a[href^="http://"]').each(function() {
var href = $(this).attr('href');
href = href.replace('http://','');
$(this).after('(' + href + ')');
});
});
</script>
<body class="w3-light-grey">
<div class="w3-content w3-layout-container" >
<div class="w3-twothird w3-col s10" style="margin:0 10%">
<div class="w3-container w3-card-2 w3-white w3-margin-bottom" style="height:550px" >
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-anchor fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Управление поведением ссылок</h2>
<a href="http://www.w3schools.com/jquery/default.asp" target="_parent">jQuery Tutorial</a>


</div>
<div style=" clear:both"></div>
<footer class="w3-container w3-teal w3-center w3-margin-top " style="height:80px; padding-top:20px;">
<i class="fa fa-facebook-official w3-hover-text-indigo w3-large"></i>
<i class="fa fa-instagram w3-hover-text-purple w3-large"></i>
<i class="fa fa-snapchat w3-hover-text-yellow w3-large"></i>
<i class="fa fa-pinterest-p w3-hover-text-red w3-large"></i>
<i class="fa fa-twitter w3-hover-text-light-blue w3-large"></i>
<i class="fa fa-linkedin w3-hover-text-indigo w3-large"></i>
</footer>
</div>
</body>
</html>


В строке 2 выбираются все внешние ссылки, затем запускается функция each() которая просто применяет функцию к каждой ссылке. В данном случае тело функции содержится в строках 3-5. Строка 3 извлекает атрибут href ссылки (например, http://www.w3schools.com/jquery/default.asp). Строка 4 необязательна, она лишь упрощает URL-aдpec, удаляя часть http://,так что в переменной href теперь находится следующее: www.w3schools.com/jquery/default.asp. Наконец, в строке 5 содержимое переменной href (в круглых скобках) добавляется к окончанию ссылки: (www.w3schools.com/jquery/default.asp). Строка 6 закрывает функцию.

Не переходить по ссылке

Добавляя к ссылке событие click, вы можете не захотеть, чтобы браузер, как обычно, уходил с текущей страницы и загружал ту страницу, на которую указывает ссылка. Например, в галерее изображений, когда вы щелкаете по эскизу, на странице появляется большое изображение. Как правило, щелчок по ссылке эскиза уводит вас с текущей страницы и отображает большое изображение на пустой странице. Однако в нашем случае вместо перехода по ссылке к более крупному изображению мы остаемся на прежней странице, на которую загружается большая картинка.

Есть пара способов предотвратить переход по ссылке: вы можете возвратить значение false или использовать jQuеrу-функцию preventDefault(). Например, у вас есть ссылка, приводящая посетителя на страницу авторизации. Чтобы сделать ваш сайт более интерактивным, вы хотите использовать язык JavaScript для отображения формы авторизации при щелчке по ссылке. Иными словами, если в браузере посетителя включен JavaScript, то форма появится на странице; если JavaScript выключен, то щелчок по ссылке доставит пользователя на страницу авторизации.

Чтобы достичь данной цели, необходимо выполнить несколько шагов:

  1. Выбираем ссылку на страницу авторизации.
  2. Прикрепляем событие click. Чтобы сделать это, можно использовать jQuеrу-функцию click (), которая принимает в качестве аргумента друrую функцию. Во вто­рой функции содержатся действия, производящиеся, когда пользо­ватель щелкает по ссылке. В данном примере необходимо всего два действия.
  3. Показываем форму авторизации. Ее можно скрыть из виду, пока страница загружается, например, с помощью абсолютно позиционированного элемента div прямо под ссылкой. Мы можем отобразить форму, используя функцию show() или другой эффект отображения, предусмотренный библиотекой jQuery
  4. Остановить ссылку! Это самый важный шаг. Если вы не остановить ссылку, браузер просто покинет данную страницу и перейдет на страницу с формой авторизации.

Рассмотрим, как остановить ссылку с помощью инструкции возврата. Предположим, ссылка имеет идентификатор showForm, а скрытый элемент div с формой авторизации - loginForm:

$("#showForm").click(function(e) {
$("#loginForm").fadeIn("slow");
return false;
});

В строке 1 выполняются этапы 1 и 2, описанные выше. Строка 2 отображает скрытую форму. Строка 3 - это часть, говорящая браузеру: «Стоп! Не переходи по этой ссылке! Вам следует использовать инструкцию return false; в качестве последней строки функции, поскольку как только интерпретатор JavaScript встретит инструкцию возврата, он прекратит выполнение функции.

Можно также использовать jQuеrу-функцию preventDefault() следующим образом:

$("#showForm").click(function(evt) {
$("#loginForm").fadeIn("slow");
evt.preventDefault();
});

Основные детали этого сценария не отличаются от деталей предыдущего. Главное отличие заключается в том, что теперь событие щелчка принимает аргумент evt, представляющий само событие. Событие имеет собственный набор свойств и функций-функция preventDefault() просто останавливает поведение по умолчанию, связанное с событием щелчка, то есть загрузку новой страницы в ответ на щелчок по ссылке.


$("#showForm").click(function(e) {
$("#loginForm").fadeIn("slow");
return false;
});
<!DOCTYPE html>
<html>
<title>Управление поведением ссылок</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link href="../../css/w3.css" rel="stylesheet" type="text/css">
<style>
#loginForm{margin:20px 20px; display:none}
#showForm{margin:0 40px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#showForm").click(function(e) {
$("#loginForm").fadeIn("slow");
return false;
});
});
</script>
<body class="w3-light-grey">
<div class="w3-content w3-layout-container" >
<div class="w3-twothird w3-col s10" style="margin:0 10%">
<div class="w3-container w3-card-2 w3-white w3-margin-bottom" style="height:550px" >
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-anchor fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Управление поведением ссылок</h2>

<a id = "showForm" href="#" target="new">Авторизация</a>
<div id = "loginForm">
<form class=" w3-container" style="width:50%">
<fieldset class="w3-card-4">
<legend class="w3-card-2 w3-large w3-blue-grey" style="padding:0 5px">Авторизация на сайте</legend>
<input type="text" class="w3-input" required="required" placeholder="Ваш логин">
<label class="w3-left w3-label">Логин</label>
<input type="password" class="w3-input" required="required" placeholder="Ваш пароль">
<label class="w3-left w3-label" >Пароль</label><br><br>
<input type="submit" class="w3-btn w3-round-large w3-hover-teal w3-blue-grey">
</fieldset>
</form>
</div>
</div>
<div style=" clear:both"></div>
<footer class="w3-container w3-teal w3-center w3-margin-top " style="height:80px; padding-top:20px;">
<i class="fa fa-facebook-official w3-hover-text-indigo w3-large"></i>
<i class="fa fa-instagram w3-hover-text-purple w3-large"></i>
<i class="fa fa-snapchat w3-hover-text-yellow w3-large"></i>
<i class="fa fa-pinterest-p w3-hover-text-red w3-large"></i>
<i class="fa fa-twitter w3-hover-text-light-blue w3-large"></i>
<i class="fa fa-linkedin w3-hover-text-indigo w3-large"></i>
</footer>
</div>
</body>
</html>