HTML5 经量级框架 jQuery Mobile (多视图页面 ,视图切换动画,dialog 对话框,页面主题) - 7.3

1.多视图页面 section data-role="page" id="Firstview" data-tITle="第一个视图">

2.视图切换动画 a href="#secondview" data-rel="diaLOG" data-transition="pop"> pop slide slideup slidedown fade flip
3.dialog 对话框 a href="#secondview" data-rel="dialog" data-transition="pop">

4.页面主题  section data-role="page" id="firstview" data-title="第一个视图" data-theme="a">

!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>
    section data-role="page" id="firstview" data-title="第一个视图" data-theme="a">
        header data-role="header" data-theme="b"> h1> 第一个视图/h1> /header>
        article data-role="content"> a href="#secondview" data-rel="dialog" data-transition="pop"> 切换到第二个View/a> /article>
        footer data-role="footer" data-theme="c"> h1> 页脚/h1> /footer>
    /section>

    section data-role="page" id="secondview" data-title="第二个视图">
      header data-role="header"> 第二个视图/header>
      article data-role="content"> a href="#firstview" data-transition="flip"> 切换到第一个View/a> /article>
      footer data-role="footer"> 页脚/footer>
    /section>
  /body>
/html>

1.多视图页面 section data-role="page" id="firstview" data-title="第一个视图">

2.视图切换动画 a href="#secondview" data-rel="dialog" data-transition="pop"> pop slide slideup slidedown fade flip
3.dialog 对话框 a href="#secondview" data-rel="dialog" data-transition="pop">

4.页面主题  section data-role="page" id="firstview" data-title="第一个视图" data-theme="a">

!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>
    section data-role="page" id="firstview" data-title="第一个视图" data-theme="a">
        header data-role="header" data-theme="b"> h1> 第一个视图/h1> /header>
        article data-role="content"> a href="#secondview" data-rel="dialog" data-transition="pop"> 切换到第二个View/a> /article>
        footer data-role="footer" data-theme="c"> h1> 页脚/h1> /footer>
    /section>

    section data-role="page" id="secondview" data-title="第二个视图">
      header data-role="header"> 第二个视图/header>
      article data-role="content"> a href="#firstview" data-transition="flip"> 切换到第一个View/a> /article>
      footer data-role="footer"> 页脚/footer>
    /section>
  /body>
/html>

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！