Форум русской поддержки Joomla!® CMS
03.12.2016, 02:21:26 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Прокрутка содержимого на право и лево

 (Прочитано 247 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Ildan37
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« : 24.11.2015, 18:51:32 »

Здравствуйте, есть задача выводить определённое количество "Производителей"(заданное для каждого размера экрана разное) с возможностью "перелистывания"(не знаю как это назвать).
Например:
Код
 
<div class="manufacturer2" id="manufacturer2">
           <button style="float: left;" type="button" id="buttonLeft2" class="btn btn-default"><span class="glyphicon glyphicon-chevron-left"></span></button>
               <div class="manu2" id="manu2">
<div id="man-2-0" class="man-2-0" style="display: block; visibility: visible;">                
               <a style="float: left; padding: 5px;" href="/" class="man">Pros1</a>                
               <a style="float: left; padding: 5px;" href="/" class="man">Pros2</a>                
               <a style="float: left; padding: 5px;" href="/" class="man">Pros3</a>                
               <a style="float: left; padding: 5px;" href="/" class="man">Pros4</a>
        </div>
<div id="man-2-1" class="man-2-1" style="display: none; visibility: hidden;">                
               <a style="float: left; padding: 5px;" href="/" class="man">Pros5</a>                
               <a style="float: left; padding: 5px;" href="/" class="man">Pros6</a>                
               <a style="float: left; padding: 5px;" href="/" class="man">Pros7</a>
          </div>
           </div>
                       <button type="button" id="buttonRight2" class="btn btn-default"><span class="glyphicon glyphicon-chevron-right"></span></button>
              <input type="button" class="btn btn-default" value="Привет мир" onclick="location.href='index.php?option=com_virtuemart&amp;view=manufacturer'">            </div>
 
<div class="manufacturer3" id="manufacturer3">
           <button style="float: left;" type="button" id="buttonLeft3" class="btn btn-default"><span class="glyphicon glyphicon-chevron-left"></span></button>
               <div class="manu3" id="manu3">
<div id="man-3-0" class="man-3-0" style="display: block; visibility: visible;">                
               <a style="float: left; padding: 5px;" href="/" class="man">Pros1</a>                
               <a style="float: left; padding: 5px;" href="/" class="man">Pros2</a>    
               <a style="float: left; padding: 5px;" href="/" class="man">Pros3</a>                
               <a style="float: left; padding: 5px;" href="/" class="man">Pros4</a>                
               <a style="float: left; padding: 5px;" href="/" class="man">Pros5</a>
               <a style="float: left; padding: 5px;" href="/" class="man">Pros6</a>
       </div>
<div id="man-3-1" class="man-3-1" style="display: none; visibility: hidden;">                
               <a style="float: left; padding: 5px;" href="/" class="man">
Pros7</a>
       </div>
           </div>
                                   <button type="button" id="buttonRight3" class="btn btn-default"><span class="glyphicon glyphicon-chevron-right"></span></button>
              <input type="button" class="btn btn-default" value="Привет мир" onclick="location.href='index.php?option=com_virtuemart&amp;view=manufacturer'">            </div>
 
Пояснение: в стилях для "не выбранных" блоков стоит     display: none;  visibility: hidden;
Код
jQuery(document).ready(function(){
   jQuery("#buttonLeft2").click(function(){
       jQuery("#manu2 div:first-child").attr("style", "visibility: hidden; display: none;")
       jQuery("#manu2 div:last-child").prependTo("#manu2");
       jQuery("#manu2 div:first-child").attr("style", "visibility: visible; display: block;")
   });
});
 
jQuery(document).ready(function(){
   jQuery("#buttonRight2").click(function(){
       jQuery("#manu2 div:first-child").attr("style", "visibility: hidden; display: none;")
       jQuery("#manu2 div:first-child").appendTo("#manu2");
       jQuery("#manu2 div:first-child").attr("style", "visibility: visible; display: block;")
   });
});
 
jQuery(document).ready(function(){
   jQuery("#buttonLeft3").click(function(){
       jQuery("#manu3 div:first-child").attr("style", "visibility: hidden; display: none;")
       jQuery("#manu3 div:last-child").prependTo("#manu3");
       jQuery("#manu3 div:first-child").attr("style", "visibility: visible; display: block;")
   });
});
 
jQuery(document).ready(function(){
   jQuery("#buttonRight3").click(function(){
       jQuery("#manu3 div:first-child").attr("style", "visibility: hidden; display: none;")
       jQuery("#manu3 div:first-child").appendTo("#manu3");
       jQuery("#manu3 div:first-child").attr("style", "visibility: visible; display: block;")
   });
});
 

На данный момент всё работает, но красота кода оставляет желать лучшего. Собственно вопрос. Какими еще способами еще можно сделать подобное, что бы ссылки не дублировались или просто по другому всё организовать?(Делал это первый раз)
Записан
Shustry
Группа развития
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #1 : 24.11.2015, 19:40:09 »

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

Вместо этого

Код
jQuery("#manu2 div:first-child").attr("style", "visibility: hidden; display: none;")

Можно

Код
jQuery("#manu2 div").first().hide();

Писать каждый раз jQuery(document).ready(function() не обязательно. Зачем плодить одинаковый код? Вообще, ощущение, что тут в цикле всё можно сделать компактнее. Только задачу чётче опишите и проиллюстрируйте.
Записан
Ildan37
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #2 : 24.11.2015, 19:59:12 »

Писать каждый раз jQuery(document).ready(function() не обязательно. Зачем плодить одинаковый код? Вообще, ощущение, что тут в цикле всё можно сделать компактнее. Только задачу чётче опишите и проиллюстрируйте.
Я понимаю, просто писал этот код вчера ночью(спать хотелось), поэтому я просто копипастом его сделал.
Задача: сделать разное отображение одного и того же набора элементов(без повторений) для разных разрешений экрана.
https://img-fotki.yandex.ru/get/4135/178621416.0/0_127cdf_c6a88ef1_orig.jpg
https://img-fotki.yandex.ru/get/4602/178621416.0/0_127ce0_d9078b7d_orig.jpg
« Последнее редактирование: 24.11.2015, 20:03:30 от Ildan37 » Записан
Shustry
Группа развития
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #3 : 24.11.2015, 21:47:37 »

Судя по скрину, тут не так быстро самому сделать, хотя и можно.
Длинна элементов разная. Следовательно, нужно сперва посчитать кол-во объектов, которые входят целиком в контейнер для конкретного разрешения. Потом остаток поделить на равные части и прибавить к объектам. Всё это собрать в функцию и вызывать каждый раз по клику на кнопку. Либо заранее, при загрузке уже поделить всех на группы объектов с «хвостиками». Сумма длин каждой группы равна длине контейнера. Это основная задача. Собственно, дальше берёте любой готовый сприпт слайдера и подключаете.
Записан
robert
Профи
********

Репутация: +342/-11
Offline Offline

Пол: Мужской
Сообщений: 3566


« Ответ #4 : 25.11.2015, 00:52:43 »

Не совсем понял. Вы хотите при клике "налево" или "направо" двигать производителей в соответствующую сторону, как в слайдере?
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet