Интерактивность может превратить скучный статический веб-сайт в динамичный инструмент, который не только радует пользователей, но передает информацию более эффективно.В этом посте we’ будете идти через пять различных методов кодирования, которые могут быть легко реализованы на любой сайт, чтобы предоставлять пользователям расширенные возможности experience.
Методы позволят Вам для лучшего отображения трудно содержание, помочь пользователям найти информацию более эффективно и предоставлять значимые сигналы интерфейса, не перегружая user.
- On-страницы текста search
- перетаскивать элементы управления для негабаритных content
- Тонкие наведении effects
- комментариев Количество bars
- Полная страница slider
1.По-страничный текст Search
Веб-сайты часто имеют окна поиска, чтобы позволить пользователям находить содержимое из своих архивов.Но что, если вы хотите, чтобы найти содержание на данной странице? Информация Architects has было на странице поиска текста, что обеспечивает большой опыт пользователя.Let’ S воссоздать это с помощью jQuery.
Mark-Up и Interaction
Первый let’ Построим поле ввода для поиска:
<input type="text" id="text-search" />
Следующая we’ JQuery понадобится приложить слушателя для отслеживания изменений в поле ввода:
$(function() {
$('#text-search').bind('keyup change', function(ev) {
// pull in the new value
var searchTerm = $(this).val();
)};
});
Здесь мы связаны наши функции как keyup и change события.Это гарантирует, что наша работа срабатывает независимо от того, пользователь вводит или вставляет text.
Сейчас, let’ S обратиться к Highlight, полезный и легкий JQuery плагин, который обрабатывает выделение текста.После включения плагина источника, let’ добавим highlight() вызов нашему JavaScript:
$(function() {
$('#text-search').bind('keyup change', function(ev) {
// pull in the new value
var searchTerm = $(this).val();
// disable highlighting if empty
if ( searchTerm ) {
// highlight the new term
$('body').highlight( searchTerm );
}
});
});
В дополнение к освещению данного текста, we’ нас также добавил проверку, чтобы убедиться поиска isn’. Т пустые (которая вызывает бесконечный цикл)
В этом фрагменте подчеркивается поисковый запрос по всей странице, но мы также можем ограничить область применения данного id:
$('#myId').highlight( searchTerm );
Или мы можем искать только в течение определенного элемента:
$('p').highlight( searchTerm );
Это подсветки текста по умолчанию является случае insensitive.Если вы предпочитаете регистра подсветку, снимите .toUpperCase() обеих линий 21 и 41 Highlight плагин in.
Стайлинг выделенный Text
Теперь,наличие прилагается, we’ понадобится, чтобы наш стиль выделенные элементы.Выделите плагин обертывания выделенный условий в <span class="highlight"></span>, что мы можем стиле с CSS.
Во-первых, let’ S изменить цвет фона, а затем добавить скругленные углы и дроп-тени для всех браузеров, кроме IE:
.highlight {
background-color: #fff34d;
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3-4 */
border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
}
Несмотря на то, подсветку теперь видна, он все еще кажется немного жесткой вокруг текста и может использовать некоторые дополнения.Но we’ Придется быть осторожным, чтобы не настроить расположение текста.Эти span с, встроенные элементы, и если мы просто добавить обивка, текст будет перемещаться по странице.Таким образом, let’ S включает обивка с отрицательной маржи, чтобы компенсировать:
.highlight {
padding:1px 4px;
margin:0 -4px;
}
Отделочные Interaction
Последнее, но не менее let’ ы не забудьте удалить выделенный текст, когда пользователь редактирует текст в поле ввода:
$(function() {
$('#text-search').bind('keyup change', function(ev) {
// pull in the new value
var searchTerm = $(this).val();
// remove any old highlighted terms
$('body').removeHighlight();
// disable highlighting if empty
if ( searchTerm ) {
// highlight the new term
$('body').highlight( searchTerm );
}
});
});
Здесь мы добавили вызов, чтобы удалить выделение текста, которая проводится за пределами пустой чек поля.Это гарантирует, что основным моментом также удаляется, если пользователь удаляет field.
Несмотря на removeHighlight() хорошо работает в большинстве браузеров, он будет аварии IE6.Это связано с IE6 bug с node.normalize().
Мы можем получить Highlight плагин работает в IE6, переписав эту функцию.Просто замените линии 45-53 из highlight.js со следующим:
jQuery.fn.removeHighlight = function() {
function newNormalize(node) {
for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) {
var child = children[i];
if (child.nodeType == 1) {
newNormalize(child);
continue;
}
if (child.nodeType != 3) { continue; }
var next = child.nextSibling;
if (next == null || next.nodeType != 3) { continue; }
var combined_text = child.nodeValue + next.nodeValue;
new_node = node.ownerDocument.createTextNode(combined_text);
node.insertBefore(new_node, child);
node.removeChild(child);
node.removeChild(next);
i--;
nodeCount--;
}
}
return this.find("span.highlight").each(function() {
var thisParent = this.parentNode;
thisParent.replaceChild(this.firstChild, this);
newNormalize(thisParent);
}).end();
};
Эта новая функция заменяет стандартный Javascript normalize() с пользовательской функцией, которая работает во всех browsers.
2.Перетащите элементы управления для негабаритных Content
При ограничения макета натыкаются на необходимость больших изображений, найти качественное решение может быть затруднено. Mospromstroy использует творческий метод справиться с этой ситуацией: "перетаскивания" панель управления, которая позволяет пользователям перемещаться по images.
Мы можем сделать что-то подобное использование JQuery пользовательского интерфейса draggable behavior.
Mark-Up и CSS
Прежде всего, давайте настроить некоторые наценку за содержание и управление:
<div id="full-sized-area">
<div id="full-sized-content">
Your content here
</div>
</div>
<div id="drag-controls-area">
<div id="drag-controls"></div>
</div>
Далее, давайте применять некоторые основные CSS:
#full-sized-area {
position: relative;
overflow: hidden;
width: 800px;
height: 400px;
}
#full-sized-content {
position: absolute;
top: 0;
left: 0;
}
#drag-controls-area {
position: relative;
width: 300px;
height: 50px;
}
#drag-controls {
position: absolute;
top: 0;
left: 0;
height: 48px;
border: 1px solid white;
}
Здесь мы применили absolute позиции как на #full-sized-content и #drag-controls, и мы также спрятали любые переполнения от больших изображений.Кроме того, мы применили некоторые произвольные размеры по содержанию и перетаскивать элементы управления обертки, убедитесь, чтобы настроить эти, как needed.
Строительство взаимодействия с jQuery
Теперь, давайте использовать JQuery UI для построения взаимодействия.Начните с в том числе JQuery UI с перетаскивать module.
Перед установкой контроля, давайте размер сопротивленияконтролировать поле справа размеры:
$(function() {
var $fullArea = $('#full-sized-area');
var $fullContent = $('#full-sized-content', $fullArea);
// find what portion of the content is displayed
var contentRatio = $fullArea.width() / $fullContent.width();
// scale the controls box
var $controlsArea = $('#drag-controls-area');
var $controls = $('#drag-controls', $controlsArea);
$controls.css('width', $controlsArea.width() * contentRatio);
});
Вот мы пришли к выводу, что часть содержимого отображается в области содержимого, а затем масштабировать ширина блока управления accordingly.
Далее, давайте прикрепить перетаскивать поведения:
$(function() {
var $fullArea = $('#full-sized-area');
var $fullContent = $('#full-sized-content', $fullArea);
// find what portion of the content is displayed
var contentRatio = $fullArea.width() / $fullContent.width();
// scale the controls box
var $controlsArea = $('#drag-controls-area');
var $controls = $('#drag-controls', $controlsArea);
$controls.css('width', $controlsArea.width() * contentRatio);
// determine the scale difference between the controls and content
var scaleRatio = $controlsArea.width() / $fullContent.width();
// attach the draggable behavior
$controls.draggable({
axis : 'x', // confine dragging to the x-axis
containment : 'parent',
drag : function(ev, ui) {
// move the full sized content
$fullContent.css('left', -1 * ui.position.left / scaleRatio );
}
});
});
Здесь мы приложили перетаскивать события и установлено несколько вариантов.Во-первых, мы положим axis ограничить перетаскивание оси х, а затем положим containment. Ограничиться перетаскиванием на родительский элемент (т. е. контроль обертки)
Наконец, мы создали сопротивление слушателя, чтобы переместить полноразмерный содержание по тому, как далеко пользователь тянется управления.Для этого мы негативно расположены содержание влево на сопротивление сумма умножается на отношение управления к content.
Custom Cursors
Перетаскивать содержимое работает, но у нас еще есть место для improvement.
Прежде всего, давайте добавим несколько стилей к блоку управления, чтобы сделать его более интерактивным.перетаскивать JQuery пользовательского интерфейса придает два класса имен, которые мы можем использовать для этого:. ui-draggable и ui-draggable-dragging
#drag-controls.ui-draggable {
cursor: -moz-grab !important;
cursor: -webkit-grab !important;
cursor: e-resize;
}
#drag-controls.ui-draggable-dragging {
cursor: -moz-grabbing !important;
cursor: -webkit-grabbing !important;
border-color: yellow;
}
В дополнение к применению новый цвет границы активного управления, этот фрагмент также придает ряд Курсор properties, которые используют собственные UI cursors доступны в Firefox и Safari, с резервным для IE.
В связи с осуществлением курсор собственности, мы должны были "загрузки" это вместе, используя !important.Это гарантирует, что собственные курсоры используются, если доступно, позволяя при этом курсор по умолчанию, чтобы перезаписать их в IE.К сожалению, Chrome в настоящее время не поддерживает -webkit-grab, поэтому мы оставим его из этой реализации.Если вы предпочитаете использовать резервные e-resize Курсор как в Chrome и Safari, просто удалите -webkit-grab и -webkit-grabbing properties.
Parallax Effect
Давайте сделаем скользящей анимации более трехмерной, добавив двухслойной параллакса effect.Чтобы сделать это, мы просто добавим фон для нашего полного размера содержанию и анимировать его в более медленном rate.
Добавить наценки первый:
<div id="full-sized-area">
<div id="full-sized-background">
Your background here
</div>
<div id="full-sized-content">
Your content here
</div>
</div>
<div id="drag-controls-area">
<div id="drag-controls"></div>
</div>
А потом несколько основных стилей:
#full-sized-background {
position: absolute;
top: 0;
left: 0;
}
Здесь мы используем абсолютное позиционирование, чтобы зафиксировать фон на месте.Обратите внимание, что мы не должны приложить Z-index, потому что мы поставили перед элементом фона области содержимого в знак-up.
Наконец, давайте добавим фон анимации нашей события перетаскивания:
$fullBackground = $('#full-sized-background');
$controls.draggable({
axis : 'x', // confine dragging to the x-axis
containment : 'parent',
drag : function(ev, ui) {
// move the full sized content
var newContentPosition = -1 * ui.position.left / scaleRatio;
$fullContent.css('left', newContentPosition);
// move the background
$fullBackground.css('left', newContentPosition * .4);
}
});
Здесь мы просто использовали новые позиции, которую мы рассчитан на основное содержание и применять 40%, что изменения в фоновом режиме.Отрегулируйте это значение, чтобы изменить скорость parallax.
3.Тонкие Hover Effects
Во-первых, давайте приложить некоторые CSS с классом subtle для всех элементов:
.subtle {
background-color: #78776C;
color: #BBBBAD;
}
.subtle:hover, .subtle:focus {
background-color: #F6F7ED;
color: #51514A;
}
Здесь мы стили этих элементов с фоном и цветом текста и включить наведении помощью псевдо-class :hover.Кроме того, мы включили в :focus псевдо-класс для активного входа и текстовые области elements.
Это приводит к тому, CSS стилей менять сразу при наведении курсора мыши, но мы можем применить плавный переход использованием CSS3:
.subtle {
-webkit-transition: background-color 500ms ease-in; /* Saf3.2+, Chrome */
-moz-transition: background-color 500ms ease-in; /* FF3.7+ */
-o-transition: background-color 500ms ease-in; /* Opera 10.5+ */
transition: background-color 500ms ease-in; /* futureproofing */
background-color: #78776C;
color: #BBBBAD;
}
.subtle:hover, .subtle:focus {
background-color: #F6F7ED;
color: #51514A;
}
Здесь мы приложили CSS3 transition, которая работает во всех современных браузерах кроме IE.transition Имущество состоит из трех различных значениях.Первое свойство CSS для анимации, а второй является длительность анимации в нашем случае background-color и 500 миллисекунд соответственно.Третье значение позволяет указать смягчение function, например, ease-in или linear.
JQuery Back-Up
Наши тонкие переходы в настоящее время работают в различных браузерах, но давайте включим поддержку для всех пользователей за счет использования JQuery резервного technique.
Сначала нужно, чтобы обнаружить ли браузер пользователя поддерживает transition:
// make sure to execute this on page load
$(function() {
// determine if the browser supports transition
var thisStyle = document.body.style,
supportsTransition = thisStyle.WebkitTransition !== undefined ||
thisStyle.MozTransition !== undefined ||
thisStyle.OTransition !== undefined ||
thisStyle.transition !== undefined;
});
Здесь мы проверяем, является ли тело элемента можно использовать любой из веб-обозревателя специфические свойства перехода, который мы определили above.
Если браузер не поддерживает transition, мы можем применить анимации с использованием jQuery.Тем не менее, JQuery в живой () функция не имеет встроенной поддержки цвет на основе animations.Для удовлетворения наших background-color анимации, нам придется включать небольшой кусок JQuery UI: последствия core.
После числе JQuery UI, нам нужно прикрепить анимацию к hover и focus слушателей события:
// make sure to execute this on page load
$(function() {
// determine if the browser supports transition
var thisStyle = document.body.style,
supportsTransition = thisStyle.WebkitTransition !== undefined ||
thisStyle.MozTransition !== undefined ||
thisStyle.OTransition !== undefined ||
thisStyle.transition !== undefined;// assign jQuery transition if the browser doesn't support
if ( ! supportsTransition ) {
var defaultCSS = {
backgroundColor: '#78776C'
},
hoverCSS = {
backgroundColor: '#F6F7ED'
};// loop through each button
$('.subtle').each(functi ...
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров