添加页面会在我的第一页下创建一个空白

时间:2014-12-10 15:30:33

标签: jquery html css jquery-mobile

我有一个带有列表的页面,列表中的每个项目都是指向其他页面的链接,如果我只添加一个其他页面并将其与列表项链接,那么一切都是当我尝试添加另一个页面和链接时它到第二个项目,它在列表下创建了一个空白......

我检查过,我发现我的代码没有任何问题...... 我错过了什么吗?

PS:此外,点击我的一个项目后,它将我滑到另一个页面,然后我回到#pageone,差距不再存在......一切都很好...... < /强>

我的HTML

    <div data-role="page" id="pageone" data-theme="d">
        <div data-role="main" class="ui-content">
        <h1>handbook</h1>
        <form class="ui-filterable">
        <input id="myFilter" data-type="search">
        </form>
            <ul data-role="listview" data-filter="true" data-input="#myFilter" data-inset="true">
                <li data-icon="action">
                    <a href="#">
                        <img src="thumbs/jquery.png">
                        <h2>title</h2>
                        <p>text</p>
                    </a>
                    <a href="#firstpage" data-transition="slide" data-></a>
                </li>
                <li data-icon="action">
                    <a href="#">
                        <img src="thumbs/jquery.png">
                        <h2>title</h2>
                        <p>text</p>
                    </a>
                    <a href="#secondpage" data-transition="slide" data-></a>
                </li>
            </ul>
        </div>
    </div>
<!--page-->
<div data-role="page" id="firstpage" data-theme="d">
    <div data-role="main" class="ui-content">
    <h1>handbook</h1>
        <div class="article">
            <h2 class="align_center">Lorem ipsum</h2>
            <p class="align_center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam varius tristique velit eu pretium. Morbi ac consequat justo. Nunc cursus massa ut risus sodales, vitae ultrices sem scelerisque. Vivamus vel massa sit amet lacus dapibus sollicitudin. Aenean gravida, mi ut faucibus viverra, arcu dui mattis risus, vitae aliquet nunc neque sed sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
        </div>
        <a href="#pageone"  class="ui-btn ui-icon-carat-l ui-btn-icon-left" data-transition="slide" data-direction="reverse">Back</a>
    </div>
</div>
<!--/page-->
<!--page-->
<div data-role="page" id="secondpage" data-theme="d">
    <div data-role="main" class="ui-content">
    <h1>handbook</h1>
        <div class="article">
            <h2 class="align_center">Lorem ipsum</h2>
            <p class="align_center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam varius tristique velit eu pretium. Morbi ac consequat justo. Nunc cursus massa ut risus sodales, vitae ultrices sem scelerisque. Vivamus vel massa sit amet lacus dapibus sollicitudin. Aenean gravida, mi ut faucibus viverra, arcu dui mattis risus, vitae aliquet nunc neque sed sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
        </div>
        <a href="#pageone"  class="ui-btn ui-icon-carat-l ui-btn-icon-left" data-transition="slide" data-direction="reverse">Back</a>
    </div>
</div>
<!--/page-->

CSS是基本的jQuery Mobile 1.4.5.css以及文章的以下内容:

.article{
    width: auto;
    height: auto;
    margin: 0;
    padding: 20px;
    background-color: rgba(0,0,0,0.7);
    -webkit-border-radius: 10px;
    border-radius: 10px;
    color: #fff;
}

1 个答案:

答案 0 :(得分:0)

嗯,对于那些遇到同样问题的人,我发现了问题,这是我从未想过的问题,我只改变了jQuery Mobile 1.4.5.css中的一件事。

我为更快的动画添加了更短的过渡时间,这就是我的应用程序...它应该保持这样:

.in {
    -webkit-animation-timing-function:ease-out;
    -webkit-animation-duration:350ms;
    -moz-animation-timing-function:ease-out;
    -moz-animation-duration:350ms;
    animation-timing-function:ease-out;
    animation-duration:350ms
}
.out {
    -webkit-animation-timing-function:ease-in;
    -webkit-animation-duration:225ms;
    -moz-animation-timing-function:ease-in;
    -moz-animation-duration:225ms;
    animation-timing-function:ease-in;
    animation-duration:225ms
}

我真的不明白为什么这会影响我的页面...如果有人知道这个奇怪的'bug'背后的理论,请留下评论或链接。