-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathdocumentation.html
234 lines (208 loc) · 11.2 KB
/
documentation.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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Ixtendo">
<title>"Polyglot" Language Switcher jQuery Plugin</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
outline: none;
}
img {
border: none;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
hr {
background-color: #EDEDED;
border: none;
height: 1px;
margin: 35px 0;
}
p, pre, h1, h2, h3, h4, h5, h6, ol, ul {
margin-bottom: 20px;
}
ol, ul {
margin-left: 20px;
}
ul {
list-style-type: disc;
}
ol li, ul li {
margin-bottom: 5px;
}
a:link, a:visited {
color: #1f7099;
text-decoration: none;
}
a:hover, a:active {
color: #d94f21;
text-decoration: underline;
}
pre {
padding: 20px;
background-color: #FAFAFA;
white-space: pre-wrap;
border: 1px solid #EDEDED;
}
</style>
</head>
<body style="font: 12px/18px 'Helvetica Neue',Helvetica,Arial,sans-serif; color: #444;">
<!-- begin container -->
<div id="container" style="width: 800px; margin: 40px auto;">
<!-- begin header -->
<div id="header" style="text-align: center;">
<div style="font: italic 14px/21px Georgia, 'Times New Roman', Times, serif; color: #999;">
<p>"Polyglot" Language Switcher jQuery Plugin Documentation by Ixtendo, v1.3<br>
Website: <a href="http://www.ixtendo.com/">www.ixtendo.com</a> · Email: <a href="mailto:info@ixtendo.com">info@ixtendo.com</a></p>
</div>
<hr>
<h1>"Polyglot" Language Switcher jQuery Plugin</h1>
<h2><span style="color: red">This plugin is not maintained anymore. Check out the new</span> <a href="http://www.ixtendo.com/polyglot-language-switcher-2/">Polyglot Language Switcher 2</a>.</h2>
<hr>
</div>
<!-- end header -->
<!-- begin table of contents -->
<div id="contents">
<h2>Table of Contents</h2>
<ol style="list-style-type: upper-latin;">
<li><a href="#introduction">Introduction</a></li>
<li><a href="#configuration">Configuration</a></li>
<li><a href="#usage">Usage</a></li>
</ol>
<hr>
</div>
<!-- end table of contents -->
<!-- begin main content -->
<div>
<ol style="list-style-type: upper-latin;">
<!-- begin introduction -->
<li id="introduction">
<h2>Introduction – <a href="#container">Top ↑</a></h2>
<p>The "Polyglot" Language Switcher jQuery plugin allows you easily switch between the languages supported by your website. It was conceived as a drop-down menu with flag icons.</p>
</li>
<!-- end introduction -->
<!-- begin configuration -->
<li id="configuration">
<h2>Configuration – <a href="#container">Top ↑</a></h2>
<ul>
<li>
<h3>Configuration Parameters</h3>
<ul>
<li><strong>animSpeed</strong> – The speed, in milliseconds, that is used to display and hide the pop-up menu. The default value is 200 ms.</li>
<li><strong>effect</strong> – You can choose between two possible animation effects: ‘fade’ and ‘slide’. The default value is ‘fade’.</li>
<li><strong>paramName</strong> – The name of the parameter used in the HTTP GET query to send the value of the chosen language. The default value is ‘lang’ (e.g., http://www.ixtendo.com?<strong>lang</strong>=en)</li>
<li><strong>websiteType</strong> – Specify the type of website where this jQuery plugin will be used. This parameter can be <em>dynamic</em> if the website pages are generated by a programming language (PHP, Java, C#, Perl, etc.) or <em>static</em> if the pages are pure HTML files.</li>
<li><strong>pagePrefix</strong> – This parameter will be taken into account only if the websiteType parameter has a value of 'static'; otherwise it will be ignored. This parameter will be used to compose the URL.</li>
<li><strong>indexPage</strong>– This parameter will be taken into account only if the websiteType parameter has a value of 'static'; otherwise it will be ignored. The value must represent the name of the index page. The default value is ‘index.html’.</li>
<li><strong>testMode</strong>– This parameter must be used on true only when you want to make a demo of this plugin without having the internationalization support implemented on the server side. The default value is ‘false’.</li>
<li><strong>openMode</strong>– This parameter can have one of the following two values: click or hover (default is click). It specifies on which mouse event the polyglot popup should be opened.</li>
<li><strong>hoverTimeout</strong>– This parameter is taken into account only if the openMode parameter has the value of ‘hover’. It specifies the time in milliseconds after which the popup will be closed when the user moves the mouse away from the Polyglot popup area. The default value is 1500 (milliseconds).</li>
</ul>
</li>
<li>
<h3>Callback Functions</h3>
<ul>
<li><strong>onChange (since 2.0) </strong>– This parameter allows you to define a callback function which will be called after the user changes the language.</li>
<li><strong>afterLoad (since 2.0) </strong>– This parameter allows you to define a callback function which will be called after the user changes the language.</li>
<li><strong>beforeOpen (since 2.0) </strong>– This parameter allows you to define a callback function which will be called before the popup is opened.</li>
<li><strong>afterOpen (since 2.0) </strong>– This parameter allows you to define a callback function which will be called after the popup is opened.</li>
<li><strong>beforeClose (since 2.0) </strong>– This parameter allows you to define a callback function which will be called before the popup is closed.</li>
<li><strong>afterClose (since 2.0) </strong>– This parameter allows you to define a callback function which will be called after the popup is closed.</li>
</ul>
<p>All the callback functions have a single parameter which is a simple object with the following properties:</p>
<ul>
<li><strong>name</strong> – the name of the event</li>
<li><strong>element</strong> – the HTML element built by the plugin based on the default HTML structure</li>
<li><strong>instance</strong> – the polyglotLanguageSwitcher instance (can be used to invoke the public methods)</li>
</ul>
</li>
<li>
<h3>Public Methods</h3>
<ul>
<li><strong>open() (since 2.0) </strong>– This method can be used to open the popup if it is closed.</li>
<li><strong>close() (since 2.0) </strong>– This method can be used to close the popup if it is open.</li>
</ul>
</li>
</ul>
<p>The above parameters can be specified to the library as follows:</p>
<pre>…
$(this).polyglotLanguageSwitcher({paramName:'language'}); //chaging the language parameter name
$(this).polyglotLanguageSwitcher({effect:'slide'}); //chaging the open/close popup effect
$(this).polyglotLanguageSwitcher({ //example of multiple configuration paremeters
paramName: 'language',
effect: 'slide',
animSpeed: 150
});
//example of onChange callback function
$(this).polyglotLanguageSwitcher({
<strong>onChange: function(evt){</strong>
alert("The selected language is: "+evt.selectedItem);
return true;
}
});
/* Example of popup closure on a mobile device (e.g., IPad, IPhone, etc.) when the user presses outside it.
To implement this, you need to integrate the jQuery touchSwipe library in your website. This library can be found at
the following address: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin. */
$(this).polyglotLanguageSwitcher({
<strong>afterLoad: function(evt){</strong>
$(document).swipe( {
click:function(e, target){
evt.instance.close();
}
});
}
});
…</pre>
</li>
<!-- end configuration -->
<!-- begin usage -->
<li id="usage">
<h2>Usage – <a href="#container">Top ↑</a></h2>
<p>To use the "Polyglot" Language Switcher in you website, add the following lines of code in the <strong><head></strong> tag of your web page:</p>
<pre><head>
…
<link href="css/polyglot-language-switcher.css" type="text/css" rel="stylesheet">
<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
<script src="js/jquery.polyglot.language.switcher-1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(this).polyglotLanguageSwitcher();
});
</script>
</head></pre>
<p>In the <strong><body></strong> section of your page, add the following lines of code:</p>
<pre><body>
…
<div id="polyglotLanguageSwitcher">
<form action="#">
<select id="polyglot-language-options">
<option id="en" value="en">English</option>
<option id="fr" value="fr" selected>French</option>
<option id="de" value="de">German</option>
<option id="it" value="it">Italian</option>
<option id="es" value="es">Spanish</option>
</select>
</form>
</div>
…
</body></pre>
<p>When the ‘websiteType’ configuration parameter has the value of ‘dynamic’, after the user changes the language, the newly generated pages must select the option which corresponds to the selected language. For example, if the Italian language was selected, then all the pages generated by the server must select the option with an id of ‘it’. </p>
<p>In the case of static websites (where the pages are pure HTML and aren't generated by a programming language), the selected attribute of the option element will not be taken into account. In this case, the selected value will be stored in the local cache (using HTML5 local storage). It is possible that this case will not work properly on some older browsers which don't support HTML5 local storage.</p>
</li>
<!-- end usage -->
</ol>
<p><a href="#contents">Back to the table of contents ↑</a></p>
</div>
<!-- end main content -->
</div>
<!-- end container -->
</body>
</html>