当前位置:首页 > 教程 > Web前端 > jQuery 国家语言(Language)选择切换讲解

jQuery 国家语言(Language)选择切换讲解

现在网站不仅是做的国内的,更多的大企业或者是做外贸电子商务的网站都需要面向国际化,因此就涉及到语言的选择,多语言网站建的切换应该怎么设计呢?这里给你一款jQuery 国家语言(Language)选择切换的示例。

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
<!doctype html>  
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery Language Switcher</title>
	<link rel="stylesheet" href="languageswitcher.css">
</head>
 
<body>
 
<header>
 
<h1>jQuery 语言切换选择</h1>
 
<div id="country-select">
  <form action="server-side-script.php">
    <select id="country-options" name="country-options">
      <option selected="selected" title="http://www.yoursite.com" value="us">United States</option>
      <option title="http://www.yoursite.co.uk" value="uk">United Kingdom</option>
      <option title="http://www.yoursite.fr" value="fr">France</option>
      <option title="http://www.yoursite.de" value="de">Germany</option>
      <option title="http://www.yoursite.nl" value="nl">Netherlands</option>
    </select>
    <input value="Select" type="submit" />
  </form>
</div>
</header>
 
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="languageswitcher.js"></script>  
</body>
</html>

实现的效果如图所示:
语言切换选择

为了实现上面的效果除了上面的HTML外,还需要js和css。

languageswitcher.css文件CSS代码

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
* { margin: 0; padding: 0; }
body {
background: #ccc;
}
 
header {
display: block;
background: #777;
height: 50px;
position: relative;
min-width: 600px;
}
 
header h1 {
	font: bold 24px Arial, Helvetica, sans-serif;
	color: #fff;
	position: absolute;
	left: 20px;
	top: 8px;
	}
 
#country-select {
position: absolute;
top: 13px;
right: 0;
width: 180px;
}
 
/* rought form styles for when JS is disabled */
 
#country-select form {
width: 180px;
padding: 0;
}
 
#country-select select,
#country-select input {
display: inline;
padding: 0;
margin: 0;
}
 
/* JS-created definition list */
 
.dropdown dd { position: relative; }
 
.dropdown a {
text-decoration: none;
outline: 0;
font: 12px Arial, Helvetica, sans-serif;
display: block;
width: 130px;
overflow: hidden;
}
 
.dropdown dt a {
background: #c45618;
border: 1px solid #964315;
padding: 3px 10px 4px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff;
}
 
.dropdown dt a.active {
	background: #db5e18;
	-webkit-border-bottom-left-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	-moz-border-radius-bottomleft: 0;
	-moz-border-radius-bottomright: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: 1px dotted #676768;
	-moz-box-shadow: 0 3px 7px rgba(0,0,0,.5);
	-webkit-box-shadow: 0 3px 7px rgba(0,0,0,.5);
	box-shadow: 0 3px 7px rgba(0,0,0,.5);
	color: #fff;
	}
 
.dropdown dd ul {
background: #814f33;
border: 1px solid #676768;
color: #C5C0B0;
display: none;
position: absolute;
z-index: 999;
top: 0;
left: 0;
padding: 2px 0 5px 0;
list-style: none;
border-top: none;
margin: 0;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
-moz-box-shadow: 0 3px 7px rgba(0,0,0,.5);
-webkit-box-shadow: 0 3px 7px rgba(0,0,0,.5);
box-shadow: 0 3px 7px rgba(0,0,0,.5);
}
 
.dropdown dd ul li a {
	padding: 2px 10px;
	}
 
.dropdown dd ul li a span,
.dropdown dt a span {
	float: left;
	width: 16px;
	height: 11px;
	margin: 2px 6px 0 0;
	background-image: url(flags.png);
	background-repeat: no-repeat;
	cursor: pointer;
	}
 
	.us a span { background-position: 0 0 }
	.uk a span { background-position: -16px 0 }
	.fr a span { background-position: -32px 0 }
	.de a span { background-position: -48px 0 }
	.nl a span { background-position: -64px 0 }
 
.dropdown dd ul li a em,
.dropdown dt a em {
	font-style: normal;
	float: left;
	width: 100px;
	cursor: pointer;
	}
 
.dropdown dd ul li a em {
	color: #dbc3b5;
}
 
.dropdown dd ul li a:hover { background-color: rgba(255,255,255,.1); }
.dropdown dd ul li a:hover em { color: #fff; }

languageswitcher.js文件JS代码

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
$(document).ready(function() {
 
	// --- language dropdown --- //
 
	// turn select into dl
	createDropDown();
 
	var $dropTrigger = $(".dropdown dt a");
	var $languageList = $(".dropdown dd ul");
 
	// open and close list when button is clicked
	$dropTrigger.toggle(function() {
		$languageList.slideDown(200);
		$dropTrigger.addClass("active");
	}, function() {
		$languageList.slideUp(200);
		$(this).removeAttr("class");
	});
 
	// close list when anywhere else on the screen is clicked
	$(document).bind('click', function(e) {
		var $clicked = $(e.target);
		if (! $clicked.parents().hasClass("dropdown"))
			$languageList.slideUp(200);
			$dropTrigger.removeAttr("class");
	});
 
	// when a language is clicked, make the selection and then hide the list
	$(".dropdown dd ul li a").click(function() {
		var clickedValue = $(this).parent().attr("class");
		var clickedTitle = $(this).find("em").html();
		$("#target dt").removeClass().addClass(clickedValue);
		$("#target dt em").html(clickedTitle);
		$languageList.hide();
		$dropTrigger.removeAttr("class");
	});
});
 
	// actual function to transform select to definition list
	function createDropDown(){
		var $form = $("div#country-select form");
		$form.hide();
		var source = $("#country-options");
		source.removeAttr("autocomplete");
		var selected = source.find("option:selected");
		var options = $("option", source);
		$("#country-select").append('<dl id="target" class="dropdown"></dl>')
		$("#target").append('<dt class="' + selected.val() + '"><a href="#"><span class="flag"></span><em>' + selected.text() + '</em></a></dt>')
		$("#target").append('<dd><ul></ul></dd>')
		options.each(function(){
			$("#target dd ul").append('<li class="' + $(this).val() + '"><a href="' + $(this).attr("title") + '"><span class="flag"></span><em>' + $(this).text() + '</em></a></li>');
			});
	}

css 需要的图片资源
国旗图标

这里的css只是参考,可以根据自己的选择设计来。以上是关于jQuery的语言(Language)选择的实现方法。这里给出完整的下载包,点此下载 jQuery的语言(Language)选择包示例

  • << 站长每天坚持写一篇文章到底有多难?
  • 草根站长如何一年赚80万——我做交友网站... >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/jquery-language-switch/

    相关文章 近期热评 最新文章

    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程
    • c#类的构造函数继承关系示例剖析
      本文通过示例代码讲解了c#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。