2025-02-17

 

$(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 = $('<p>', { 

        width: select.outerWidth(), 

        className: 'tzSelect', 

        html: '<p class="selectBox"></p>' 

    }); 

 

    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'); 

    }); 

}); 

 

前臺包括如下:

 

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

 

摘自litao6664的專欄

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *