0

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

若是以前，遇到這類需求不多思索，抄起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