jquery Mobile の入門 — 複数のページ切り替えの学習 Examples_jquery
May 16, 2016 pm 05:44 PM
mobile
ページ切り替え
1. JQuery Mobile では、<a> 要素を使用して、
2. 複数ページ切り替えのサンプルコード :
コードをコピー コードは次のとおりです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
< ;TITLE> 新しいドキュメント
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link href="Css/ jquery.mobile- 1.2.0.min.css" rel="スタイルシート" type="text/css"/>
<script src="Js/jquery-1.8.3.min.js" type" text/javascript" ></script>
<script src="Js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
</ HEAD>
<BODY>
<section id="page1" data-role="page"> h1>JQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>これはホームページです</p> ><p><a href="#page2">詳細ページ</a></p>
</div>
<footer data-role="footer"> <h1>著作権: 3I Studio</h1></footer>
</section>
<section id="page2" data-role="page"> header data-role="header"><h1>JQuery Mobile</h1></header>
<div data-role="content" class="content"> p> ;詳細ページです</p>
<p><a href="#page1">ホームページに戻る</a></p> 🎜 ><footer data-role="footer"><h1>3I Studio Copyright</h1></footer>
</BODY> ;/HTML>
3. レンダリング プレビュー
:
詳細ページをクリックすると別のページに切り替わります:
4. 内部リンク
コードをコピー
コードは次のとおりです:
<a href=" a1.html" rel="external">詳細ページ</a> 5. アニメーション効果のあるページを切り替えるには <a> -transition 属性にデータを追加します。例:
コードをコピー
コードは次のとおりです:
<a href=" a1.html" rel="external" data-transition="pop">詳細ページ</a> //ポップアップ効果のあるページを開きますslide: 右から左にスライド アニメーション効果 Pop: ポップアップ効果でページを開きます slideup: 上にスライドするアニメーション効果 slidedown: 下にスライドするアニメーション効果
フェード: グラデーションフェード効果 フリップ: 飛び込み
の効果
の効果
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気の記事
2つのポイント博物館：バングルワシュタランドロケーションガイド
4週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前
By DDD
レポ：チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
人気の記事
2つのポイント博物館：バングルワシュタランドロケーションガイド
4週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前
By DDD
レポ：チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ホットな記事タグ
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Gmailメールのログイン入り口はどこですか？
7121
9
7121
9
Java チュートリアル
1534
14
1534
14
Laravel チュートリアル
1256
25
1256
25
PHP チュートリアル
1205
29
1205
29
CakePHP チュートリアル
1153
46
1153
46
Yaber T2 (Plus): フル HD 解像度、バッテリー、JBL サウンド、スマート機能を備えたコンパクト プロジェクター
Jun 27, 2024 am 10:31 AM
Yaber T2 (Plus): フル HD 解像度、バッテリー、JBL サウンド、スマート機能を備えたコンパクト プロジェクター
ルーティングを使用して Vue プロジェクトでページ切り替えアニメーション効果をカスタマイズするにはどうすればよいですか?
Jul 21, 2023 pm 02:37 PM
ルーティングを使用して Vue プロジェクトでページ切り替えアニメーション効果をカスタマイズするにはどうすればよいですか?
Vue でページ切り替えを実現するためにトランジション効果を使用するためのヒントとベスト プラクティス
Jun 25, 2023 am 10:53 AM
Vue でページ切り替えを実現するためにトランジション効果を使用するためのヒントとベスト プラクティス
Vueドキュメントにおけるページ切り替えトランジションエフェクト機能の応用
Jun 20, 2023 am 09:01 AM
Vueドキュメントにおけるページ切り替えトランジションエフェクト機能の応用
Vue プロジェクトでルーティングを使用してページ切り替え効果を実現するにはどうすればよいですか?
Jul 21, 2023 pm 07:07 PM
Vue プロジェクトでルーティングを使用してページ切り替え効果を実現するにはどうすればよいですか?
