В этом уроке, кроме создания данного решения, мы также рассмотрим:
1. Синтаксис создания новых элементов в jQuery 1.4
2. Создание маленького плагина для предотвращения повторения кода
3. Рассмотрим объектно-ориентированное CSS
Цель
У нас есть ячейка с контентом. Цель - при наведении на ее мышкой, ячейка затемняется и над ней появляется ссылка в самом центре. С точки зрения юзабильности, возможно, это не очень хорошо, так как текст под ссылкой трудночитаем. Однако, в некоторых случаях этому можно найти применение.
HTML
Простой div с текстом
<div class="widget widget-one rounded">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
CSS
Я называя нашими маленькие ячейки виджетами.
.widget {
width: 300px;
padding: 20px;
border: 1px solid #999;
margin: 0 20px 20px 0;
float: left;
position: relative;
}
Но обратите внимание, что в демо и на картинке выше у нас закругленные углы. Мы все знаем, что такие углы необходимо делать с помощью свойства border-radius с приставками для разных браузеров. Почему же мы не добавили это свойство в коде выше. Именно тут вступает в силу объектно-ориентированное CSS.
Объектно-ориентированное CSS использует названия классов для описания характеристик дизайна нужного объекта. Посмотрите в HTML коде выше. Нашему div мы придали кроме класса .widget еще и .rounded.
.rounded {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
Этот подход может сэкономить Вам много времени и кода. На Вашей страницы может быть десятки элементов с закругленными углами, и Вам достаточно только дописать класс этого свойства.
Javascript будет накладывать новый div на наши виджеты. Этот div будет затемнять все содержимое. Назовем его "overlay"
.overlay {
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: url(../images/black75.png);
background: rgba(0,0,0,0.6);
text-align: center;
}
Для затемнения используем цвета RGBa для современных и браузеров, а для IE7 используем прозрачную картинку.
jQuery JavaScript
Итак, повторим! При наведении мышки на виджет мы хотим, чтобы он затемнился и по центру появилась ссылка. В демо у нас 4 виджета. У них разные размеры, поэтому нам необходимо, чтобы скрипт под них подстраивался. Кроме этого, у каждого виджета свой текст в ссылке и УРЛ. То есть получается, что большая часть нашего скрипта будет одинаковой, но для каждого отдельного виджета будет уникальная часть. Давайте сделаем небольшой плагин, который будет содержать все ссылки и тексты.
Обратите внимание, что каждому виджету мы присвоили уникальные имена классов. Таким образом мы сможем обращаться индивидуально к каждому классу с помощью JavaScript.
$(function() {
$(".widget-one").middleBoxButton("Read More", "#read");
$(".widget-two").middleBoxButton("Go to the Store", "#store");
$(".widget-three").middleBoxButton("Continue", "#more");
$(".widget-four").middleBoxButton("Behold!", "#bazinga");
});
Конечно же, “middleBoxButton” не функция. Она представлена ниже:
var $el, $tempDiv, $tempButton, divHeight = 0;
$.fn.middleBoxButton = function(text, url) {
return this.hover(function(e) {
$el = $(this).css("border-color", "white");
divHeight = $el.height() + parseInt($el.css("padding-top")) + parseInt($el.css("padding-bottom"));
$tempDiv = $("<div />", {
"class": "overlay rounded"
});
$tempButton = $("<a />", {
"href": url,
"text": text,
"class": "widget-button rounded",
"css": {
top: (divHeight / 2) - 7 + "px"
}
}).appendTo($tempDiv);
$tempDiv.appendTo($el);
}, function(e) {
$el = $(this).css("border-color", "#999");
$(".overlay").fadeOut("fast", function() {
$(this).remove();
})
});
}
При наведении мышки на виджет создается абсолютно новый div. У этого div класс "overlay" и "rounded".
Далее мы создаем текст ссылки. После этого мы накладываем наш текст с ссылкой на div. И в конце оба эти div мы накладываем на виджет Создание новых элементов происходит очень классно с использованием нового jQuery 1.4 синтаксиса для создания элементов. Вот эта часть:
$("<a />", {
"href": url,
"text": text,
"class": "widget-button rounded",
"css": {
"top": (divHeight / 2) - 7 + "px"
}
});
Вот теперь у нас все готово. Единственное о чем хотелось бы еще поговорить - это о центрировании нашего текста. По горизонтали это сделать очень легко. У нас есть text-align: center. По вертикали центрировать немного сложнее. Есть способы сделать с помощью CSS, но они не всегда легкие. Поскольку мы используем JavaScript - давайте используем это. Мы замеряем высоту нашего виджета, поделим пополам и сместим нашу ссылку вниз на это значение. Единственной вопрос зачем нам тогда "-7" в нашем коде выше. Обычно, Вам следует избегать использования встроенных значений в код. Но в нашем случае без этого четкого центрирования не получится. 7 - это половина высоту кнопки, и нам необходимо отнять это значения для идеального центрирования. То есть если, Вы будете менять размер кнопки - не забывайте менять это значение.
Теперь точно все! Пользуйтесь!! И всех с прошедшими праздниками!