换肤功能的实现(实时改变ext、页面的风格样式)

来源:互联网 发布:mac网络测速软件 编辑:程序博客网 时间:2024/06/09 13:49

ext的换肤功能本身是很简单的,使用工具类Ext.util.CSS即可轻松实现换肤,

页面的换肤也不复杂,就是根据主题的设置加载进来相应的css文件。问题是

我要在现有的项目上实现换肤,现在手头上的项目结构比较复杂,是frame中嵌套frame,

所以处理起来就有些麻烦,下面就是实现换肤功能的主要代码:

<select style="width:65px; height:; background-color:#c9e8fc; border:solid 1px #7dbad7; font-size:12px; color:#" name="themeset" id="themeset" onchange="changeTheme();">
             <option id="ext-all" value="ext-all.css">默认</option>
             <option id="xtheme-green" value="xtheme-green.css" >绿色</option>
             <option id="xtheme-olive" value="xtheme-olive.css">橄榄色</option> 
             <option id="xtheme-pink" value="xtheme-pink.css">粉色</option>
             <option id="xtheme-purple" value="xtheme-purple.css">紫色</option>
             <option id="xtheme-gray" value="xtheme-gray.css">浅灰色</option>
             <option id="xtheme-darkgray" value="xtheme-darkgray.css">深灰色</option>
             <option id="xtheme-slate" value="xtheme-slate.css">暗蓝色</option>
             <option id="xtheme-black" value="xtheme-black.css">黑色</option>

</select>

************************************************

<script type="text/javascript">
        //默认显示上次设置的主题
    window.onload = function(){
        var cookiesArr = document.cookie.split(";");
        var cssName = "";
        for(var i=0; i<cookiesArr.length; i++){
                var arr = cookiesArr[i].split("=");
                if(arr[0] == "css"){
                    cssName = arr[1];
                    break;
                }
        }
        if(cssName != ""){
                window.parent.frames["mainFrame"].Ext.util.CSS.swapStyleSheet('theme',  '<%=path%>/extjs3.0/resources/css/'+ cssName);
                var win = window.parent.frames["mainFrame"].frames["I3"];
                win.Ext.util.CSS.swapStyleSheet('theme',  '<%=path%>/extjs3.0/resources/css/'+ cssName);
        }
       
        //select框中显示先前设置的主题
        var pretheme = cssName.split(".");
        var prethemecolor = pretheme[0];
        $("#"+prethemecolor).attr("selected","selected");
    }
    </script>
    <script type="text/javascript">
            //主题设置
           
            function changeTheme(){
                var themeName = document.getElementById("themeset").value;
                //设置cookie
                var date = new Date();
                date.setTime(date.getTime() + 30*24*3066*1000);//30天后的日期
                document.cookie = "css=" + themeName + ";expires=" + date.toGMTString();
                var doci3 = window.parent.frames["mainFrame"].frames["I3"].document;
                doci3.cookie = "css=" + themeName + ";expires=" + date.toGMTString();
                //改变ext弹出框的风格样式
                window.parent.frames["mainFrame"].Ext.util.CSS.swapStyleSheet('theme',  '<%=path%>/extjs3.0/resources/css/'+ themeName);
                var win = window.parent.frames["mainFrame"].document.getElementById("I3").contentWindow;
                win.Ext.util.CSS.swapStyleSheet('theme',  '<%=path%>/extjs3.0/resources/css/'+ themeName);
            }
        </script>

*******************************************************

在各个frame中的页面上都要先加载换肤代码。

?????????????????????????

现在请大家帮我解决一个问题:上述代码在IE中一切都ok,火狐浏览器中遇到了个不算小的问题:

因为有些页面上使用了jsp:include引进来了一个小页面,这个小页面中运用了ext,问题来了:

在Firefox中include进来的小页面中的ext弹出窗口都没有实现换肤???高手们认为是什么原因呢?

原创粉丝点击