Com jQuery Cookies:Dicas da INTERFACE do usuário/notas - ocultá-los depois que o usuário continuação

Question

O ponto de partida:

Eu tenho um complicado web app de interface (ou não deveria ser assim, mas isso é outro assunto).Para ser compreendido pelo usuário, eu tenho construído em dicas.Por Exemplo:Uma seta mostra a direção para deslize o ecrã para mostrar o menu.

O problema:

Cada vez que um usuário recarregue a página ou vá para outro (sub-)página, as dicas aparecem novamente.Absurdo e irritante para o usuário.

A solução:

Show as dicas somente quando necessário.Quando o usuário dispara um evento a dica para este evento desaparece.Se o usuário recarrega ou visite a página alguns dias depois, ele já entende como funciona e ele não precisa ver as dicas.

A implementação:

jQuery Cookies.Algo como:

se o evento é disparado -> definir cookies.Cookie diz -> não mostrar a dica (por exemplo, com .css("display", "none") seria o suficiente)

Onde eu preciso de sua ajuda:

Eu não encontrar um bom tutorial ou a documentação do jQuery cookies.Im um jQuery para iniciantes.Fácil funções não são problema.Mas este é um pouco grande ainda.

Obrigado por qualquer ajuda ou links úteis!

Answer 1

JSFIDDLE: http://jsfiddle.net/wrxsti85/9nUBF/

Esse é um velho cookie instalação eu costumava usar.Ele não requer outras bibliotecas para sua pequena e leve.

A primeira vez que você carregar a mexer, você vai ver a dica.Clique novamente em executar, e ele não vai estar lá.

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function checkCookie() {
    var status = getCookie("showToolTip");
    if (status != null && status == 1) {
        $('.TT').hide();
    } else {
        setCookie("showToolTip", "1", 365);
    }
}

$(function() {
    checkCookie();
});

Espero que isso ajude!Deixe-me saber se você tem perguntas.