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

您必须拦截touchStart / Move / End事件（http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariWebContent/HandlingEvents/HandlingEvents.html）... 看看这里：

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

这里是预构建的组件：

iPhone / iPad / iPod swipe events javascript

Answer 2

您可能需要一个基于触摸的移动框架来处理触摸/滑动。

我想到的是Sencha.com

iPad WebApp模拟滑动滑块

2 个答案: