Tutoriel jQuery...login
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Tutoriel jQuery Mobile Classique
auteur：php.cn  temps de mise à jour：2022-04-11 13:58:34

Thèmes jQuery Mobile


jQuery Mobile propose 2 styles de thème différents, de "a" à "b" - les boutons, barres d'outils, blocs de contenu, etc. de chaque thème ne sont pas cohérents en couleur. Les effets visuels ne le sont pas non plus. différent.

Vous pouvez personnaliser l'apparence de l'application en définissant l'attribut data-theme de l'élément :

<a href="#" class="ui-btn ui-btn-a|b">按钮</a>

< /tr>< tr>
ValeurDescriptionInstanceaLa page est sur fond gris avec du texte noir
值描述实例
a页面为灰色背景黑色文字
头部与底部均为灰色背景黑色文字
按钮为灰色背景黑色文字
激活的按钮和链接为白色文本蓝色背景
input 输入框中 placeholder 属性值为浅灰色，value 值为黑色		尝试一下
b页面为黑色背景白色文字
头部与底部均为黑色背景白色文字
按钮为白色文字木炭背景
激活的按钮和链接为白色文本蓝色背景
input 输入框中 placeholder 属性值为浅灰色，value 值为白色		尝试一下
La tête et le bas sont tous deux sur fond gris avec du texte noir

Les boutons sont allumés un fond gris avec du texte noir

Les boutons et liens activés sont en texte blanc et fond bleu
La valeur de l'attribut d'espace réservé dans la zone de saisie est gris clair et la valeur est noire		Essayez-le out
bLa page a un fond noir et un texte blanc
lamp"a" 主题的样式用于大多数元素，子元素通常继承父元素的样式。
La tête et le bas ont un fond noir et un texte blanc<🎜>Le les boutons ont du texte blanc et un fond anthracite<🎜>Les boutons et liens activés ont du texte blanc et un fond bleu<🎜>entrée La valeur de l'attribut d'espace réservé dans la zone de saisie est gris clair et la valeur de la valeur est blanche		 Essayez-le
<🎜>Utilisez class="ui- pour le style de bouton btn", utilisez la classe "ui-btn-a|b" pour définir le bouton en gris (par défaut) ou noir : <🎜>
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
<🎜><🎜>

En-tête et bas du thème


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" data-theme="b">
    <h1>页面头部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>文本内容</p>
    <a href="#" class="ui-btn">按钮</a>
    <p>插入 <a href="#">链接</a> !</p>
  </div>

  <div data-role="footer" data-theme="b">
    <h1>页面底部</h1>
  </div>
</div> 


</body>
</html>

Instance en cours d'exécution »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Le bas de l'en-tête de la boîte de dialogue du thème

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" class="ui-btn">跳转到页面二</a>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 

<div data-role="page" data-dialog="true" id="pagetwo">
  <div data-role="header" data-theme="b">
    <h1>主题对话框!</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>我是一个主题对话框 - 我的头部和底部是黑色的!</p>
    <a href="#pageone" class="ui-btn ui-btn-inline">跳转到页面一</a>
  </div>

  <div data-role="footer" data-theme="b">
    <h1>对话框底部文本</h1>
  </div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Bouton Thème

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="#" class="ui-btn">灰色按钮 (默认)</a>
    <a href="#" class="ui-btn ui-btn-b">黑色按钮</a>
    <br>
  
    <p>内联按钮:</p>
    <a href="#" class="ui-btn ui-btn-inline">灰色按钮 (默认)</a>
    <a href="#" class="ui-btn ui-btn-inline ui-btn-b">黑色按钮</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

Icône du thème

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="main" class="ui-content">
    <a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-search ui-btn-icon-notext">Search</a>
    <a href="#" class="ui-btn ui-btn-b ui-shadow ui-corner-all ui-icon-search ui-btn-icon-notext">Search</a>
  </div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Fenêtre pop-up du thème

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">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-b ui-btn-inline ui-corner-all">Show Popup</a>

    <div data-role="popup" id="myPopup" class="ui-content" data-theme="b">
      <a href="#" data-rel="back" class="ui-btn ui-btn-a ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
      <p>我是主题弹窗!.</p>
      <p>在我右上角有个关闭按钮</p>
      <p><b>提示：</b> 你可以点击弹窗的外部区域来关闭弹窗。</p>
    </div>
  </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

