Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.06.2010, 12:44
Новичок на форуме
Отправить личное сообщение для mixlink Посмотреть профиль Найти все сообщения от mixlink
 
Регистрация: 17.06.2010
Сообщений: 3

Горизонтальный скролл содержимого в стиле iPhone
Задача была сделать галлерею шириной 100% с навигатором для управления наверху + что бы прокручивалась зажатием и перетаскиванием элементов, как в iPhone.
Кое как выполнил первое на jQuery tools с помощью функции scrollable:

hrml:
<div class="navi"></div>
<!-- root element for scrollable -->
<div class="scrollable" id=browsable>    
   <!-- root element for the items -->
   <div class="items">
   
      <!-- 1-5 -->

      <div style="padding-left:5px">
         <img src="images/img/production/metall/1.jpg" />
         <img src="images/img/production/metall/1.jpg" />
         <img src="images/img/production/metall/1.jpg" />
         <img src="images/img/production/metall/1.jpg" />
      </div>
      
      <!-- 5-10 -->
      <div style="padding-left:5px">
         <img src="images/img/production/metall/2.jpg" />
                  <img src="images/img/production/metall/2.jpg" />
                           <img src="images/img/production/metall/2.jpg" />
                                    <img src="images/img/production/metall/2.jpg" />
      </div>
      
      <!-- 10-15 -->
       <div style="padding-left:5px">
         <img src="images/img/production/metall/3.jpg" />
                  <img src="images/img/production/metall/3.jpg" />
                           <img src="images/img/production/metall/3.jpg" />
                                    <img src="images/img/production/metall/3.jpg" />
      </div>
      
             <div style="padding-left:5px">
         <img src="images/img/production/metall/4.jpg" />
                  <img src="images/img/production/metall/4.jpg" />
                           <img src="images/img/production/metall/4.jpg" />
                                    <img src="images/img/production/metall/4.jpg" />
      </div>
      
      <div style="padding-left:5px">
         <img src="images/img/production/metall/1.jpg" />
         <img src="images/img/production/metall/1.jpg" />
         <img src="images/img/production/metall/1.jpg" />
         <img src="images/img/production/metall/1.jpg" />
      </div>

      
   </div>
   
</div>
</div>


java:
$(document).ready(function() {

// initialize scrollable together with the navigator plugin
$("#browsable").scrollable().navigator();	
});


А внешне это выглядит примерно так:

Так собственно сам вопрос: как к этому всему безобразию еще прикрутить функцию скроллинга в стиле прокрутики айфона?

Я гуглю уже почти месяц.
То что находил - не работало. Пробовал виджет ui.iGallery (библиотеки jquery.iphone), но он почему то не прикручивается. (руки кривые скорее всего).
Буду очень признателен за советы.
Ответить с цитированием
  #2 (permalink)  
Старый 17.06.2010, 12:52
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

mixlink,
Почитай про scrollWidth, scrollLeft и onmousemove
__________________
.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Горизонтальный скролл на Mootools1.1 Virgile Events/DOM/Window 4 10.07.2010 18:42