「jQuery Mobile」data-transition=”fade”でページ遷移を行うサンプル

2020年8月17日

構文
<a href="#pageNext" data-transition="fade">pageNext</a>

サンプルコード

<div data-role="page" id="pageFirst">
  <div data-role="header">
    <h1>welcome to AAA </h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>111</p>
    <a href="#pageSecond" data-transition="fade">222</a>
  </div>

  <div data-role="footer">
    <h1>333</h1>
  </div>
</div> 

<div data-role="page" data-dialog="true" id="pageSecond">
  <div data-role="header">
    <h1>444</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>test data is </p>
  </div>
  <div data-role="footer">
    <h1>4444</h1>
  </div>
</div>