Boutons de thème d'en-tête et du bas


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">
  <div data-role="header">
    <a href="#" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a>
    <h1>欢迎访问我的主页</h1>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a>
  </div>

  <div data-role="main" class="ui-content">
    <p>以下按钮仅仅是用于演示，不会有任何效果。</p>
  </div>

  <div data-role="footer" style="text-align:center;">
    <div data-role="controlgroup" data-type="horizontal">
      <a href="#" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook上关注我</a>
      <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a>
      <a href="#" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a>
    </div>
  </div>
</div>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Barre de navigation du thème


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>导航栏将会主动基础父元素的样式。可以通过添加 data-theme 属性来自定义按钮样式。</p>
  </div>

  <div data-role="footer" data-theme="b">
  <h1>Insert Footer Text Here</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-icon="home" data-theme="a">Button 1</a></li>
        <li><a href="#" data-icon="arrow-r">Button 2</a></li>
        <li><a href="#" data-icon="arrow-r">Button 3</a></li>
        <li><a href="#" data-icon="search" data-theme="a">Button 4</a></li>
      </ul>
    </div>   
  </div>
</div> 

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Panneau thématique

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="panel" id="myPanel" data-theme="b"> 
    <h2>主题面板</h2>
    <p>我是一个主题面板!</p>
    <p> 你可以点击面板之外的区域来关闭，或者按下 Esc 键或滑动来关闭。</p>
  </div> 

  <div data-role="header">
    <h1>页面头部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>点击以下按钮打开面板。</p>
    <a href="#myPanel" class="ui-btn ui-btn-b ui-btn-inline ui-corner-all ui-shadow">打开面板</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

Boutons et contenu pliables du thème

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">
    <div data-role="collapsible" data-theme="b" data-content-theme="b">
      <h1>点我 - 我是可折叠的！</h1>
      <p>我是折叠的内容</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>文本底部</h1>
  </div>
</div> 

</body>
</html>

Instance en cours d'exécution»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

sujet list

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="main" class="ui-content">
   <h2>有序列表</h2>
    <ol data-role="listview" data-theme="b">
      <li><a href="#">List Item</a></li>
      <li><a href="#">List Item</a></li>
      <li data-theme="a"><a href="#">List Item</a></li>
      <li><a href="#">List Item</a></li>
    </ol>
    <br>
   <h2>无序列表</h2>
    <ul data-role="listview">
      <li><a href="#">List Item</a></li>
      <li data-theme="b"><a href="#">List Item</a></li>
      <li data-theme="b"><a href="#">List Item</a></li>
      <li><a href="#">List Item</a></li>
    </ul>
    <br>
  </div>
</div> 

</body>
</html>

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Bouton de partage de sujet

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="main" class="ui-content">
     <h2>分割按钮实例</h2>
    <ul data-role="listview" data-inset="true" data-split-theme="b">
      <li data-role="divider" data-theme="a">浏览器</li>
      <li>
        <a href="#">
        <img src="chrome.png">
        <h2>Google Chrome</h2>
        <p>Google Chrome 是一款免费的开源浏览器。发布于 2008 年。</p>
        </a>
        <a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a>
      </li>
      <li>
        <a href="#">
        <img src="firefox.png">
       	<h2>Mozilla Firefox</h2>
        <p>Firefox 是一款来自 Mozilla。发布于 2004 年。</p>
        </a>
        <a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a>
      </li>
    </ul>
  </div>
</div> 

<div data-role="page" id="download">
  <div data-role="main" class="ui-content">
  <h3>分割按钮实例</h3>
    <p>下面的按钮仅供演示。</p>
    <a href="#" class="ui-btn ui-btn-b ui-btn-inline ui-shadow ui-corner-all ui-mini ui-icon-check ui-btn-icon-left" data-rel="back">下载</a>
    <a href="#" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-mini ui-icon-delete ui-btn-icon-left" data-rel="back">取消</a>
  </div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton Bouton "Exécuter l'instance" pour afficher l'instance en ligne

Liste pliable des thèmes

Instances

<!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">
    <div data-role="collapsible" data-theme="b" data-content-theme="b">
    <h4>A</h4>
    <ul data-role="listview">
      <li><a href="#">Adele</a></li>
      <li><a href="#">Agnes</a></li>
    </ul>
  </div>

  <div data-role="collapsible" data-theme="b" data-content-theme="a">
    <h4>B</h4>
    <ul data-role="listview">
       <li><a href="#">Billy</a></li>
       <li><a href="#">Bob</a></li>
    </ul>
    </div>
  </div>

  <div data-role="footer">
  <h1>此处是页脚文本</h1>
  </div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur "Exécuter l'instance" Bouton Afficher l'instance en ligne

