|
|
@@ -0,0 +1,69 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <title>i18n Enhance</title>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"/>
|
|
|
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css"/>
|
|
|
+
|
|
|
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
|
|
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
|
|
|
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/locale/bootstrap-table-zh-TW.min.js"></script>
|
|
|
+
|
|
|
+ <script src="bootstrap-table-i18n-enhance.js"></script>
|
|
|
+ <script>
|
|
|
+ $(function () {
|
|
|
+ var $table = $("#table"),
|
|
|
+ $buttons = $("button");
|
|
|
+
|
|
|
+ $("#tw_Btn").click(function () {
|
|
|
+ $buttons.removeClass("active");
|
|
|
+ $(this).addClass("active");
|
|
|
+
|
|
|
+ $table.bootstrapTable("changeLocale", "zh-TW");
|
|
|
+ $table.bootstrapTable("changeTitle", {
|
|
|
+ id: "代碼",
|
|
|
+ name: "項目名稱",
|
|
|
+ price: "項目金額"
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ $("#us_Btn").click(function () {
|
|
|
+ $buttons.removeClass("active");
|
|
|
+ $(this).addClass("active");
|
|
|
+
|
|
|
+ $table.bootstrapTable("changeLocale", "en_US");
|
|
|
+ $table.bootstrapTable("changeTitle", {
|
|
|
+ id: "ID",
|
|
|
+ name: "Item Name",
|
|
|
+ price: "Item Price"
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div class="container">
|
|
|
+ <h1>i18n Enhance</h1>
|
|
|
+ <label>Language:</label>
|
|
|
+ <div class="btn-group" role="group" style="margin-bottom: 4px">
|
|
|
+ <button id="tw_Btn" type="button" class="btn btn-default btn-sm active">zh_TW</button>
|
|
|
+ <button id="us_Btn" type="button" class="btn btn-default btn-sm">en_US</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <table id="table"
|
|
|
+ data-toggle="table"
|
|
|
+ data-url="data.json"
|
|
|
+ data-pagination="true">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th data-field="id">代碼</th>
|
|
|
+ <th data-field="name">項目名稱</th>
|
|
|
+ <th data-field="price">項目金額</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ </table>
|
|
|
+</div>
|
|
|
+</body>
|
|
|
+</html>
|
jewway