Dojo：主題（theme）切換以及Div蒙板覆蓋

anrainie發表於2012-06-14

主題的切換本質上來說即使：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>


相關文章