外部面板位置?

时间:2014-06-29 19:39:15

标签: cordova

我在PhoneGap上构建一个移动应用程序,我必须在每个页面上使用相同的面板,但我不知道在哪里放置面板代码。在互联网上我发现面板代码必须在标题之前,在外面使用data-role="page"的div但这不起作用..

DEMO:http://jsfiddle.net/zC7Lq/2/

html结构:

<div data-role="page" id="page1" data-theme="c">
        <!-- Header -->
        <div data-role="header" id="wrap-header">
               <img src="img/logo.png" class="logo"/>
               <a href="#" class="ui-btn-right button" id="btn-menu">Menu</a>
         </div>
        <!-- /header -->  
        <!-- Content    -->
        <div data-role="content" id="content">

            <h3>Content</h3>
            <p>
                page1
            </p>
        </div>
        <!-- /content -->
        <!-- footer -->
        <div data-role="footer">
            <h4>&copy; 2013 Your Name</h4>
        </div>
        <!-- /footer -->
    </div>

小组结构:

    <div data-role="panel" id="myPanel" data-display="overlay"  data-position="right">
  <h2>Panel Header..</h2>
  <p>Some text in the panel..</p>
  <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">Close Panel</a>
</div> 

1 个答案:

答案 0 :(得分:0)

<div data-role="page" id="home" data-theme='a'>
    <div data-role="panel" id="mypanel" data-theme='e'>
    .......................
    </div>

    <div data-role="header">
    ..................

data-role="page"

之前header之后