iPad WebApp, имитирующий слайдер

Question

Я разрабатываю полноэкранное веб-приложение для iPad, в котором на слайдере будет отображаться серия изображений, с помощью которых пользователь сможет прокручивать между ними, а затем нажимать на одно.

Вот пример изображения того, как это будет выглядеть:

Существует множество ползунков на основе jQuery, но все они требуют использования пользователем, нажимающего кнопку в той или иной форме. Что я хочу сделать, это скопировать его так, чтобы пользователь проводил по экрану для перемещения между различными изображениями.

Вот несколько примеров разметки:

<ul id="magazine-slider">
    <li>
        <div class="image">
            <img src="magazine-cover-jan.png" width="640" height="640" />
        </div>
        <div class="meta">
            <h3>Magazine Title</h3>
            <h4>January 2010</h4>
        </div>
        <ul class="options">
            <li><a title="Delete" href="#">Delete</a></li>
            <li><a title="View" href="#">View</a></li>
        </ul>
    </li>
    <li>
        <div class="image">
            <img src="magazine-cover-feb.png" width="640" height="640" />
        </div>
        <div class="meta">
            <h3>Magazine Title</h3>
            <h4>February 2010</h4>
        </div>
        <ul class="options">
            <li><a title="Delete" href="#">Delete</a></li>
            <li><a title="View" href="#">View</a></li>
        </ul>
    </li>
    <li>
        <div class="image">
            <img src="magazine-cover-mar.png" width="640" height="640" />
        </div>
        <div class="meta">
            <h3>Magazine Title</h3>
            <h4>March 2010</h4>
        </div>
        <ul class="options">
            <li><a title="Delete" href="#">Delete</a></li>
            <li><a title="View" href="#">View</a></li>
        </ul>
    </li>
</ul>

<ul id="magazine-slider-pagination">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

Кто-нибудь может помочь? Спасибо

Answer 1

Вам, вероятно, понадобится сенсорная мобильная платформа для обработки касаний / пролистывания.

На ум приходит Sencha.com

Answer 2

Вы должны перехватить события touchStart / Move / End (http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariWebContent/HandlingEvents/HandlingEvents.html) ... посмотрите здесь:

http://padilicious.com/code/touchevents/

и здесь для предварительно созданного компонента:

Javascript для событий iPhone / iPad / iPod