Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> jQuery

Создаём мини-справочную систему для сайта с помощью jQuery


Всем привет! Сегодня мы с вами отправимся в замечательное путешествие, в ходе которого с помощью jQuery создадим мини-справочную систему. Её мы оформим в небольшой виджет, который сможем встроить на любую страничку вашего сайта.


    Идея

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

    Для того чтобы наш виджет работал, вот что мы сделаем:

  • для ввода текста который нужно найти, создадим элемент input с типом text. Набирать текст, совсем не обязательно, его ещё можно скопировать и вставить. Данный метод будет не поддерживаться в старых браузерах (<IE9), но, вы можете заменить его простым нажатием на клавишу «Enter».
  • чтобы увидеть найденный текст, мы будем оборачивать его в тег <span> со стилем подсветки;
  • плавность перехода к найденным результатам, обеспечим с помощью плагина jQuery.scrollTo.

    Разметка

    Нашим первым шагом, будет создание HTML разметки, она имеет очень простую структуру:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Mini Help System with jQuery | Tutorialzine </title>

        <!-- Иные стили CSS -->
        <link rel="stylesheet" href="assets/css/styles.css" />

    </head>
    <body>

        <div id="widget">

            <div id="header">
                <input type="text" id="search" placeholder="Search in the text" />
            </div>

            <div id="content">
                <!—Ваш справочный текст ввести здесь -->
            </div>
        </div>

        <!-- Подключаем файлы JavaScript -->
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="assets/js/highlight.jquery.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>
        <script src="assets/js/script.js"></script>
    </body>
</html>

    Видите? Ничего необычного здесь совсем нет!

  • первым делом подключаем необходимый стиль;
  • после определяем блок в котором и будет находиться наш виджет (id="widget");
  • поле поиска будет находиться здесь (id="header");
  • а руководство здесь (id="content").  Напишите нужный вам текст вместо комментариев <!-- Your help text goes here -->;
  • внизу мы подключим библиотеку jQuery, плагин scrollTo, и два скрипта которые мы обсудим ниже.

    jQuery код

    А сейчас, давайте приступим к созданию jQuery плагина, который будет заниматься поиском совпавших слов, заключать их в тег <span> и выделять с помощью стилевого класса match. Этому классу мы зададим оранжевый цвет, чтобы легко различить на фоне. Всё вместе это будет выглядеть вот так: <span class="match">Поисковое слово</span>.

    Наш плагин будет принимать два аргумента: первый – поисковое слово или строка, второй – функция обратного вызова (callback), которая будет выполнена при завершении операций поиска/замены в процессе работы нашего плагина.  Как вы увидите позже, для второго аргумента мы будем применять плагин scrollTo, который будет осуществлять плавный переход по найденным результатам в блоке #content.

    Прежде чем начнём знакомство с плагином, имейте в виду, что вы не можете просто найти элемент div, и вызывать replace(), для замены найденного фрагмента, элементом span, так как это может повлечь за собой нарушение разметки. Если кто-то введёт для поиска “div”, то все элементы <div> будут заменены на <<span class="match">div</span>>, что приведёт к проблемам.

    Но и эта проблема не является сложной. Существует достаточно простое решение. Мы просто будем использовать метод jQuery contents() для рекурсивного получения всех вложенных тегов, и использовать функцию replace() только для текста, тем самым гарантируя, что с собой мы не захватим ни один элемент HTML.

assets/js/highlight.jquery.js

