Jquery-mobile-jqm-pre-rendered-popup-markup
提供:Dev Guides
jQuery Mobile-事前レンダリングされたポップアップマークアップ
説明
ポップアップで事前にレンダリングされたマークアップを使用して、起動時間を節約できます。
例
次の例は、jQuery Mobile Frameworkでの_popup pre-rendered markup_の使用を示しています。
<!DOCTYPE html>
<html>
<head>
<title>Popup Pre-rendered Markup</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page">
<div data-role = "header">
<h2>Pre-rendered Popup Markup</h2>
</div>
<div role = "main" class = "ui-content">
<a href = "#pre-rendered" data-rel = "popup" class = "ui-btn ui-btn-inline">
Open Popup</a>
</div>
<div id = "pre-rendered-screen" class = "ui-popup-screen ui-screen-hidden"></div>
<div id = "pre-rendered-popup" class = "ui-popup-container fade ui-popup-hidden
ui-body-inherit ui-overlay-shadow">
<div id = "pre-rendered" class = "ui-popup" data-role = "popup"
data-transition = "slideup">
<p>Welcome to finddevguides...</p>
</div>
</div>
<div data-role = "footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>
出力
上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-
- 上記のhtmlコードを jqm_pre-rendered_popup_markupl ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp://localhost/jqm_pre-rendered_popup_markuplとして開くと、次の出力が表示されます。