Перейти к содержимому


Фотография
- - - - -

Не спалось. Запилил вот такую штуковину


Сообщений в теме: 18

#1 isay777

isay777

Отправлено 31 March 2015 - 00:34

К сожалению ночью не смотря на литр кофе, вывод в несколько столбцов не смог сделать. Запутался в стилях и выводе количества колонок через php

 

h0ndrbx9zu9h.gif  

 

 

Если кто захочет поэкспериментировать то вот 

http://tympanus.net/...ew-mode-switch/

 

http://tympanus.net/...ViewModeSwitch/

 

 

Вы представляете как хочется такое видеть в каком-нибудь обновлении новой корзины )))


Сообщение отредактировал isay777: 31 March 2015 - 00:48

  • 2
ХОСТИНГ для сайтов jbzoo (все попугаи)

#2 Na_uM

Na_uM

Отправлено 31 March 2015 - 05:18

бесполезный пример по ссылке, обновил и прощая выбранный стиль

на самом деле дел на 10 минут)


  • -4

#3 CB9TOIIIA

CB9TOIIIA

Отправлено 31 March 2015 - 06:49

бесполезный пример по ссылке, обновил и прощая выбранный стиль

на самом деле дел на 10 минут)

 

сделайте и опубликуйте в маркете. Мы вам спасибо скажем! :)


  • 0

#4 SmetDenis

SmetDenis

Отправлено 31 March 2015 - 10:27

Убрал все сообщения, которые слабо относились к топику.

Давайте по теме. Похоже весеннее обострение началось...
  • 2
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.


#5 isay777

isay777

Отправлено 31 March 2015 - 10:34


Давайте по теме. 

 

Денис а на какой основе сделана смена отображения в сравнении?


  • 0
ХОСТИНГ для сайтов jbzoo (все попугаи)

#6 i001

i001

Отправлено 31 March 2015 - 10:47

вся магия тут

jbuniversal ▸ templates ▸ catalog ▸ renderer ▸ compare ▸ _default.php

if ($view->layoutType == 'v') { ... }
else if ($view->layoutType == 'h') { ... }

  • 1

#7 i001

i001

Отправлено 31 March 2015 - 10:54

как вариант, на js+css ну и сам переключатель.
JS по клику на будет присваивать блокам доп классы, а дальше уже css
 


  • 1

#8 mr.varhola

mr.varhola

Отправлено 31 March 2015 - 20:16

*
Популярное сообщение!

У себя сделал так: http://joxi.ru/KAgWy0YUk6oNAl

http://childrens.web...baby-buggy.html

всю магию делает jQuery

1) В файле media\zoo\applications\jbuniversal\templates\catalog\category.php в удобном месте добавил кнопки для переключения вида отображения

    <div class="sort2">
        <h3 class="sp-title">Просмотр:</h3>
        <div class="display"><a onclick="display('list');">Список</a> <b>/</b> Сетка</div>
    </div>

2) В этом же файле находим строчку

echo $this->app->jblayout->render('items', $this->items);

и оборачиваем её в див, чтобы получилось так:

        echo "<div class=\"rborder-grid\">";
            echo $this->app->jblayout->render('items', $this->items);
        echo "</div>";

Сразу после этих трех строчек - закрываем тег php  ?> и со следующей строки пишем магический js :)

<script type="text/javascript"><!--
function display(view) {
    if (view == 'list') {
        jQuery('.rborder-grid').attr('class', 'rborder-list');  

            jQuery('.rborder-list .prod').each(function(index, element) {

                html  = '<div class="prod-block1">';
                    html += '<div class="label lbl">' + jQuery(element).find('.lbl').html() + '</div>';    
                    html += '<div class="images">' + jQuery(element).find('.images').html() + '</div>';    
                html += '</div>';

                html += '<div class="prod-block2">';                    
                    html += '<div class="pb2-block1">';
                        html += '<div class="name">' + jQuery(element).find('.name').html() + '</div>';    
                    html += '</div>';

                    html += '<div class="pb2-block2">';                    
                        html += '<div class="pb2b2-block1">';
                            var properties = jQuery(element).find('.properties').html();      
                            if (properties != null) {
                                html += '<div class="properties">' + properties + '</div>';
                            }
                        html += '</div>';

                        html += '<div class="pb2b2-block2">';
                            html += '<div class="buttons">' + jQuery(element).find('.buttons').html() + '</div>';
                            html += '<div class="compare">' + jQuery(element).find('.compare').html() + '</div>';
                        html += '</div>';
                    html += '</div>';
                html += '</div>';

                jQuery(element).html(html);
            });    
        
        jQuery('.display').html('Список <b>/</b> <a onclick="display(\'grid\');">Cетка</a>');
        
        jQuery.totalStorage('display', 'list'); 
    } else {
        jQuery('.rborder-list').attr('class', 'rborder-grid');

            jQuery('.rborder-grid .prod').each(function(index, element) {

                html = '';
                html += '<div class="lbl">' + jQuery(element).find('.lbl').html() + '</div>';
                html += '<div class="images">' + jQuery(element).find('.images').html() + '</div>';
                html += '<div class="name">' + jQuery(element).find('.name').html() + '</div>';
                var properties = jQuery(element).find('.properties').html();      
                if (properties != null) {
                    html += '<div class="properties">' + properties + '</div>';
                }
                html += '<div class="buttons">' + jQuery(element).find('.buttons').html() + '</div>';
                html += '<div class="compare">' + jQuery(element).find('.compare').html() + '</div>';

                jQuery(element).html(html);
            });   
                               
        jQuery('.display').html('<a onclick="display(\'list\');">Список</a> <b>/</b> Сетка');
        
        jQuery.totalStorage('display', 'grid');
    }
}

view = jQuery.totalStorage('display');

if (view) {
    display(view);
} else {
    display('list');
}
//--></script> 

Данный пример написан конкретно под мой шаблон тизера, вам нужно изменить классы и элементы html на свои.

Вся суть в том, что js берет информацию с шаблона "teaser" и в зависимости от нужного нам вида отображения отдает её.

 

В конце всех этих процедур подключаем файлик https://yadi.sk/d/IPMSPuenff5MKв index.php шаблона, данный файл сохраняет ваш выбор отображения в куках и хранит его при переходах по пагинации или другим страницам категорий.

 

Вроде все :)

 

Потом пишем css отталкиваясь от родителя .rborder-grid или .rborder-list в less это очень удобно)


Сообщение отредактировал mr.varhola: 31 March 2015 - 20:20

  • 8

#9 isay777

isay777

Отправлено 31 March 2015 - 20:37

Супер. Сейчас опробую. 


  • 0
ХОСТИНГ для сайтов jbzoo (все попугаи)

#10 Sliapy

Sliapy

Отправлено 31 March 2015 - 21:19

mr.varhola код до боли напоминает opencart :)


  • 1
[color=#aa0000]Не забывайте нажимать кнопку "Вопрос Решён" под сообщением, которое решило Вашу проблему.[/color]




Click to return to top of page in style!