Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) jQuery Как запомнить параметр для пользователя

Как запомнить параметр для пользователя


     18.06.2014    jQuery    1428

вопрос
Здравствуйте, у меня на сайте функционал позволяет добавлять или убирать плавающую панель одной кнопкой, при нажатии на кнопку добавляется только класс в body и навигация ставновиться плавающая.

Как вот такой эффект запомнить для пользователя? Например он выбрал плавающую навигацию, она у него всегда, нажал на off она у него не плавает?

По сути мне нужно сделать только что бы для пользователя запоминался выбор, остальное всё сделано.

Ответил: D0Gmatist


// работа с куками
function setCookie(a, b, c) {
    if (c) {
        var d = new Date();
        d.setTime(d.getTime() + (c * 24 * 60 * 60 * 1000));
        var e = "; expires=" + d.toGMTString()
    } else var e = "";
    document.cookie = a + "=" + b + e + "; path=/"
}
function getCookie(a) {
    var b = a + "=";
    var d = document.cookie.split(';');
    for (var i = 0; i < d.length; i++) {
        var c = d[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(b) == 0) return c.substring(b.length, c.length)
    }
    return null
}
function delCookie(a) {
    setCookie(a, "", -1)
}



// функция
function statysBlock(){

    var xB;
    var a = getCookie("statysBlock");

    if ( a == null ) {

        if ( a == "a" ) {

            setCookie( "statysBlock", "s", 365 );
            $( "body" ).removeClass( "activeBlock" );
            xB = "Показать блок";

        } else if ( a == "s" ) {

            setCookie( "statysBlock", "a", 365 );
            $( "body" ).addClass( "activeBlock" );
            xB = "Скрыть блок";

        }

    } else {

        setCookie( "statysBlock", "a", 365 );
        $( "body" ).addClass( "activeBlock" );
        xB = "Скрыть блок";

    }

    $(".statysBlock").html(xB);

}

// проверка при старте
$(document).ready(function() {

    // запрос к функции
    statysBlock();

});


<div class="statysBlock" onclick="statysBlock()">Скрыть блок</div>

Комментарии пользователей (8)

vitnet
218

2174 | 930

vitnet - 18 июня 2014 17:35 - Эксперт

Cookie Вам в помощь

Artyom91
2

157 | 21

Artyom91 - 18 июня 2014 18:38 - Юзер

vitnet, Мне бы готовый код )

rocksmart
64

307 | 115

rocksmart - 18 июня 2014 19:12 - Юзер

Или sessionStorage

Пример
<style type="text/css">
#notice {position: fixed;bottom: 0; right: 0;margin:9px;font-size:large;padding-top:20px;padding-bottom:12px;padding-left:10px;padding-right:10px;display:none;box-shadow: 0px 0px 10px #000000;  }
#notice .close {background: url(data:image/gif;base64,R0lGODlhDAAYAKUyAMQWO8UXOsEYP8AaMsQYPskXO8UZM8YYO8QZOcQZO8MZPsoXPsAaPsoXP8QZPcIaO8gYPsAaQsMaO78bPcAbO8gZOsUaOsQaP8AcN8sYP70dN8UaPsUbNcgZQsQbOs4YPsYaQskbMsMcOsIcQsQcP8cbQcUcPcwaPsobOsUdN8ccPscdOsAfPsUeOsscPcIfPMQfQd7e3v///////////////////////////////////////////////////////yH5BAEKAD8ALAAAAAAMABgAAAZ0wFjsRywShUjjUfhLFp1NZnRoREKrV6xUad0uqdBrMjv1YgsaZbFgaqAM6oFK8HtJEsaMiFMElQBEDiQwShQWDyMsAWo/JyEeHow/ChgQeGoKLQcdKQxKCwgbRCYEC0UTFy5GLhcTPyYVH2ofFSYRK5IrEUEAOw==) 0 0 no-repeat;cursor: pointer;height: 12px;position: absolute;right:5px;top:2px;width:12px;z-index: 1001;border: none;border-radius: 0;margin:2px}
#notice .close:hover {background-position: 0 -12px;border-bottom: none;}
</style>
<div id="notice">
<div style="position:relative; display: inline-block; border: 1px solid #DFDFDF; border-radius: 3px 3px 3px 3px; font-family:Tahoma;">
<div style="max-width:334px;"><span style="color:#656565; display:block; min-width:80px; font-family:Tahoma,Arial; font-size:14px; height:34px; overflow:hidden; padding:5px; padding-bottom:0; text-align:center;">Загрузка картинок в дополнительные поля DLE 10</span></div>
<div><span style="color:#D90000; display:block; font-size:18px; margin-top:9px; padding-right:10px; padding-left:10px; line-height:15px; text-align:center;">6</span><span style="clear:both; color:#d90000; display:block; font-size:10px; line-height:1em; padding-bottom:7px; padding-right:10px; padding-top:4px; padding-left:10px; text-align:center;">USD</span></div>
<div><a href="http://pro-script.ru/index.php?name=news&op=view&id=508" target="_BLANK" style="text-decoration:none; position:relative; left:50%; margin-left:-40px; display:inline-block; margin-bottom:10px; margin-top:4px; background-color:#0D73A8; text-decoration:none; background:none repeat scroll 0 0 #0B6678; border:0 none; border-radius:3px 3px 3px 3px; color:#FFFFFF; cursor:pointer; font-family:Tahoma,Arial; font-size:14px; padding:5px 17px; transition:all 0.4s ease 0s;">Купить</a></div>
</div>


