• Страница 1 из 1
  • 1
Модератор форума: JonMagon  
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Переключатель вида материалов для uCoz (Помогите настроить в 4 окна)
Переключатель вида материалов для uCoz
Эмель
Сообщений: 17
Репутация: 10

Сообщение # 1 | 00:13:12
в 2 окна поставил все отлично но надо в 4 (
Помогите настроить в 4 окна wacko

Вид материалов модуля (Управление дизайном » Вид материалов модуля)
Код
<div class="type_1">Другой вид материала</div>  
<div class="type_2">Основной вид материала</div>

Переключатель (Управление дизайном » Главная страница модуля/Страница со списком материалов категории)
Код
<div class="view_1" onclick="iseed2()"><a href="javascript:;">Вид первый</a></div>  
<div class="view_2" onclick="iseed1()"><a href="javascript:;">Вид второй</a></div>

Скрипт переключателя (Управление дизайном » Главная страница модуля/Страница со списком материалов категории)
Код
<script type="text/javascript" src="http://yraaa.ru/img/cookie.js"></script>  
<script type="text/javascript">  
function iseed1() {  
$('.view_2').fadeOut(400, function(){$('.view_1').fadeIn(400)});  
$('.type_2').fadeOut(400, function(){$('.type_1').fadeIn(400)});  
setCookie('presee', '0', 1, '/')}  
function iseed2() {  
$('.view_1').fadeOut(400, function(){$('.view_2').fadeIn(400)}); $('.type_1').fadeOut(400, function(){$('.type_2').fadeIn(400)}); setCookie('presee', '1', 1, '/')  
}  
var presee = getCookie("presee")  
if (presee=='0') {  
$('.type_1').show();  
$('.type_2').hide(); $('.view_1').show();  
$('.view_2').hide();  
}  
</script>


Код CSS (Управление дизайном » Главная страница модуля/Страница со списком материалов категории)
Код
<style type="text/css">  
.view_1 {display:none}  
.type_1 {display:none}  
</style>

cookie.js

Источник

Добавлено (13 Мар 2013, 00:13:12)
---------------------------------------------
Может кто не так понял что надо unsure
Посмотрите на источнике пример там показано два разных вида материала..
а мне нужно чтоб было их 4 smile у меня что то не выходит 4 вида сделать sad
уже мозг начал закипать пол дня мучаю teehee

Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 2 | 10:08:08
Эмель,
Цитата
Может кто не так понял что надо
Вот именно, больше похоже на Табы, Tab, Tab jQuery чем на переключение вида материала ...

Эмель
Сообщений: 17
Репутация: 10

Сообщение # 3 | 10:44:04
Текст удален
Прикрепления: 9548857.jpg (23.4 Kb)
Сообщение отредактировал Эмель - Среда, 13 Мар 2013, 18:22:23
JabaMaster
Сообщений: 5
Репутация: 2

Сообщение # 4 | 17:13:12
Вид материалов модуля

Код
<div class="view_1 hidden">Основной вид материала</div>
<div class="view_2 hidden">Другой вид материала</div>
<div class="view_3 hidden">Третий вид материала</div>
<div class="view_4 hidden">Четвертый вид материала</div>


Видов можно создавать сколько угодно, главное добавить им два класса view_N и hidden.

Переключатель
Код
<div class="pointer type_1" onclick="Views.changeView(1)">Вид первый</div>   
<div class="pointer type_2" onclick="Views.changeView(2)">Вид второй</div>
<div class="pointer type_3" onclick="Views.changeView(3)">Вид третий</div>
<div class="pointer type_4" onclick="Views.changeView(4)">Вид четвертый</div>


Переключателей столько же сколько и видов, обязательный класс type_N. И не забывайте менять в функции onclick номер вида Views.changeView(N)

Скрипт переключателя
Код
<script type="text/javascript">   
var Cookie = {
    'get': function (name) {
              var nameEQ = escape(name) + "=";
              var ca = document.cookie.split(';');
              for (var i = 0; i < ca.length; i++) {
                  var c = ca[i];
                  while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                  if (c.indexOf(nameEQ) == 0) return unescape(c.substring(nameEQ.length, c.length));
              }
              return null;
          },
    'set': function (name, value, days) {
              if (days) {
                  var date = new Date();
                  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                  var expires = "; expires=" + date.toGMTString();
              } else var expires = "";
              document.cookie = escape(name) + "=" + escape(value) + expires + "; path=/";
          }
}

var Views = {
    'currentView': function () {
       return Cookie.get('view-type') || 1;
    },
    'changeView': function (view) {
       var self = this;
       $('.view_' + self.currentView() + ',.view_' + view).toggle();
       $('.type_' + self.currentView() + ',.type_' + view).toggle();
       Cookie.set('view-type', view, 7);
    },
    'init': function (self) {
       var self = this;
       $(function () {
          if (self.currentView() == 1) {
             $('.type_1,.view_1').toggle();
          } else {
             self.changeView(self.currentView());
          };
       });
    }
}

Views.init();
</script>


Код CSS
Код
.pointer { cursor: pointer }
.hidden { display: none }
Эмель
Сообщений: 17
Репутация: 10

Сообщение # 5 | 17:50:43
Большое спасибо !! все работает smile
но одна проблема теперь появилась =) в виде 2 теперь обложек нету sad

Добавлено (13 Мар 2013, 17:50:43)
---------------------------------------------
хотя обложки я исправлю =) еще раз спасибо up

SaNEк
Сообщений: 13
Репутация: 0

Сообщение # 6 | 00:46:03
кто то может помочь с этим же скриптом! Куки почему то не запоминает!(
Александр4971
Сообщений: 1
Репутация: 0

Сообщение # 7 | 23:52:58
А этот скрипт работате в каталоге товара ?
Сообщение отредактировал Александр4971 - Понедельник, 07 Май 2018, 23:53:39
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Переключатель вида материалов для uCoz (Помогите настроить в 4 окна)
  • Страница 1 из 1
  • 1
Поиск: