jQuery Mobile:标题在调用页面中无法正确显示

时间:2015-02-14 04:06:09

标签: html cordova jquery-mobile jquery-mobile-listview

这是我的HTML代码

<div data-role="page" id="main-body">
    <div data-role="header">
        <!--<a href="#"><img src="img/back.png" width="30" height="30" class="ui-btn-left" /></a>-->
        <img src="img/share.png" width="30" height="30" class="ui-btn-right" />
        <h1>Hello world</h1>
    </div>

    <ul data-role="listview" data-inset="true">
        <li><a href="#asked-question-body">Acura</a></li>
        <li><a href="#">Audi</a></li>
        <li><a href="#">BMW</a></li>
        <li><a href="#">Cadillac</a></li>
        <li><a href="#">Ferrari</a></li>
    </ul>          
</div>

<div data-role="page" id="asked-question-body">
    <div data-role="header">
        <a href="#main-body"><img src="img/back.png" width="30" height="30" class="ui-btn-left" /></a>
    </div>

    <div data-role="main" class="ui-content">
        <div class="ui-body ui-body-a ui-corner-all">
            <h3>Heading</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
        </div>
    </div>
</div>

它完美地显示了id="main-body"标题,但id="asked-question-body"没有正确显示其标题。我希望将其标题完美地显示为main-body页面。

main-body截图是 enter image description here

asked-question-body enter image description here

提前致谢。

1 个答案:

答案 0 :(得分:0)

添加 ask-question-body 页面

<div data-role="header">
     <h1></h1>
     <a href="#main-body" class="ui-btn ui-btn-icon-notext ui-icon-btnback" data-icon="btnback"></a>
</div>

<强> CSS

 <style>
    .ui-icon-btnback:after {
      background: url(back.png) 50% 50% no-repeat;         
    }
</style>