刘月林 | jQuery Mobile 工具栏

  <!-- 全屏定位-敲击屏幕会隐藏或显示页眉和页脚 -->
  <div id="pages" data-role="header" data-position = "fixed" data-fullscreen = "true"  style="text-align:center;margin-bottom:56px;" page="1" mode="1" max="0">
    <div data-role="controlgroup" data-type="horizontal">
      <a href="#" id="previous" class="ui-btn ui-corner-all ui-shadow ui-icon-arrow-l ui-btn-icon-notext">上一页</a>
      <a href="#myPanel" id="" class="ui-btn ui-corner-all ui-shadow ui-icon-bars ui-btn-icon-notext">删除</a>
      <a href="#" id="returnTop" class="ui-btn  ui-corner-all ui-icon-carat-u ui-shadow ui-btn-icon-notext">返回顶部</a>
      <a href="#" id="next" class="ui-btn ui-corner-all ui-shadow ui-icon-arrow-r ui-btn-icon-notext">下一页</a>
    </div>
  </div>

  <div data-role="footer" style="background: white" id="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
    <div class="" style="background: white" data-role="navbar">
      <ul>
        <li><a href="index.php" data-ajax='false' data-role="button" data-icon="articleNow" class="ui-icon-article" data-iconpos="notext" style="box-shadow:none">首页</a></li>
        <li><a href="saylove.php" data-ajax='false' data-transition="slide" data-role="button" data-icon="heart" class="ui-icon-heart" data-iconpos="notext" style="box-shadow:none">表白</a></li>
        <li><a href="search.php" data-ajax='false' data-role="button" data-icon="search" class="ui-icon-search" data-iconpos="notext" style="box-shadow:none">搜索</a></li>
      </ul>
    </div>
  </div>

全屏定位-敲击屏幕会隐藏或显示页眉和页脚

---

  <!-- 全屏定位-敲击屏幕不会隐藏或显示页眉和页脚 -->
  <div id="pages" data-role="header" data-position = "fixed" data-fullscreen = "true" data-tap-toggle="false" style="text-align:center;margin-bottom:56px;" page="1" mode="1" max="0">
    <div data-role="controlgroup" data-type="horizontal">
      <a href="#" id="previous" class="ui-btn ui-corner-all ui-shadow ui-icon-arrow-l ui-btn-icon-notext">上一页</a>
      <a href="#myPanel" id="" class="ui-btn ui-corner-all ui-shadow ui-icon-bars ui-btn-icon-notext">删除</a>
      <a href="#" id="returnTop" class="ui-btn  ui-corner-all ui-icon-carat-u ui-shadow ui-btn-icon-notext">返回顶部</a>
      <a href="#" id="next" class="ui-btn ui-corner-all ui-shadow ui-icon-arrow-r ui-btn-icon-notext">下一页</a>
    </div>
  </div>

  <div data-role="footer" style="background: white" id="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
    <div class="" style="background: white" data-role="navbar">
      <ul>
        <li><a href="index.php" data-ajax='false' data-role="button" data-icon="articleNow" class="ui-icon-article" data-iconpos="notext" style="box-shadow:none">首页</a></li>
        <li><a href="saylove.php" data-ajax='false' data-transition="slide" data-role="button" data-icon="heart" class="ui-icon-heart" data-iconpos="notext" style="box-shadow:none">表白</a></li>
        <li><a href="search.php" data-ajax='false' data-role="button" data-icon="search" class="ui-icon-search" data-iconpos="notext" style="box-shadow:none">搜索</a></li>
      </ul>
    </div>
  </div>

全屏定位-敲击屏幕不会隐藏或显示页眉和页脚

---

  <!-- 全屏定位-敲击屏幕会隐藏或显示页眉 -->
  <div id="pages" data-role="header" data-position = "fixed" data-fullscreen = "true"  style="text-align:center;margin-bottom:56px;" page="1" mode="1" max="0">
    <div data-role="controlgroup" data-type="horizontal">
      <a href="#" id="previous" class="ui-btn ui-corner-all ui-shadow ui-icon-arrow-l ui-btn-icon-notext">上一页</a>
      <a href="#myPanel" id="" class="ui-btn ui-corner-all ui-shadow ui-icon-bars ui-btn-icon-notext">删除</a>
      <a href="#" id="returnTop" class="ui-btn  ui-corner-all ui-icon-carat-u ui-shadow ui-btn-icon-notext">返回顶部</a>
      <a href="#" id="next" class="ui-btn ui-corner-all ui-shadow ui-icon-arrow-r ui-btn-icon-notext">下一页</a>
    </div>
  </div>

  <div data-role="footer" style="background: white" id="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
    <div class="" style="background: white" data-role="navbar">
      <ul>
        <li><a href="index.php" data-ajax='false' data-role="button" data-icon="articleNow" class="ui-icon-article" data-iconpos="notext" style="box-shadow:none">首页</a></li>
        <li><a href="saylove.php" data-ajax='false' data-transition="slide" data-role="button" data-icon="heart" class="ui-icon-heart" data-iconpos="notext" style="box-shadow:none">表白</a></li>
        <li><a href="search.php" data-ajax='false' data-role="button" data-icon="search" class="ui-icon-search" data-iconpos="notext" style="box-shadow:none">搜索</a></li>
      </ul>
    </div>
  </div>

全屏定位-敲击屏幕会隐藏或显示页眉
参考
菜鸟教程-jQuery Mobile 工具栏

刘月林
写于浙江宁波
2018/08/28