-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
134 lines (108 loc) · 5.26 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang=""> <!-- this is intentionally left blank which will be added at runtime-->
<head>
<!--Meta tag is necessary to display the language characters-->
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="description" content="Page Translation">
<meta name="author" content="Niranjan Kumar">
<!--HTMLed.js-->
<!--Jquery Framework-->
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/HTMLed.js" data-config="lang.json"></script>
<script>
/* Read the Configuration
{
autoDetect: false, //This tells the browser to detect the language preference and load ".properties" file automatically
langPref: "fr", // if you set "autoDetect:false" you should mention the name of the ".properties" file you want to load
langBundle:"bundle" //folder name that contains all ".properties" files
}*/
</script>
<!-- Important note: you have to use HTMLed.js before Jquerymobile framework to work correctly.
As HTMLed.js registers in document.ready event to parse the HTML file to locale specific language
based on properties file
Kindly read the HTMLed.js comments in the code to understand it completely
/*Open the HTMLed.js file to set your language settings
-->
<!--Jquery Mobile Framework-->
<script type="text/javascript" src="js/jquerymobile/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="js/jquerymobile/jquery.mobile-1.3.1.min.css" />
<script>
//Thanks to Tim Smith
$(document).on("click", '#showPopup', function(event) {
$.HTMLed({
externalPage : "popup.html",
options : {
langPref: "en"
},
callBack:function(parsed){
$('#popup-container').html(parsed);
$('#popup-wrapper').popup("open", { transition: "pop" }); // the jQuery Popup opens
}
});
});
//This load the french page to English one
$(document).on("click", '#reload', function(event) {
$.HTMLed.rePage({
langPref:"en"
});
});
</script>
<title>Home Screen</title>
</head>
<body>
<!-- Start of first page: #one -->
<div data-role="page" id="one">
<div data-role="header">
<h1>English Version</h1>
</div><!-- /header -->
<div data-role="content" >
<h2>Page One</h2>
<h4>Description:</h4>
<p>i am in English</p>
<div data-role="content" data-theme="a">
<p><a href="#two" data-role="button" data-theme="b">French Translation as page</a></p>
<p><a href="#two" data-role="button" data-transition="flip" data-theme="b">French Translation by flip</a></p>
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-theme="b">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page one -->
<!-- Start of second page: #two --> <!--French version of the page-->
<div data-role="page" id="two" data-theme="a">
<div data-role="header" data-theme="b">
<h1>French Version</h1>
</div><!-- /header -->
<div data-role="content" >
<!--
label.page
label.description
label.descriptionText
label.footer
label.ok
label.back
/* these are the place holder mentioned in ".properties" file*/
/* these place holders should exactly match the properties file labels.*/
/* Language settings should set in HTLMed.js file*/
-->
<h2>label.page (Page Two)</h2> <!-- "label.page" is a place holder where the string is replaced with corresponding language based on ".properties" file-->
<h3>label.description:</h3>
<p>label.descriptionText</p>
<div data-role="content" data-theme="c">
<p><a href="#one" data-role="button" data-theme="a">label.ok (I am ok)</a></p>
<p><a href="#one" data-role="button" data-theme="a" data-transition="flip">label.back (Go back)</a></p>
<div data-role="button" id="showPopup">label.showPopUp</div>
<div data-role="button" id="reload"> Reload in English</div>
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-theme="d">
<h4>label.footer</h4>
</div><!-- /footer -->
<div data-role="popup" id="popup-wrapper" class="ui-content">
<div id="popup-container"></div>
</div>
</div><!-- /page two -->
</body>
</html>