jqueryMobile

页面结构

data-role="page"代表一个页面

data-role="header"代表一个页面标题和搜索按钮

  • data-role="page" 是显示在浏览器中的页面
  • data-role="header" 创建页面上方的工具栏(常用于标题和搜索按钮)
  • data-role="content" 定义页面的内容,比如文本、图像、表单和按钮,等等
  • data-role="footer" 创建页面底部的工具栏
  • <div data-role="page" id="pageone">
      <div data-role="content">
        <a href="#pagetwo" data-rel="dialog">转到页面二</a>
      </div>
    </div>
    
    <div data-role="page" id="pagetwo">
      <div data-role="content">
        <a href="#pageone">转到页面一</a>
      </div>
    </div>
  • 上面 data-rel="dialog"以对话框的形式回到页面二

   过渡效果

<a href="#pagetwo" data-transition="slide" >表示滑动到page2

fade 默认。淡入淡出到下一页。 测试
flip 从后向前翻动到下一页。 测试
flow 抛出当前页面,引入下一页。 测试
pop 像弹出窗口那样转到下一页。 测试
slide 从右向左滑动到下一页。 测试
slidefade 从右向左滑动并淡入到下一页。 测试
slideup 从下到上滑动到下一页。 测试
slidedown 从上到下滑动到下一页。 测试
turn 转向下一页。 测试
none 无过渡效果。
原文地址:https://www.cnblogs.com/yaomengli/p/6722973.html