Dojo：主题（theme）切换以及Div蒙板覆盖

主题的切换本质上来说即使：1、图片的改变；2、颜色的改变。

以上两点都是可以css控制的，所以在设计之初，就应该把需要被主题控制的css统一到一个css文件中，同一个主题的图片也要分开归类文件夹。

下面说一下Dojo的主题切换实现：

Html片段：

    <link id="firstTheme" rel="stylesheet" type="text/css" href="/dojo/css/firstTheme.css" ></link> 
    <link id="secondTheme" rel="stylesheet" type="text/css" href="/dojo/css/secondTheme.css" disabled="true"></link> 
    <link id="thirdTheme" rel="stylesheet" type="text/css" href="/dojo/css/thirdTheme.css" disabled="true"></link>

从linked引入的css文件，有disabled属性可以控制css是否可用。

JS片段：

function changeThemes(newThemes){
    dojo.forEach(dojo.query("link"),function(link_theme){
        if(link_theme.id != newThemes){
            link_theme.disabled = true;
        }else{
            link_theme.disabled = false;    
        }
    })
    
}

通过对changeThemes("secondTheme")的调用，即实现了对link标签disabled属性的改变。

切换html，含方便的div半透明蒙板实现，下一步工作既是将之构成dojo类：

View Code

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>主题</title>
<style>
.theme,.cover{
    position:absolute;
    width:200px;
    height:160px;
}
div.container{
    position:relative;
    width:200px;
    height:160px;
    float:left;
    margin-left:10px;
    }
div.cover{
    background-color:#333;
    opacity: 0.0;
    }
b.description{
    position:absolute;
    left:38%;
    top:40%;
    font-size:15px;
    color:#FFF;
    }
</style>
<script type="text/javascript"> 

        dojo.require("dojo.fx"); 
         
        dojo.query("div.cover").connect("mouseover",function(){
            dojo.animateProperty({ 
             node: this, 
             duration:1000, 
                properties: {  
                    opacity: 0.5  
                } 
            }).play();
            });
        dojo.query("div.cover").connect("mouseout",function(){
            dojo.animateProperty({ 
             node: this, 
             duration:1000, 
                properties: {  
                    opacity: 0 
                } 
            }).play();
            });
         </script> 

</head>
    <body>
        <div class="container">
            <img class="theme" src="/dojo/resource/image/firstTheme/preview.jpg" /> 
            <div class="cover" onClick="changeThemes('firstTheme')"><b class="description">--黑色--</b></div>
        </div>
        <div class="container">
            <img class="theme" src="/dojo/resource/image/secondTheme/preview.jpg" />
            <div class="cover" onClick="changeThemes('secondTheme')"><b class="description">--蓝色--</b></div>
        </div>
        <div class="container">
            <img class="theme" src="/dojo/resource/image/thirdTheme/preview.jpg" /> 
            <div class="cover" onClick="changeThemes('thirdTheme')"><b class="description">--红色--</b></div>
        </div>
    </body>
</html>