Detaillierte Erläuterung der benutzerdefinierten tag_jquery von jQuery Mobile-js-Tutorial-php.cn

Detaillierte Erläuterung der benutzerdefinierten tag_jquery von jQuery Mobile

WBOY

Freigeben： 2016-05-16 15:21:39

Original

1079 Leute haben es durchsucht

In diesem Artikel werden benutzerdefinierte jQuery Mobile-Tags anhand von Beispielen erläutert und als Referenz für Sie bereitgestellt. Der spezifische Inhalt lautet wie folgt:
Bei der Planung von Produktinternationalisierungsanforderungen werden PC-Web, mobiles Web und verschiedene Apps einbezogen. Es wurden mehrere Versionen des mobilen Webs entwickelt, von denen keine ideal ist.
Da das mobile Web das jQuery Mobile-Framework nutzt, gab es eine Diskussion darüber, wo es sinnvoller wäre, die Sprache zu wechseln. Ich werde den Diskussionsprozess und die verschiedenen Pläne nicht erwähnen. Werfen wir zunächst einen Blick auf den endgültigen Effekt:

Fühlt es sich sehr erfahren an? Ich habe es am Anfang viele Male ausprobiert und schließlich eine Dropdown-Option angepasst. Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Das Obige ist die relevante Einführung in die benutzerdefinierten Tags von jQuery Mobile. Ich hoffe, dass es für alle hilfreich ist, die benutzerdefinierten Tags von jQuery Mobile zu verstehen.