Home > Article > Web Front-end > Detailed explanation of using jQuery Mobile custom tags
Detailed explanation of using jQuery Mobile custom tags
- php中世界最好的语言Original
- 2018-04-26 11:43:042150browse
This time I will bring you a detailed explanation of the use of jQuery Mobile custom tags. What are the precautions when using jQuery Mobile custom tags? Here are practical cases, let’s take a look.
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, we discussed 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 finally A drop-down option has been customized, and 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>
<p data-role="page" id="pageWel" data-title="脚本">
<p 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>
</p>
<p role="main" class="ui-content">
欢迎大家关注脚本之家
</p>
<p 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>
</p>
</p>
</body>
</html>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
Detailed explanation of the steps to implement cross-domain asynchronous file upload with Jquery
Mobile framework development steps for mobile Web App Detailed explanation
The above is the detailed content of Detailed explanation of using jQuery Mobile custom tags. For more information, please follow other related articles on the PHP Chinese website!