使用jQuery Cookies:UI提示/注释-在用户继续操作后隐藏它们



起点

我有一个棘手的网络应用程序界面(不应该是这样,但这是另一个话题)。为了让用户理解,我内置了提示。例如:箭头显示在屏幕上滑动以显示菜单的方向。

问题

每次用户重新加载页面或转到另一个(子)页面时,提示都会再次出现。胡说八道——而且让用户感到讨厌。

解决方案

仅在需要时显示提示。当用户触发一个事件时,该事件的提示将消失。如果用户几天后重新加载或访问该页面,他已经了解了它的工作原理,不需要看到提示。

实现

jQuery Cookies。类似于:

如果事件被触发->设置cookie。Cookie说->不显示提示(例如用.css("display","none")就足够了)

我需要你帮助的地方

我找不到关于jQuery cookie的好教程或文档。我是jQuery的初学者。简单的功能没有问题。但这有点太大了。

感谢您的任何帮助或有用的链接!

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

这是我以前使用的一个基本的旧cookie设置。它不需要其他库,因此体积小,重量轻。

第一次加载小提琴时,您将看到工具提示。再次单击"运行",它将不在那里。

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();
});

希望这能有所帮助!如果你有问题,请告诉我。

相关内容

最新更新