Jquery多语言下拉控件，点击可实现跳转相应语言

最新推荐文章于 2021-05-30 19:05:02 发布

转载最新推荐文章于 2021-05-30 19:05:02 发布 · 254 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/litaocnblogs/archive/2011/12/06/2277888.html

文章标签：

#javascript #xhtml #ViewUI

本文介绍了如何使用jQuery和HTML5的数据属性实现前端语言的动态切换功能，包括选择语言、跳转页面链接以及显示不同语言界面的具体实现步骤。

前台：

<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">
        
        <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

$(document).ready( function () {
     // 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');
    });

});

显示效果如下图所示：