Как я могу привязать к окну?

#jquery #jqtouch

#jquery — jquery — запрос #jqtouch #jquery

Вопрос:

Я использую jQTouch и это расширение jQTouch вhttp://code.google.com/p/jqextensions /.

У меня есть моя разметка в виде

 <div id="uiPage">
    <div class="toolbar">
        <h1>UI/UX Design</h1>
        <a class="button back" href="#home">Back</a>
    </div>        
    <div class="horizontal-slide">
        <table>
            <tr>
                <td>
                    <div class="slide-container current">
                        <img src="gallery/one.jpg" />
                    </div>
                </td>
                <td>
                    <div class="slide-container">
                        <img src="gallery/two.jpg" />
                    </div>
                </td>
                <td>
                    <div class="slide-container">
                        <img src="gallery/three.jpg" />
                    </div>
                </td>
                <td>
                    <div class="slide-container">
                        <img src="gallery/four.jpg" />
                    </div>
                </td>
                <td>
                    <div class="slide-container">
                        <img src="gallery/five.jpg" />
                    </div>
                </td>
                <td>
                    <div class="slide-container">
                        <img src="gallery/six.jpg" />
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>

Я хочу, чтобы td s привязывались к окну точно так же, как пользовательский интерфейс, как на главном экране iPhone.

Кто-нибудь может помочь мне разобраться, как сделать td привязку s к окну?

1. Прежде всего, я бы использовал теги <div> вместо TD. Во-вторых, должна быть какая-то ширина контейнера слайдов, которую вы можете умножить и исходя из этого вычислить, какие xpos привязать к сетке?

2. Мне было интересно то же самое, но jQTouch использует table. Это в их коде, и, похоже, я должен использовать это, чтобы заставить скользящую работу работать.

Ответ №1:

Почему вы не используете расширение jQTouch Photo Gallery? Взгляните на демонстрационную версию (особенно «Фотогалерею» и «Фотогалерею 2»).

Базовая настройка будет выглядеть следующим образом:

 jQT.generateGallery("pageID",
    [
    {src:"http://www.site.com/somepic.jpg"},
    {src:"pic1.jpg",caption:"Test Image 1"}
    ],
    {
       hideToolbars: function() { }
    }
);

Редактировать:

Это также можно сделать для отображения панелей инструментов. Вот демонстрационный пример:http://jsbin.com/aqito4/7

Просто отключите hideToolbars опцию, смотрите измененный код выше.

1. Я хочу, чтобы свайп был активен только на <div> , чтобы при перемещении изображений перемещались только изображения, а панель инструментов и другие элементы оставались

2. Это выполнимо с помощью опции hideToolbars , см. Изменения.