Question

我目前正在尝试在html页面中使用面板。我目前有一个NavBar允许快速操作，例如返回一个月，当前日期等。看起来很好但是当我应用面板时，NavBar会移动到页面的最底部，就像一个页脚。我不想要这个。

HTML

<div data-role="page">

<div data-role="header">
    <h1><div id='title'></div></h1>
    <a data-icon="gear" href="#mypanel" class="ui-btn-right">Options</a>
 </div> 
 <div data-role="navbar" class="ui-icon-alt">
    <ul>
    <li><a onClick="changedate('prevmo')" data-icon="arrow-l">Back a Month</a></li>
    <li><a onClick="sync()" class="ui-icon-alt" data-icon="refresh">Sync</a></li>
    <li><a onClick="changedate('return')" data-icon="home">Current Date</a></li>
    <li><a onClick="checkEonline()" class="ui-icon-alt"data-icon="plus">New Event</a></li>
    <li><a onClick="changedate('nextmo')" data-icon="arrow-r">Forward a month</a></li>
    </ul>
</div><!-- /header -->

<div role="main" class="ui-content">
</div><!-- /content -->
</div><!-- /page -->

面板代码

<div data-role="panel" id="mypanel">
    <a href="#mypanel" data-rel="close">Close panel</a>
</div><!-- /panel -->

放置此面板代码的位置无关紧要，它会将NavBar移动到页面底部。有人可以帮忙吗？

Answer 1

这是因为你的导航栏不在标题内。将标记更改为：

<div data-role="header">
    <h1><div id='title'></div></h1>
    <a data-icon="gear" href="#mypanel" class="ui-btn-right">Options</a>
    <div data-role="navbar" class="ui-icon-alt">
        <ul>
            <li><a onClick="changedate('prevmo')" data-icon="arrow-l">Back a Month</a></li>
            <li><a onClick="sync()" class="ui-icon-alt" data-icon="refresh">Sync</a></li>
            <li><a onClick="changedate('return')" data-icon="home">Current Date</a></li>
            <li><a onClick="checkEonline()" class="ui-icon-alt"data-icon="plus">New Event</a></li>
            <li><a onClick="changedate('nextmo')" data-icon="arrow-r">Forward a month</a></li>
        </ul>
    </div>
</div> 
 <!-- /header -->

NavBars和Panel的任何兼容性问题？

1 个答案: