Mini systém nápovědy s jQuery

V tomto tutoriálu vytvoříme mini systém nápovědy s jQuery. Bude to malý widget, který zobrazí nápovědu nebo průvodce uživatelům vaší webové aplikace. Obsah widgetu bude možné prohledávat v reálném čase a všechny odpovídající výrazy budou zvýrazněny.

Nápad

Aby tento příklad fungoval, musíme udělat toto:

  • Musíme naslouchat vstupu událost v textovém poli. Dávám přednost tomu před stisknutím klávesy, protože vstup zachycuje události jako vyjmout/vložit a vrátit zpět/znovu. Není však podporován ve starších prohlížečích (stisknutím klávesy pokud chcete, aby tam tento příklad fungoval;
  • Napíšeme plugin jQuery s příhodným názvem „highlight“, který nahradí odpovídající text řetězcem <span> prvky;
  • K hladkému posouvání <span> použijeme plugin jQuery.scrollTo prvky v zobrazení.
Začněme s označením.

HTML

Prvním krokem je položit HTML stránky, na které budeme pracovat:

index.html

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

        <!-- Our stylesheet -->
        <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">
                <!-- Your help text goes here -->
            </div>
        </div>​​

        <!-- JavaScript Includes -->
        <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>

Není zde nic neobvyklého - do hlavy jsme zahrnuli šablonu stylů (možná se na to budete chtít podívat sami, v tomto tutoriálu ji nebudu představovat), jQuery a plugin scrollTo dole spolu s další dva soubory js, o kterých budeme diskutovat příště. Widget má textové pole (uvnitř #header div) a #obsah držák. Do ní byste měli umístit nápovědu pro vaši aplikaci.

Kód jQuery

Nyní napíšeme plugin jQuery, který vyhledává konkrétní slova v #obsahu element a nahradí výskyty elementy span. Například hledání javascript v textu javascript is awesome by dalo <span class="match">javascript</span> is awesome . Později upravíme styl .match překrývá s oranžovým pozadím, takže je lze snadno rozlišit.

Plugin bude mít dva argumenty – hledaný výraz (jako řetězec) a volitelnou funkci zpětného volání, která bude provedena po dokončení procesu hledání/nahrazení. Jak uvidíte později, použijeme zpětné volání k zavěšení pluginu scrollTo a posunem #content div odhalíme shody.

Než začnete číst tento kód, mějte na paměti, že nemůžete jednoduše načíst vnitřní html prvku div a zavolat na něj funkci replace(), abyste nahradili výskyty hledání prvky span, protože tímto způsobem narušíte své označení. Pokud někdo zadal „div " jako hledaný výraz by to způsobilo všechny vaše <div> prvky, které mají být nahrazeny <<span class="match">div</span>> , čarodějnice si jen koleduje o potíže.

Řešení je o něco složitější (ale není obtížné, jakmile získáte nápad) - použijeme metodu jQuery content() k načtení všech potomků prvku a nahradíme() text pouze na textových uzlech (jsou zaručeny neobsahovat žádné html). Poté rekurzivně projdeme všechny netextové podřízené prvky prvku a zopakujeme kroky.

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')) {

                // Save the original element content
                elem.data('highlight-original', elem.html());

            } else {

                // restore the original content
                elem.highlightRestore();

            }

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

            // Search the element's contents
            walk(elem);

            // Trigger the callback
            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) { // text node

                if (termPattern.test(this.nodeValue)) {
                    // wrap the match in a span:
                    $(this).replaceWith(this.nodeValue.replace(termPattern, '<span class="match">$1</span>'));
                }
            } else {
                // recursively call the function on this element
                walk($(this));
            }
        });
    }

})(jQuery);

A voila, náš text je plný krásných zvýraznění! Nedělejte si starosti, pokud úplně nerozumíte tomu, jak to funguje – je zabalen jako snadno použitelný plugin jQuery, takže jej můžete bez dlouhého přemýšlení vložit do svého projektu.

Zde je návod, jak plugin používat:

assets/js/script.js

$(function() {

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

    // Listen for the text input event
    search.on('input', function(e) {

        // Only search for strings 2 characters or more
        if (search.val().length >= 2) {

            // Use the highlight plugin
            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){ // The enter key
            scrollNext();
        }

    });

    function scroll(i){
        index = i;

        // Trigger the scrollTo plugin. Limit it
        // to the y axis (vertical scroll only)
        content.scrollTo(matches.eq(i), 800, { axis:'y' } );
    }

    function scrollNext(){
        matches.length && scroll( (index + 1) % matches.length );
    }
});

Při zpětném volání spouštím scroll(0) funkce. Tím se animuje #obsah div tak to ukazuje první zápas série. Pro posouvání existuje další funkce – scrollNext, která se zavolá, když při psaní stisknete klávesu Return. To způsobí, že držitel odhalí další shodu.

Tímto je náš mini systém nápovědy kompletní!

Závěr

Tento příklad můžete použít k vylepšení stránek nápovědy. Zásuvný modul, který jsme zde vytvořili, můžete také dobře využít a vytvořit lepší vyhledávací funkce, vylepšit svou mobilní aplikaci a mnoho dalšího. Rád bych slyšel vaše nápady v komentářích!