Formulaire de thème

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">
  <form method="post" action="demoform.asp">
  <div class="ui-fieldcontain">
    <label for="name">全名:</label>
    <input type="text" name="text" id="name" placeholder="你的名字.." data-theme="b">
    <br><br>
  
    <label for="search">您需要搜索什么？</label>
    <input type="search" name="search" id="search" placeholder="搜索内容..">
    <br><br>
 
    <label for="colors">请选择喜爱的颜色：</label>
    <select id="colors" name="colors" data-theme="b">
      <option value="red">红色</option>
      <option value="green">绿色</option>
      <option value="blue">蓝色</option>
    </select>
    <br><br>
 
     <label for="switch">切换开关:</label>
       <input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-theme="b">
     <br><br>
  
    <div data-role="controlgroup">
      <legend>请选择喜爱的电影:</legend>
      <label for="mov1">蜘蛛侠</label>
	   <input type="checkbox" name="mov1" id="mov1" data-theme="a">
	   <label for="mov2">变形金刚</label>
	   <input type="checkbox" name="mov2" id="mov2" data-theme="b">
    </div>
  </div>
  </form>
  </div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Formulaire pliable de thème

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">
    <div data-role="collapsible" data-theme="b" data-content-theme="b">
    <h4>A</h4>
    <ul data-role="listview">
      <li><a href="#">Adele</a></li>
      <li><a href="#">Agnes</a></li>
    </ul>
  </div>

  <div data-role="collapsible" data-theme="b" data-content-theme="a">
    <h4>B</h4>
    <ul data-role="listview">
       <li><a href="#">Billy</a></li>
       <li><a href="#">Bob</a></li>
    </ul>
    </div>
  </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

Ajouter un nouveau thème

jQuery Mobile peut être ajouté sur la page mobile Nouveau thème.

Ajoutez ou modifiez un nouveau thème en modifiant le fichier CSS (si vous avez téléchargé jQuery Mobile). Il vous suffit de copier le module de style, puis de commander à nouveau le nom de la classe de lettres (c-z) et d'ajouter vos couleurs et polices préférées au style.

Vous pouvez également ajouter un nouveau style de thème dans le document HTML, ajouter la classe de barre d'outils : ui-bar-(a-z), ajouter la classe de contenu texte : ui-body-(a-z), ajouter le classe de page : ui -page-theme-(a-z) .

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>
<style>
.ui-bar-f {
    color: red;
    background-color: yellow;
}

.ui-body-f {
    font-weight: bold;
    color: white;
    background-color: purple;
}

.ui-page-theme-f {
    font-weight: bold;
    background-color: green;
}
</style>
</head>
<body>

<div data-role="page" data-theme="f">
  <div data-role="header" data-theme="f">
    <h1>应用 "f" 主题的标题样式</h1>
  </div>

  <div data-role="main" class="ui-content ui-body-f">
    <p>应用新的 "f" 主题的内容样式！</p>
  </div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

NoteDans les versions précédentes de jQuery Mobile, JavaScript était utilisé pour hériter des styles de thème parent pour les éléments. Après la version 1.4, le framework accorde plus d'attention à l'amélioration des performances et n'utilise plus JavaScript pour l'héritage, mais utilise du CSS pur.
Note在之前的 jQuery Mobile 版本中, 使用 JavaScript 来为元素继承父主题样式。到了 1.4 版本后，框架更注重性能上的提升，已不再使用 JavaScript 来继承，而是使用纯 CSS。

jQuery Mobile 团队为此已经创建了一个工具，地址为 ThemeRoller。你可以使用该工具来升级旧的主题，使其兼容新的版本。
L'équipe jQuery Mobile a créé un outil pour cela sur ThemeRoller. Vous pouvez utiliser cet outil pour mettre à niveau les anciens thèmes afin de les rendre compatibles avec les versions plus récentes.
<🎜><🎜>

Site Web PHP chinois

MaisonMaisonCoursCoursArticleArticleQuestions et réponsesQuestions et réponsesDictionnaireDictionnaireManuelManuelTéléchargerTéléchargerrechercherechercheAPPTélécharger APPTélécharger