Quantcast
Channel: CSDN博客推荐文章
Viewing all articles
Browse latest Browse all 35570

HTML5 经量级框架 jQuery Mobile Bar(后退,多按钮,controlgroup,horizontal,导航条定义fixed,全屏模式) - 7.5

$
0
0

1.后退 <a data-rel="back">后退</a>   data-add-back-btn="true"


2.多按钮的footer工具栏

      <footer data-role="footer" class="ui-bar">
        <div data-role="controlgroup" data-type="horizontal">
          <a href="#" data-role="button" data-icon="delete">删除</a>
          <a href="#" data-role="button" data-icon="plus">添加</a>
          <a href="#" data-role="button" data-icon="arrow-u">向上</a>
          <a href="#" data-role="button" data-icon="arrow-d">向下</a>
        </div>

      </footer>


3.<div data-role="controlgroup" data-type="horizontal">


4.导航条工具栏


  <footer data-role="header">
    <nav data-role="navbar">
      <ul>
        <li><a href="#" class="ui-btn-active">照片</a></li>
        <li><a href="#">状态</a></li>
        <li><a href="#">信息</a></li>
      </ul>
    </nav>
  </footer>


5.top nav <li><a href="#" class="ui-btn-active" data-iconpos="top">照片</a></li>


6.定义fixed工具栏 <header data-role="header" data-position="fixed">


7.全屏模式工具栏

      <div data-role="page" id="forwardPage" data-fullscreen="true">

      <header data-role="header" data-position="fixed">



HTML5

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap</title>

      
      <link rel="stylesheet" href="jquery.mobile-1.3.1.css">
      
      <script type="text/javascript" charset="utf-8" src="jquery-1.9.0.min.js"></script>
      <script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.1.js"></script>
  </head>
  <body>
    <div data-role="page" id="forwardPage" data-fullscreen="true">
      <header data-role="header" data-position="fixed">
        <a>按钮</a>
        <h1>前进视图标题</h1>
        <a href="#backPage">前进</a>
      </header>
      <div>点击前进第二视图</div>
      <footer data-role="footer" class="ui-bar">
        <div data-role="controlgroup" data-type="horizontal">
          <a href="#" data-role="button" data-icon="delete">删除</a>
          <a href="#" data-role="button" data-icon="plus">添加</a>
          <a href="#" data-role="button" data-icon="arrow-u">向上</a>
          <a href="#" data-role="button" data-icon="arrow-d">向下</a>
        </div>
      </footer>
    </div>

    <div data-role="page" id="backPage" data-add-back-btn="true">
      <header data-role="header">
        <!-- <a data-rel="back">后退</a> -->
        <h1>navbar</h1>
      </header>
      <div>视图内容区域</div>
      <footer data-role="header">
        <nav data-role="navbar">
          <ul>
            <li><a href="#" class="ui-btn-active" data-iconpos="top">照片</a></li>
            <li><a href="#">状态</a></li>
            <li><a href="#">信息</a></li>
          </ul>
        </nav>
      </footer>
    </div>
  </body>
</html>

作者:menxu_work 发表于2013-5-24 12:59:32 原文链接
阅读:69 评论:0 查看评论

Viewing all articles
Browse latest Browse all 35570

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>