Je souhaite ajouter un bouton bascule pour changer la langue de mon blog à l'aide d'un script de traduction Google. J'ai trouvé ce code et il fonctionne bien. J'ai trouvé ce bouton bascule, mais je ne sais pas comment les mélanger avec JavaScript pour que le code fonctionne correctement.
le code
le bouton switch
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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 <div id='google_translate_element'> </div> <div class='menu-traslate-header'> <ul> <li><a href='#googtrans/fr'>FR</a></li> <li><a href='#googtrans/ar'>Ar</a></li> </ul> </div> <script type='text/javascript'> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'fr', includedLanguages: 'ar,fr-CN' , layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true, gaTrack: true, }, 'google_translate_element'); } </script> <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit' type='text/javascript'/> <script type='text/javascript'> jQuery(document).ready(function($) { $('.menu-traslate-header ul li a' ).click(function(event) { window.location = $(this).attr('href'); location.reload(); }); }); </script>
css du bouton
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 <div class="on-off-toggle"> <input class="on-off-toggle__input" type="checkbox" id="bopis" /> <label for="bopis" class="on-off-toggle__slider"></label> </div>
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
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 @use postcss-preset-env { stage: 0; } /** BEGIN CSS NEEDED FOR SWITCH **/ .on-off-toggle { width: 56px; height: 24px; position: relative; display: inline-block; } .on-off-toggle__slider { width: 56px; height: 24px; display: block; border-radius: 34px; background-color: #d8d8d8; transition: background-color 0.4s; &:before { content: ''; display: block; background-color: #fff; box-shadow: 0 0 0 1px #949494; bottom: 3px; height: 18px; left: 3px; position: absolute; transition: .4s; width: 18px; z-index: 5; border-radius: 100%; } &:after { display: block; line-height: 24px; text-transform: uppercase; font-size: 12px; font-weight: bold; content: 'fr'; color: #484848; padding-left: 26px; transition: all 0.4s; } } .on-off-toggle__input { /* This way of hiding the default input is better for accessibility than using display: none; */ position: absolute; opacity: 0; } .on-off-toggle__input:checked + .on-off-toggle__slider { background-color: #000; &:before { transform: translateX(32px); } &:after { content: 'ar'; color: #FFFFFF; padding-left: 8px; } } /*** END CSS NEEDED FOR SWITCH **/ /*** DEMO STYLES ONLY ***/ * { box-sizing: border-box; } body { font-family: OpenSans, sans-serif; height: 100vh; display: flex; align-items: center; justify-content: center; }
Partager