<i class="close" id="noshownotice"></i>
</div>

<script type="text/javascript" language="javascript" >
$(document).ready(function() {
if(!sessionStorage.getItem('noticeshow'))$('#notice').show();
$("#noshownotice").click(function() {
$('#notice').hide();
sessionStorage.setItem('noticeshow','no');
});
});
</script>

vitnet
218

2174 | 930

vitnet - 18 июня 2014 19:40 - Эксперт

sessionStorage не такой уж и хороший метод

rocksmart
64

307 | 115

rocksmart - 18 июня 2014 20:24 - Юзер

почему?

Artyom91
2

157 | 21

Artyom91 - 19 июня 2014 04:20 - Юзер

Не получилось. Вот мой код кнопок:

<a href="#" class="mc-button" data-option="on">ON</a>
                 <a href="#" class="mc-button active" data-option="off" onclick="statysBlock()">OFF</a>


Это класс который добавляется в body что бы навигация стала плавающей

<body class="sticky_navigation_on">


Так не получилось

        <script type="text/javascript">
// работа с куками
function setCookie(a, b, c) {
    if (c) {
        var d = new Date();
        d.setTime(d.getTime() + (c * 24 * 60 * 60 * 1000));
        var e = "; expires=" + d.toGMTString()
    } else var e = "";
    document.cookie = a + "=" + b + e + "; path=/"
}
function getCookie(a) {
    var b = a + "=";
    var d = document.cookie.split(';');
    for (var i = 0; i < d.length; i++) {
        var c = d[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(b) == 0) return c.substring(b.length, c.length)
    }
    return null
}
function delCookie(a) {
    setCookie(a, "", -1)
}



// функция
function statysBlock(){

    var xB;
    var a = getCookie("statysBlock");

    if ( a == null ) {

        if ( a == "a" ) {

            setCookie( "statysBlock", "s", 365 );
            $( "body" ).removeClass( "sticky_navigation_on" );
            xB = "Показать блок";

        } else if ( a == "s" ) {

            setCookie( "statysBlock", "a", 365 );
            $( "body" ).addClass( "sticky_navigation_on" );
            xB = "Скрыть блок";

        }

    } else {

        setCookie( "statysBlock", "a", 365 );
        $( "body" ).addClass( "sticky_navigation_on" );
        xB = "Скрыть блок";

    }

    $(".statysBlock").html(xB);

}

// проверка при старте
$(document).ready(function() {

    // запрос к функции
    statysBlock();

});
</script>          

D0Gmatist
225

794 | 281

D0Gmatist - 19 июня 2014 09:27 - Местный

Переписал код
это в любой JS
// работа с куками
// *** запись
function setCookie(a, b, c) {
    if (c) {
        var d = new Date();
        d.setTime(d.getTime() + (c * 24 * 60 * 60 * 1000));
        var e = "; expires=" + d.toGMTString()
    } else var e = "";
    document.cookie = a + "=" + b + e + "; path=/"
}
// *** чтение
function getCookie(a) {
    var b = a + "=";
    var d = document.cookie.split(';');
    for (var i = 0; i < d.length; i++) {
        var c = d[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(b) == 0) return c.substring(b.length, c.length)
    }
    return null
}
// *** удаление
function delCookie(a) {
    setCookie(a, "", -1)
}

// функция
function stb(x) {

    var xB;
    aB = getCookie("statysBlock");

    if (x == "1") {
        
        if (aB == "noactive") {

            setCookie("statysBlock", "noactive", 365);
            $("#body").removeClass("activeBlock");
            xB = "Показать блок";

        } else {

            setCookie("statysBlock", "active", 365);
            $("#body").addClass("activeBlock");
            xB = "Скрыть блок";

        }
      
    } else {

        if (aB == "active") {

            setCookie("statysBlock", "noactive", 365);
            $("#body").removeClass("activeBlock");
            xB = "Показать блок";

        } else if (aB == "noactive") {

            setCookie("statysBlock", "active", 365);
            $("#body").addClass("activeBlock");
            xB = "Скрыть блок";

        }

    }


    $(".statysBlock").html(xB);

};


Это в HTML
    <div class="statysBlock" onclick="stb();">Скрыть блок</div>
    <script type="text/javascript">
        $(document).ready(function() {
            stb(1);
        });
    </script>


В body дописать class
<body class="activeBlock">******</body>

Каждый программист знает - в правильном софте все должно быть прекрасно:
и пользовательский интерфейс, и программные решения, и гениальные ошибки!
Болтовня ничего не стоит. Покажите мне код.

Artyom91
2

157 | 21

Artyom91 - 22 июня 2014 05:49 - Юзер

Не получилось что-то.

У меня за плавающее меню отвечает класс

sticky_navigation_on


Мне в вашем коде нужно заменить

activeBlock


на

sticky_navigation_on


А кнопку как тогда оформить? Вот кнопка которую вы дали в HTML это ведь просто для примера работы функции? Она не нужна? Для работы функции мне нужно взять только событие онклик?

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы