jQuery Mobileページをどのように継承するか

2年 ago
陽, 向宇
1 minute

jQuery Mobileのページ継承は、data-role=”page”属性を付加することで実現できます。

HTMLページにjQueryとjQuery Mobileのライブラリファイルをインクルードします。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>

ベースページを継承するテンプレートとして作成し data-role=”page” 属性を設定して ID でページを識別します。

<div data-role="page" id="basePage">
<div data-role="header">
<h1>基础页面</h1>
</div>
<div data-role="content">
<p>这是基础页面的内容。</p>
</div>
<div data-role="footer">
<h4>版权信息</h4>
</div>
</div>

基底ページを受け継ぐ新しいページを作成するには、新しいページの div 要素に data-role=”page” 属性を使用し、data-url 属性に、基底ページの id を設定するだけです。

<div data-role="page" data-url="newPage">
<div data-role="header">
<h1>新页面</h1>
</div>
<div data-role="content">
<p>这是新页面的内容。</p>
</div>
<div data-role="footer">
<h4>版权信息</h4>
</div>
</div>

こうすることで、新規ページはベースページの構造やスタイルを継承します。

ボタンやナビゲーションバーなどのさらに多くのコンポーネントをこのページに追加して、よりリッチな機能を実現できます。

継承ページ上でも、元ページの内容、タイトル文章、本文などを書き換えることができます。

記載している内容が、あなたの参考になれば幸いです。

bannerAds