jquery mobile的用法（多页面、 Dialogs（对话框）、menu(菜单)）

2015/09/27 42915

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>> 

<!DOCTYPE html>
 <html>
 <head>
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
   <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
   <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
 </head>
 <body>

 <div data-role="page" id="pageone">
  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
    <div data-role="navbar">
      <ul>
       <li><a href="#" data-icon="home">首页</a></li>
        <li><a href="#pagetwo" data-icon="arrow-r">页面二</a></li>
      </ul>
    </div>
  </div>

  <div data-role="content">
  <div style="text-align:center">
    <video width="600" height="400" controls="controls" >
	<source src="video/movie.mp4" type="video/mp4">
	您的浏览器不支持 video 标签。
	</video>
  </div> 
  <p> 
   <xmp>
        <video width="600" height="400" controls="controls" >
	<source src="http://vod.kankan.com/v/87/87085.shtml?id=761122&outsite=kk_rebo_1&src=se6_newtab" type="video/mp4">
	您的浏览器不支持 video 标签。
	</video>
	
  controls 如果出现该属性，则向用户显示控件，比如播放按钮。
  xmp中间可以包含html实体而不被转义
  data-role参数表：
    page        页面容器，其内部的mobile元素将会继承这个容器上所设置的属性 
    header     页面标题容器，这个容器内部可以包含文字、返回按钮、功能按钮等元素
    footer       页面页脚容器，这个容器内部也可以包含文字、返回按钮、功能按钮等元素
    content     页面内容容器，这是一个很宽容的容器，内部可以包含标准的html元素和jQueryMobile元素
     </xmp>
    </p>
  </div>
  <div data-role="footer">
    <h1>我的页脚</h1>
  </div> 
</div> 

<div data-role="page" id="pagetwo">
   <div data-role="header">
    <h1>欢迎来到我的主页</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#pageone" data-icon="home">首页</a></li>
        <li><a href="#" data-icon="arrow-r">页面二</a></li>
      </ul>
    </div>
  </div>

  <div data-role="content">
    
	<div data-role="button">  1+1=2?</div>  

  <ul data-role="list-view">
  <li> <a href="#dui" data-rel="popup" data-position-to="window" data-role="button" data-transition="pop" data-icon="check" data-iconpos="right">对</a>
     <div data-role="popup" id="dui" data-overlay-theme="a" data-theme="c">
        <div data-role="header" data-theme="a">
          <h1>对了！</h1>
        </div>
       <div data-role="content" data-theme="d">
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c" data-icon="check">恭喜对了</a>
       </div>
     </div>
  </li> 
  <li> <a href="#cuo" data-rel="popup" data-position-to="window" data-role="button" data-transition="pop" data-icon="delete" data-iconpos="right">错</a>
      <div data-role="popup" id="cuo" data-overlay-theme="a" data-theme="c">
        <div data-role="header" data-theme="a">
          <h1>错了！</h1>
        </div>
     <div data-role="content" data-theme="d">
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c" data-icon="delete">你回答错了</a>
    </div>
  </li>
 </ul>

 </div>
  <a href="#menu" data-rel="popup" data-role="button">菜单</a>
  <div data-role="popup" id="menu" data-theme="a">
    <ul data-role="listview" data-theme="c" data-inset="true">
        <li data-role="divider" data-theme="a">My Menu</li>
        <li><a href="http://www.w3school.com.cn">w3school</a></li>
        <li><a href="http://www.baidu.com">baidu<span class="ui-li-count">66</span></a></li>
    </ul>
  </div>


  <div data-role="footer">
    <h1>我的页脚</h1>
  </div> 
 </div> 
</div> 
</body>
</html>