最近處理到網頁多語系動態切換,部分按鈕採圖檔形式(需為每個語系分別製作圖檔,愛美得多付出些代價),因此切換語系時需變更按鈕圖檔來源,切換效果如下:

若是以前,遇到這類需求不多思索,抄起jQuery上就對了! 訂閱切換選項click事件,取得要切換語系,改變<img> src指向該語系對應的圖檔,再調整語系選項class,使已選取項目呈現不同顏色即大功告成,程式範例如下所示: 線上展示

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>按鈕圖檔切換 by JavaScript</title>
    <style>
        .lang-sel span {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
            margin-right: 3px;
        }
 
        .img-btn {
            margin: 3px;
            box-shadow: 2px 2px 5px #ccc;
        }
 
            .img-btn:active {
                box-shadow: none;
            }
 
        .lang-sel span.selected {
            color: red;
        }
    </style>
</head>
<body>
    <div class='lang-sel'>
        <span class='tw' data-lang='tw'>正體</span>
        <span class='cn' data-lang='cn'>简体</span>
        <span class='en' data-lang='en'>English</span>
        <img id='btn' class="img-btn" src='btn_tw.png' />
    </div>
    <script type='text/javascript'
            src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js'></script>
    <script>
        function switchLang(lang) {
            $("#btn").attr("src", "btn_" + lang + ".png");
            $(".lang-sel span").removeClass("selected")
            .filter("." + lang).addClass("selected");
        }
        switchLang("tw");
        $(".lang-sel span").on("click", function () {
            switchLang($(this).data("lang"));
        });
    </script>
</body>
</html>

近幾年,見識過著名Framework(如Bootstrap、KendoUI)出神入化的CSS用法,不會作詩也會吟(惟功力仍淺,只敢說堪用),學會修改DOM以外的其他解法。

首先,CSS可透過background: url(圖檔網址)指定背景圖,配合不同Selector則可制訂多組規則,例如:

.btn { background: url(img-a.png); }
.tw .btn { background: url(img-b.png); }

以上安排即可實現切換效果: 當.img元素被包在容器中,容器是否加上class="tw"決定了.btn的背景是img-a.png還是img-b.png。以<span class='btn'>當成按鈕,上層容器指定不同class,span的背景圖就會改變;於是,切換語系時只需改變容器class(為求簡便,我通常直接將class設在body),其下所有相關<span>就會自動切換背景圖,達到語系切換,而已選取語系選項的變色效果也可透過類似手法完成:

.tw span.tw, .cn span.cn, .en span.en { color: red; }

除了在body addClass()外不需變更DOM, 用CSS就能一次切換按鈕圖檔及語系選項顯示,jQuery程式簡化到只剩一行: 線上展示

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>按鈕圖檔切換 by CSS</title>
    <style>
        .lang-sel span {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
            margin-right: 3px;
        }
 
        .img-btn {
            margin: 3px;
            display: inline-block;
            width: 45px;
            height: 20px;
            box-shadow: 2px 2px 5px #ccc;
        }
 
            .img-btn:active {
                box-shadow: none;
            }
 
        .tw span.tw, .cn span.cn, .en span.en {
            color: red;
        }
 
        .tw .img-btn {
            background: url(btn_tw.png);
        }
 
        .cn .img-btn {
            background: url(btn_cn.png);
        }
 
        .en .img-btn {
            background: url(btn_en.png);
        }
    </style>
</head>
<body class="tw">
    <div class='lang-sel'>
        <span class='tw' data-lang='tw'>正體</span>
        <span class='cn' data-lang='cn'>简体</span>
        <span class='en' data-lang='en'>English</span>
        <span class="img-btn"></span>
    </div>
    <script type='text/javascript'
            src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js'></script>
    <script>
        $(".lang-sel span").on("click", function () {
            $("body").removeClass("tw cn en").addClass($(this).data("lang"));
        });
    </script>
</body>
</html>

改用CSS做法後,JavaScript大幅簡化,CSS卻變得較為繁瑣,一來一往,整體說來並未明顯簡潔,但仍有其意義: 關鍵在於分工不同! 圖檔切換的工作由JavaScript移至CSS,意味著苦主工作職掌由程式設計師移向視覺設計師(當然,若JS與CSS都由前端工程師統包,就只是左手移到右手,差異便不大),圖檔變化有時還涉及尺寸變化,常需與排版設計一併考慮,在CSS裡統一協調安排較為便利,也算走CSS處理的優點之一。至於效能,CSS套用規則切換直接由瀏覽器渲染(Render)引擎處理,理應比用JavaScript逐一改變DOM屬性更有效率(尤其是要處理的DOM元素數量較多時),只是差異也有限吧!? (未經實驗,純屬非專業猜測)

未來面對類似應用需求,又多了一種解法選項。


Comments

Be the first to post a comment

Post a comment