Jquery多语言下拉控件，点击可实现跳转相应语言
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<form id="form1" runat="server">
<select id="fancySelect" name="fancySelect" class="makeMeFancy">
<!-- Notice the HTML5 data attributes -->
<option value="0" selected="selected" data-skip="1">请选择语言</option>
<option value="1" data-icon="img/zhcnicon.gif" data-html-text="中文简体 <i></i>">
中文简体</option>
<option value="2" data-icon="img/fantiicon.gif" data-html-text="中文繁體 <i></i>">
中文繁體</option>
<option value="3" data-icon="img/enicon.gif" data-html-text="English <i></i>">
English</option>
</select>
</form>
</body>
</html>
后台的JS
//Define MultiLanguage
var laugeYuan = ["zh_chs", "zh_tr", "en"];
var langeNowq = [""];
var langeNowj = [""];
var biaozhi = 0;
function quyuyan() {
var urly = decodeURI(window.location.href);
var fenge1 = urly.split("lge=");
langeNowj = fenge1[1].split("|");
langeNowq = fenge1[1].split("&");
}
quyuyan();
// The select element to be replaced:
var select = $('select.makeMeFancy');
var selectBoxContainer = $('<div>', {
width: select.outerWidth(),
className: 'tzSelect',
html: '<div class="selectBox"></div>'
});
var dropDown = $('<ul>', { className: 'dropDown' });
var selectBox = selectBoxContainer.find('.selectBox');
// Looping though the options of the original select element
select.find('option').each(function (i) {
var option = $(this);
if (i == select.attr('selectedIndex')) {
selectBox.html(option.text());
}
// As of jQuery 1.4.3 we can access HTML5
// data attributes with the data() method.
if (option.data('skip')) {
return true;
}
// Creating a dropdown item according to the
// data-icon and data-html-text HTML5 attributes:
var li = $('<li>', {
html: '<img src="' + option.data('icon') + '" /><span>' +
option.data('html-text') + '</span>'
});
li.click(function () {
selectBox.html(option.text());
dropDown.trigger('hide');
//add click goto multi language
var urls = decodeURI(window.location.href);
var lanCan = laugeYuan[i] + "|" + langeNowj[0];
var urlNew = urls.replace(langeNowq[0], lanCan);
$("#selectlanguage").fadeOut("slow");
biaozhi = 0;
window.location.href = urlNew;
alert(urlNew);
// When a click occurs, we are also reflecting
// the change on the original select element:
select.val(option.val());
return false;
});
dropDown.append(li);
});
selectBoxContainer.append(dropDown.hide());
select.hide().after(selectBoxContainer);
// Binding custom show and hide events on the dropDown:
dropDown.bind('show', function () {
if (dropDown.is(':animated')) {
return false;
}
selectBox.addClass('expanded');
dropDown.slideDown();
}).bind('hide', function () {
if (dropDown.is(':animated')) {
return false;
}
selectBox.removeClass('expanded');
dropDown.slideUp();
}).bind('toggle', function () {
if (selectBox.hasClass('expanded')) {
dropDown.trigger('hide');
}
else dropDown.trigger('show');
});
selectBox.click(function () {
dropDown.trigger('toggle');
return false;
});
// If we click anywhere on the page, while the
// dropdown is shown, it is going to be hidden:
$(document).click(function () {
dropDown.trigger('hide');
});
});
显示效果如下图所示：
