Page jQuery Mobile
Commencez à apprendre jQuery Mobile
 | 尽管jQuery Mobile兼容所有的移动设备，但是并不能完全兼容PC机（由于有限的CSS3支持）。 为了更好的阅读本教程，建议您使用 Google Chrome 浏览器。 |
|---|
Exemples
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>我现在是一个移动端开发者!!</p> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Analyse de l'instance :
data-role="page" est la page affichée dans le navigateur.
data-role="header" est une barre d'outils créée en haut de la page (généralement utilisée pour les titres ou les boutons de recherche)
data- role="main" définit le contenu de la page, tel que le texte, les images, les formulaires, les boutons, etc.
La classe "ui-content" est utilisée pour ajouter du remplissage et des marges à la page.
data-role="footer" est utilisé pour créer une barre d'outils en bas de page.
Dans ces conteneurs, vous pouvez ajouter n'importe quel élément HTML - paragraphes, images, titres, listes, etc.
| jQuery Mobile 依赖 HTML5 data-* 属性来支持各种 UI 元素、过渡和页面结构。不支持它们的浏览器将以静默方式弃用它们。 |
|---|
Ajoutez jQuery Mobile à votre page
Avec jQuery Mobile, vous pouvez créer plusieurs pages différentes à partir d'un seul fichier HTML.
Vous pouvez utiliser différents attributs href pour distinguer les pages en utilisant le même identifiant unique :
Exemple
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>欢迎! 点击以下链接跳转到第二个页面。 </p> <a href="#pagetwo">跳转到第二个页面</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>这是第二个页面。点击以下链接跳转到第一个页面。</p> <a href="#pageone">跳转到第一个页面</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Remarque : Lorsque l'application Web contient une grande quantité de contenu (texte, images, scripts, etc.) Cela affectera sérieusement le temps de chargement. Si vous ne souhaitez pas utiliser de liens de page internes, vous pouvez utiliser des fichiers externes :
<a href="externalfile.html">访问外部文件</a>
La page est utilisée comme boîte de dialogue La boîte de dialogue
est utilisée pour afficher. informations sur la page ou informations sur le formulaire de saisie.
Ajoutez data-rel="dialog" au lien pour permettre à une boîte de dialogue d'apparaître lorsque l'utilisateur clique sur le lien :
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>欢迎!</p> <a href="#pagetwo">弹出对话框</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> <div data-role="page" data-dialog="true" id="pagetwo"> <div data-role="header"> <h1>我是一个对话框！</h1> </div> <div data-role="main" class="ui-content"> <p>对话框与普通页面不同，它显示在当期页面上, 但又不会填充完整的页面，顶部图标 "X" 用于关闭对话框。</p> <a href="#pageone">跳转到第一个页面</a> </div> <div data-role="footer"> <h1>对话框底部文本</h1> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
