recherche

Maison >interface Web >js tutoriel >Explication détaillée du tag_jquery personnalisé jQuery Mobile

Explication détaillée du tag_jquery personnalisé jQuery Mobile

WBOY
WBOYoriginal
2016-05-16 15:21:391089parcourir

Cet article explique les balises personnalisées jQuery Mobile avec des exemples et les partage avec vous pour votre référence. Le contenu spécifique est le suivant
Lors de la planification des besoins d’internationalisation des produits, cela implique le Web PC, le Web mobile et diverses applications. Plusieurs versions du Web mobile ont été conçues, dont aucune n’est idéale.
Étant donné que le Web mobile utilise le framework jQuery Mobile, une discussion a eu lieu sur les endroits où il serait plus raisonnable de changer de langue. Je ne mentionnerai pas le processus de discussion et les multiples plans. Jetons d'abord un coup d'œil à l'effet final :
.

Est-ce que cela semble très expérimenté ? Je l'ai essayé plusieurs fois au début et j'ai finalement personnalisé une option déroulante. Le code est le suivant : 

<!DOCTYPE html> 
<html> 
<head> 
  <title>jQuery Mobile</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <meta http-equiv="Expires" content="0"> 
  <meta http-equiv="Pragma" content="no-cache"> 
  <meta http-equiv="Cache-control" content="no-cache, must-revalidate"> 
  <meta http-equiv="Cache" content="no-cache"> 
  <link rel="stylesheet" href="jQuery/jquery.mobile-1.4.4.min.css" type="text/css"> 
  <script type="text/javascript" src="jQuery/jquery-1.8.3.min.js"></script> 
  <script type="text/javascript" src="jQuery/jquery.mobile-1.4.4.min.js"></script> 
  <script type="text/javascript" src="jQuery/jquery.cookie.js"></script> 
  <script type="text/javascript" src="jQuery/jquery.i18n.properties-min-1.0.9.js"></script> 
  <style type="text/css"> 
    .comFooter{ 
      position: absolute; bottom: 0; left:0; height: 40px; width: 100%; 
    } 
  </style> 
</head> 
<body> 
  <div data-role="page" id="pageWel" data-title="脚本"> 
    <div data-role="header" data-theme="b"> 
      <a href="#" data-role="button" class="ui-btn-left" data-icon="check">测试</a> 
      <h1 class="title" data-i18n="global_title"> 
        脚本之家
      </h1> 
      <!-- 具体代码 --> 
      <a href="javascript:void(0);" data-role="none" aria-haspopup="true" class="ui-btn-right"> 
        <select class="hupu_i18n_select" data-icon="check" data-role="button" data-inline="false" data-native-menu="false"> 
          <option value="zh-CN">简体中文</option> 
          <option value="zh-TW">繁體中文</option> 
          <option value="en">English</option> 
          <option value="ja">日本語の</option> 
        </select> 
      </a> 
      </div> 
    <div role="main" class="ui-content"> 
      欢迎大家关注脚本之家 
    </div> 
    <div data-role="footer" data-theme="b" class="comFooter"> 
      <span style="height: 40px; line-height: 40px; text-align: center; display: block; font-size: 9px;">1213456</span> 
    </div> 
  </div> 
</body> 
</html>

Ce qui précède est l'introduction pertinente aux balises personnalisées jQuery Mobile. J'espère qu'il sera utile à tout le monde de comprendre les balises personnalisées jQuery Mobile.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Un moyen simple de comparer les tailles de date dans les compétences javascript_javascriptArticle suivant：Un moyen simple de comparer les tailles de date dans les compétences javascript_javascript

Articles Liés

Voir plus