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

переключение короткой новости


     15.02.2014    jQuery    1548

вопрос
На сайте переключение короткой новости переключается вот такими кнопками
<a href="javascript:void(0);" id="list" data-template="list" class="btn btn-default btn-sm">List</a>
<a href="javascript:void(0);" id="grid" data-template="default" class="btn btn-default btn-sm active">Grid</a>


Как сохранить переключение в куки, jquery.cookie.js подключил, а дальше, что делать мозгов не хватает?
Как пример, что я имею ввиду можно посмотреть у SANDERA сайт.

Но в моем шаблоне новость не дублируется, в отличии от примера

Шаблон краткой новости
                    <div class="item col-sm-4">
                        <div class="product">
                            <div class="product-group">
                                <div class="product-thumbnail">
                                       <img alt="" src="[xfvalue_img]">
                                </div>
                                <div class="product-meta">
                                    <h3 class="product-title">{title}</h3>
                                    <h4 class="product-price">$130</h4>
                                    <div class="rating">
                                        <span class="rating-star"></span>
                                        <span class="rating-star"></span>
                                        <span class="rating-star"></span>
                                        <span class="rating-star"></span>
                                        <span class="rating-star"></span>                                    
                                    </div>
                                    <div class="product-description">
                                        <p>{short-story}</p>
                                    </div>
                                </div>
                                <div class="product-actions">
                                    <a class="btn btn-sm btn-default">Подробнее</a>
                                    <ul class="clearfix">
                                        <li><a href="#">Details<span class="fa fa-search"></span></a></li>
                                        <li><a href="#">Wishlist<span class="fa fa-heart-o"></span></a></li>
                                        <li><a href="#">Compare<span class="fa fa-exchange"></span></a></li>
                                        <li><a href="#">Share<span class="fa fa-share"></span></a></li>
                                    </ul>
                                </div>
                                <div class="ribbon-wrapper"><div class="ribbon">{category}</div></div>
                            </div>
                        </div>
                    </div>

Ответил: Sander


Например так:
<div class="some-triggers">
<a href="#" id="list" data-template="list" class="btn btn-default btn-sm">List</a>
<a href="#" id="grid" data-template="default" class="btn btn-default btn-sm active">Grid</a>
</div>

<script>
function change_tpl(tpl){
//подгружаем шаблон tpl
...
//и запомнинаем печеньки
$.cookie('short_template', tpl,{path:'/'});
}
$(document).on('click',".some-triggers a",function(){
change_tpl($(this).attr('id'));
//или
// change_tpl($(this).data('template'));
return false;
})
//Ну и сами печеньки
$(function(){
  if($.cookie('short_template')) change_tpl($.cookie('short_template'));
})
</script>

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

vlad23
113 | 20

vlad23 - 15 февраля 2014 04:19 - Юзер

Sander был на сайте, почитал комментарии про seo и очень много лишнего кода и тп. А не легче в этом случае, подгружать второй и третий вариант шаблона аяксом?

vlad23
113 | 20

vlad23 - 15 февраля 2014 04:23 - Юзер

stopani странный вопрос, перечитывал его несколько десятков раз по слогам, соблюдая препинания, интонацию, но так и не понял.. Может поздно слишком, мозг просто не работает...

stopani
2

114 | 21

stopani - 15 февраля 2014 10:46 - Юзер

Цитата: vlad23
странный вопрос

Другими словами само переключение я сделал!
А вот запоминание в куках нет. т.е. при обновлении страницы или при переходе на другую, должен запоминаться тот шаблон который выбран ( вернее не шаблон а стиль что ли короткой новости ), а шаблон у меня один, он только отображается по разному, так, что с seo все нормально.
пример

Так вот сам вопрос.
Как сохранить переключение в куки?

vlad23
113 | 20

vlad23 - 17 февраля 2014 01:15 - Юзер

В примере очень даже реально получилось

stopani
2

114 | 21

stopani - 15 февраля 2014 18:21 - Юзер

При нажатии на кнопку list добавляется класс list-group-item к первой строке короткой новости, и выглядит так
<div class="item col-sm-4 list-group-item">

а при нажатии на Grid опять убирается.
Помогите запоминание положения сделать?

stopani
2

114 | 21

stopani - 16 февраля 2014 12:38 - Юзер

Что то у меня не получается?

Кнопки обернул в div

И скрипт поставил
<script>
function change_tpl(tpl){
//подгружаем шаблон tpl
...
//и запомнинаем печеньки
$.cookie('shortstory', tpl,{path:'/'});
}
$(document).on('click',".some-triggers a",function(){
change_tpl($(this).attr('id'));
//или
// change_tpl($(this).data('template'));
return false;
})
//Ну и сами печеньки
$(function(){
  if($.cookie('shortstory')) change_tpl($.cookie('shortstory'));
})
</script>


Менял 9-ю строку и ничего

stopani
2

114 | 21

stopani - 17 февраля 2014 01:20 - Юзер

Цитата: vlad23
В примере очень даже реально получилось


Не понял, что реально?
Не сохраняется выбор после перезагрузки страницы!

stopani
2

114 | 21

stopani - 18 февраля 2014 15:34 - Юзер

Помогитеееее!!! Пожалуйтаааа!!!

stopani
2

114 | 21

stopani - 24 февраля 2014 11:16 - Юзер

Ну не ужели ни кто не поможет?

Две кнопки
<div class="some-triggers">
    <a href="javascript:void(0);" id="list" class="btn btn-default btn-sm">&nbsp;List</a>
    <a href="javascript:void(0);" id="grid" class="btn btn-default btn-sm active">&nbsp;Grid</a>
</div>


JS
gfx('#list').click(function(){gfx('#products .item').addClass('list-group-item');});
gfx('#grid').click(function(){gfx('#products .item').removeClass('list-group-item');});


Короткая новость
                    <div class="item col-sm-4">
                        <div class="product">
                            <div class="product-group">
                                <div class="product-thumbnail">            
            <img class="thumbnail" src="/res.php?src=[xfvalue_img]&amp;h=150&amp;w=240&amp;zc=1">                                
                                </div>
                                    <div class="product-description">
                                        <p>{short-story}</p>
                                    </div>
                </div>
                    </div>
        </div>


По умолчанию включена кнопка GRID. При включении кнопки LIST как-то добавляется класс list-group-item к первой строке короткой новости и выглядит так.
<div class="item col-sm-4 list-group-item">


Как сохранить в куки переключение?

stopani
2

114 | 21

stopani - 2 марта 2014 17:10 - Юзер

Вот так все работает
    $("#products .item").addClass($.cookie("lg-story"));

    $("#list").click(function () {             
        $.cookie("lg-story", "list-group-item");
        $(".item").addClass("list-group-item").addClass($.cookie("lg-story"));
        return false;
    });

        $("#grid").click(function () {  
        $.cookie("lg-story", "12345");
        $(".item").removeClass("list-group-item").addClass($.cookie("lg-story"));
        return false;
    });


Исправьте кто знает, чтобы не присваивался класс 12345, а просто убирался list-group-item на кнопке #grid и добавлялся на кнопке #list

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

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