0

我正在尝试使用 HTML5、PhoneGap 和 jQuery Mobile 构建移动应用程序。

我正在尝试使用 SwipeJS 合并一个图片幻灯片库。它按原样工作得很好。但是每次我尝试将它放在<div data-role="page">我的 jQuery Mobile html 文档中的“”中时，它根本不会显示。

我认为这与 jQuery Mobiles 样式表有关吗？我不是百分百确定。我对移动开发很陌生。

<div data-role="page" class="page-overide" data-fullscreen="true" data-position="fixed">

        <div data-role="header">
            <a href="index.html" data-icon="arrow-l" data-transition="reverse slide">Back</a>
            <h1>Applications</h1>
        </div>


        <div data-role="content" data-theme="my-theme">
            <strong>Title</strong>

            <div id='mySwipe' style='max-width:500px;' class='swipe' data-theme='my-theme'>
                <div class='swipe-wrap'>
                    <div><b>0</b></div>
                    <div><b>1</b></div>
                    <div><b>2</b></div>
                </div>
            </div>

        </div>

    </div>

 <script src='swipe.js'></script>

更多在这里：

http://jsfiddle.net/oliverj777/G7UkU/

谢谢

- - - 更新 - - -

如果我注释掉样式的visibility: hidden;内部.swipe，我现在可以看到所有的图像位置，但现在它们都是一个在垂直方向的顶部？！？

4

1 回答 1

0

你在尝试这样吗

HTML：

<div id="slider" data-role="page" data-position="fixed">
     <div data-role="header" data-position="fixed">
                <a href="index.html" data-icon="arrow-l" data-transition="reverse slide">Back</a>
                <h1>Applications</h1>
            </div>
    <div data-role="content" id="contentSlider">
        <div id='mySwipe' style='min-width:500px; margin:0 auto' class='swipe'>
            <div class='swipe-wrap'>
                <div><b>1</b>
                </div>
                <div><b>2</b>
                </div>
                <div><b>3</b>
                </div>
            </div>
        </div>
        <div style='text-align:center;padding-top:20px;'>
            <button onclick='mySwipe.prev()'>prev</button>
            <button onclick='mySwipe.next()'>next</button>
        </div>
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed" id="footer">
        <h1>Footer</h1>
    </div>    
</div>

JS：

var elem = document.getElementById('mySwipe');


window.mySwipe = Swipe(elem, {
    continuous: true

});

演示链接

于 2013-07-09T07:00:24.947 回答