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

来源：互联网发布：网上白家乐能破解软件编辑：程序博客网时间：2024/06/03 19:59

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

<%@ 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>

0 0