jQuery 国家语言（Language）选择切换讲解

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

<!doctype html>  
 <html>
 <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代码

* { 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代码

$(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 需要的图片资源