首页 > 代码库 > 页面多语言解决办法
页面多语言解决办法
不罗嗦，直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery Lang JS Module Test Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://www.mamicode.com/js/js.cookie.js" charset="utf-8" type="text/javascript"></script>
<script src="http://www.mamicode.com/js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>
<!--<script src="http://www.mamicode.com/js/langpack/nonDynamic.js" charset="utf-8" type="text/javascript"></script>-->
<script type="text/javascript">
var lang = new Lang();
lang.dynamic(‘th‘, ‘js/langpack/th.json‘);
lang.init({
defaultLang: ‘en‘
});
</script>
<style>
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
#langChanger {
margin-bottom: 10px;
}
.sectionTitle {
font-weight: bold;
font-size: 14px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<a href="http://flattr.com/thing/352558/jQuery-Multi-Language-Site-Plugin" target="_blank">
<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this"
border="0"/></a><BR/><BR/>
<div id="langChanger"><a href="http://www.mamicode.com/#" onclick="window.lang.change(‘en‘); return false;">Switch to English</a> | <a href="http://www.mamicode.com/#"
onclick="window.lang.change(‘th‘); return false;">Switch
to Thai</a></div>
<div id="testHtml">
<div id="searchTitle" class="sectionTitle" lang="en">Property Search</div>
<div id="searchForm">
<form action="/api/search" method="post" enctype="multipart/form-data">
<table>
<tr>
<td><span lang="en">Location</span>:</td>
</tr>
<tr>
<td><input type="text" name="location"/></td>
</tr>
<tr>
<td>
<hr/>
</td>
</tr>
<tr>
<td><span lang="en">Budget</span> (with placeholder text):</td>
</tr>
<tr>
<td><input lang="en" type="text" name="budgetFrom" placeholder="Budget"/></td>
</tr>
<tr>
<td><input lang="en" type="text" name="budgetTo" placeholder="Budget"/></td>
</tr>
<tr>
<td>
<hr/>
</td>
</tr>
<tr>
<td><span lang="en">Min Beds</span>:</td>
</tr>
<tr>
<td>
<select name="minBeds">
<option value="http://www.mamicode.com/0">0</option>
<option value="http://www.mamicode.com/1">1</option>
<option value="http://www.mamicode.com/2">2</option>
<option value="http://www.mamicode.com/3">3</option>
<option value="http://www.mamicode.com/4">4</option>
<option value="http://www.mamicode.com/5">5</option>
<option value="http://www.mamicode.com/6+">6+</option>
</select>
</td>
</tr>
<tr>
<td>
<hr/>
</td>
</tr>
<tr>
<td><span lang="en">Property Type</span>:</td>
</tr>
<tr>
<td>
<select name="type">
<option value="http://www.mamicode.com/all" lang="en">Show All</option>
<option value="http://www.mamicode.com/house" lang="en">House</option>
<option value="http://www.mamicode.com/townhouse" lang="en">Town House</option>
<option value="http://www.mamicode.com/apartment" lang="en">Apartment</option>
<option value="http://www.mamicode.com/condo" lang="en">Condominium</option>
<option value="http://www.mamicode.com/commercial" lang="en">Commercial</option>
<option value="http://www.mamicode.com/office" lang="en">Office</option>
<option value="http://www.mamicode.com/storage" lang="en">Storage</option>
<option value="http://www.mamicode.com/land" lang="en">Land</option>
</select>
</td>
</tr>
<tr>
<td>
<hr/>
</td>
</tr>
<tr>
<td><span lang="en">Added In</span>:</td>
</tr>
<tr>
<td>
<select name="added">
<option value="http://www.mamicode.com/anytime" lang="en">Anytime</option>
<option value="http://www.mamicode.com/24hours" lang="en">Last 24 Hours</option>
<option value="http://www.mamicode.com/3days" lang="en">Last 3 Days</option>
<option value="http://www.mamicode.com/week" lang="en">Last Week</option>
<option value="http://www.mamicode.com/month" lang="en">Last Month</option>
</select>
</td>
</tr>
<tr>
<td>
<textarea placeholder="Anytime" lang="en"></textarea>
</td>
</tr>
<tr>
<td>
<div lang="en">Last Month <b>Moo</b> Anytime</div>:<br><BR>
<div lang="en">Last Month <b>Moo</b> Anytime</div>
</td>
</tr>
<tr>
<td>
<input type="button">:
<input type="button" value="http://www.mamicode.com/Search..." lang="en"/>
</td>
</tr>
<tr>
<td>
<button>:
<button type="button" lang="en"/>
Search...</button>
</td>
</tr>
<tr>
<td>
<reset>:
<button type="reset" lang="en"/>
Search...</button>
</td>
</tr>
<tr>
<td>
<img>:
<img lang="en" data-lang-token="FLAG" src="http://www.ioling.org/images/flags/uk.gif"/>
</td>
</tr>
<tr>
<td>
<a>:
<a lang="en" href="http://www.google.com/">http://www.google.com/</a>
</td>
</tr>
<tr>
<td>
Click to test alert text:
<input type="button" value="http://www.mamicode.com/Alert!" onclick="alert(window.lang.translate(‘Property Search‘));"/>
</td>
</tr>
<tr>
<td>
Click to test loading dynamic content:
<input type="button" value="http://www.mamicode.com/Load Dynamic..."
onclick="$(‘#dyn-target‘).append(‘Something Budget <span lang=\‘en\‘>Something Budget</span>‘);"/>
<div id="dyn-target" lang="en"></div>
</td>
</tr>
<tr>
<td>
Long text translation with a custom defined token(data-lang-token attribute):<br>
<div lang="en" data-lang-token="lorem">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in ...</div>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
其中比较重要的是使用到了
<script src="http://www.mamicode.com/js/js.cookie.js" charset="utf-8" type="text/javascript"></script>
<script src="http://www.mamicode.com/js/jquery-lang.js" charset="utf-8" type="text/javascript"></script> 这两个jquery文件
附上源码和学习多语言网页的地址:https://github.com/Irrelon/jquery-lang-js
页面多语言解决办法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。