(function($) {

    var termPattern;

    $.fn.highlight = function(term, callback) {

        return this.each(function() {

            var elem = $(this);

            if (!elem.data('highlight-original')) {
                
                // Сохраняем оригинал контента
                elem.data('highlight-original', elem.html());
                
            } else {
                
                // Восстанавливаем оригинал контента
                elem.highlightRestore();
                
            }

            termPattern = new RegExp('(' + term + ')', 'ig');

            // Ищем в тексте
            walk(elem);

            // Задаём действие для функции обратного вызова
            callback && callback(elem.find('.match'));

        });
    };

    $.fn.highlightRestore = function() {
        
        return this.each(function() {
            var elem = $(this);
            elem.html(elem.data('highlight-original'));
        });
        
    };

    function walk(elem) {

        elem.contents().each(function() {

            if (this.nodeType == 3) { // Текстовый узел

                if (termPattern.test(this.nodeValue)) {
                    $(this).replaceWith(this.nodeValue.replace(termPattern, '<span class="match">$1</span>'));
                }
            } else {
                walk($(this));
            }
        });
    }

})(jQuery);

    И вуаля, теперь мы можем подсвечивать только текст! Не волнуйтесь, если вы не совсем поняли некоторые тонкости работы плагина, он очень прост, и вы можете без сомнений использовать его на вашем сайте, вставив лишь разметку, пару файлов скриптов и стили.

    Когда уже всё? Терпение уважаемые друзья, нам остался последний шаг:

$(function() {

    var search = $('#search'),
        content = $('#content'),
        matches = $(), index = 0;

    // Обрабатываем событие ввода текста для input с типом text
    search.on('input', function(e) {

        // Начинаем поиск, если введено 2 и более знака
        if (search.val().length >= 2) {
            
            // Используем плагин подсветки текста
            content.highlight(search.val(), function(found) {

                matches = found;

                if(matches.length && content.is(':not(:animated)')){
                    scroll(0);
                }
                
            });
        } else {
            content.highlightRestore();
        }

    });
    
    search.on('keypress', function(e) {
        
        if(e.keyCode == 13){ // Код клавиши Enter
            scrollNext();
        }
        
    });

    function scroll(i){
        index = i;
        
        // Событие scrollTo плагина.
        // по Y оси (только вертикальное движение)
        content.scrollTo(matches.eq(i), 800, { axis:'y' } );
    }
    
    function scrollNext(){
        matches.length && scroll( (index + 1) % matches.length );
    }
});

    Если в строке поиска пусто, я использую функцию прокрутки scroll(0), в случае если вы находитесь в середине или конце документа, то плавной анимацией будете подняты в самый верх, а при вводе текста, прибудете на место совпадения так же плавно. Есть ещё одна функция перемещения которую я использую, она вызывается когда мы нажимаем на клавишу «Enter», это приводит к тому, что мы будем перемещаться от одного совпадения к другому, пока они не закончатся.

    Поздравляю друзья, мы завершили все шаги, и наша мини-справочная система готова!

    P.S. Данный пример вы можете использовать как совместно с вашей системой помощи, так и отдельно, в виде короткого FAQ. Опыт данного урока, может послужить вам ещё раз, например, если вы хотите создать функцию поиска для мобильного приложения, или улучшить уже существующий на своей страничке

    Всего хорошего друзья!

    Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Дата публикации: 01.02.2013
Опубликовал: Сергей Кашурин
Просмотров: 451
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


23 jQuery плагина для организации слайд-шоу и галерей на сайте
Дорогие Друзья! Сегодня, я хочу познакомить вас с подборкой замечательных jQuery плагинов для создания слайд-шоу и галерей. Все они являются бесплатными и очень просты в установке и настройке.
25 поразительных анимаций CSS3, которые улучшат внешний вид вашего сайта
CSS3, сокращение от английского Cascading Style Sheets 3, третье поколение таблиц стилей, которые используются для визуального представления сайта, при минимальном размере кода. Этот последний многообещающий набор стандартов, состоит из большого числа функций и инструментов, которые позволяют улучшить и контролировать дизайн и увеличивать скорость загрузки сайта.
5 прекраснейших дизайнерских решений для ваших форм входа
Уважаемые друзья, в этом уроке, собраны 5 красивейших форм регистрации/авторизации, с пошаговым объяснением, и с возможность бесплатно скачать. Вы всё ещё думаете читать или нет? А кто-то уже вовсю пользуется ими!

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: