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

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

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

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

Html片段：

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

从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类：

 
      
    
<%@ page language="java contentTypetext/html; charset=UTF-8 pageEncodingUTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
htmlheadMeta http-equiv="Content-Type" content="text/html; charset=UTF-8"title>主题</style>
.theme,.cover{
    position:absolute;
    width200px
    height160px;
}
div.containerrelative
    floatleft
    margin-left10px;
    
div.cover
    background-color#333
    opacity 0.0
b.description
    left38%
    top40%
    font-size15px
    color#FFF}
script type="text/javascript" 

        dojo.require("dojo.fx); 
         
        dojo.query(div.cover).connect(mouSEOver,function(){
            dojo.animateProperty({ 
             node: this10000.5  
                } 
            }).play();
            });
        dojo.query(mouSEOut0 
                } 
            }).play();
            });
         script> 

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

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

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

猜你在找的Dojo相关文章