Detailed explanation of jQuery Mobile custom tag

Detailed explanation of jQuery Mobile custom tag_jquery

WBOY

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

Original

1079 people have browsed it

This article explains jQuery Mobile custom tags with examples and shares them with you for your reference. The specific content is as follows
When planning product internationalization needs, it involves PC Web, mobile Web, and various apps. Multiple versions of the mobile web have been designed, none of which are ideal.
Since the mobile Web uses the jQuery Mobile framework, there was a discussion on where it would be more reasonable to switch languages. I won’t mention the discussion process and multiple plans. Let’s take a look at the final effect first:

Does it feel very experienced? I tried it many times at the beginning and finally customized a drop-down option. The code is as follows:

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

Copy after login

The above is the relevant introduction to jQuery Mobile custom tags. I hope it will be helpful for everyone to understand jQuery Mobile custom tags.