- <!DOCTYPE html>
- <html>
- <head>
- <link rel="stylesheet" >
- <script src1="http://code.jquery.com/jquery-1.8.3.min.js"></script>
- <script src1="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 src1="video/movie.mp4" type="video/mp4">
- 您的浏览器不支持 video 标签。
- </video>
- </div>
- <p>
- <xmp>
- <video width="600" height="400" controls="controls" >
- <source src1="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>
- //该片段来自于http://www.codesnippet.cn/detail/1501201511559.html
来源: http://www.codesnippet.cn/detail/1501201511559.html