`

用dojo实现动态更换样式

    博客分类:
  • dojo
阅读更多
<script type="text/javascript">
dojo.require("dojo.lang.common");
dojo.require("dojo.event.common");
dojo.require("dojo.html.style");
dojo.require("dojo.string.extras");
dojo.require("dojo.collections.ArrayList");
function initPageStyle()
{
    initInputElementStyle();
}
/*
初始化所有input标签的样式
*/
function initInputElementStyle()
{
    var inputElements=document.getElementsByTagName("input");
    if(inputElements)
    {  
        for(var i=0;i<inputElements.length;i++)
        {
            var inputElement=inputElements.item(i);
            if(dojo.html.hasAttribute(inputElement,"type"))
            {
                var typeAttr=dojo.html.getAttribute(inputElement,"type");
                var lowerCaseTypeAttr=typeAttr.toLowerCase();
                if(lowerCaseTypeAttr=="text")
                {
                    initTextFieldStyle(inputElement);
                }
              else if((lowerCaseTypeAttr=="submit")||(lowerCaseTypeAttr=="reset")||(lowerCaseTypeAttr=="button"))
              {
                   initSimpleButtonStyle(inputElement);
               }

            }
        }

    }
}
/*
初始化所有text标签的样式
*/
function initTextFieldStyle(textField)
{
    if(textField)
    {
        if(!dojo.html.hasAttribute(textField,"class"))
            {
                dojo.html.addClass(textField,"TextBox");
            }
           
            var classNames=dojo.html.getClasses(textField);
           
            var classNameArray=new dojo.collections.ArrayList(classNames);
            classNameArray.forEach(
                function(item){
                    if(dojo.lang.isString(item))
                    {
                        addFocusCssStyle(textField,item,item+"Focused");
                        addBlurCssStyle(textField,item,item+"Focused");
                    }
                }
            );
    }
}
/*
初始化所有简单button标签的样式
*/
function initSimpleButtonStyle(buttonElement)
{
    if(buttonElement)
    {
        if(!dojo.html.hasAttribute(buttonElement,"class"))
            {
                dojo.html.addClass(buttonElement,"Button");
            }
            var buttonClassNames=dojo.html.getClasses(buttonElement);
           
            var buttonClassNameArray=new dojo.collections.ArrayList(buttonClassNames);
            buttonClassNameArray.forEach(
                function(item){
                    if(dojo.lang.isString(item))
                    {
                        addMouseOverCssStyle(buttonElement,item,item+"Hover");
                        addMouseOutCssStyle(buttonElement,item,item+"Hover");
                    }
                }
            );
    }
}
/*
添加onblur事件下的样式
*/
function addBlurCssStyle(element,blurCssClassName,focusCssClassName)
{
    if(element)
    {
        var blurFunc={
            doBlur:function(){
                dojo.html.replaceClass(element,blurCssClassName,focusCssClassName);
            }
    }
        dojo.event.connectBefore(element,"onblur",blurFunc,"doBlur");
    }
}
/*
添加onfocus事件下的样式
*/
function addFocusCssStyle(element,blurCssClassName,focusCssClassName)
{
    if(element)
    {
        var focusFunc={
            doFocus:function(){
                dojo.html.replaceClass(element,focusCssClassName,blurCssClassName);
        }
    }
        dojo.event.connectBefore(element,"onfocus",focusFunc,"doFocus");
}
}
/*
添加onmouseover事件下的样式
*/
function addMouseOverCssStyle(element,mouseOutCssClassName,mouseOverCssClassName)
{
    if(element)
    {
        var mouseOverFunc={
            doMouseOver:function(){
                dojo.html.replaceClass(element,mouseOverCssClassName,mouseOutCssClassName);
            }
    }
        dojo.event.connectBefore(element,"onmouseover",mouseOverFunc,"doMouseOver");
    }
}
/*
添加onmouseout事件下的样式
*/
function addMouseOutCssStyle(element,mouseOutCssClassName,mouseOverCssClassName)
{
    if(element)
    {
        var mouseOutFunc={
            doMouseOut:function(){
                dojo.html.replaceClass(element,mouseOutCssClassName,mouseOverCssClassName);
            }
    }
        dojo.event.connectBefore(element,"onmouseout",mouseOutFunc,"doMouseOut");
    }
}

dojo.addOnLoad(initPageStyle);


</script>

 

分享到:
评论

相关推荐

    arcgis api for js实现动态切换底图(淡入淡出效果)

    - 使用`dojo/on`模块或者原生的`addEventListener`监听用户交互,然后调用上述的切换和动画函数。 6. **优化性能** - 考虑到性能,当图层切换时,可以先将新图层的可见性设为`false`,加载完成后再设置为`true`,...

    dojo工具包zip

    Dojo工具包是一个广泛使用的JavaScript库,主要用于构建交互式的Web应用程序。这个压缩包包含了你在学习Dojo时可能需要用到的各种资源,旨在提供一个完整的开发环境,同时也作为一种备份手段。现在,让我们深入了解...

    DOJO 基础学习

    使用dojo/xhr模块,你可以实现与服务器的异步通信。例如,`dojo/xhrGet`用于GET请求,`dojo/xhrPost`用于POST请求。这些方法提供了一致的接口,处理请求的成功和失败情况。 5. **DOJO动画效果** DOJO的动画效果...

    dojo的datagrid使用

    这张图片可能展示了DataGrid分页功能实现后的视觉效果,包括分页控制条的样式和位置,以及在不同页面间切换的效果。 8. **js文件** 这个文件可能包含了DataGrid相关的JavaScript代码,包括DataGrid实例的创建、...

    dojo 1.9 demo

    8. **主题和样式**:Dojo的`dijit/themes`提供了多种预设样式,可以快速改变应用外观。通过切换不同主题,你可以了解Dojo如何处理CSS和主题的兼容性。 9. **DOH测试框架**:Dojo自带了DOH(Dojo Objective Harness...

    超多的Dojo实例应用演示源码

    10. **主题和样式**:Dojo提供了多种预定义的主题,如 claro、tundra、nihilo 和 soria,可以通过`dojo/themes`进行切换。学习如何应用和定制主题,可以提升应用的视觉效果。 这个压缩包中的源码实例无疑是学习和...

    DoJo AccordionContainer close or open

    ### Dojo AccordionContainer 自定义行为实现 在Web前端开发中,AccordionContainer 是一种常见的UI控件,用于显示可折叠的面板组。本篇将详细阐述如何通过覆写 Dojo 框架中的 AccordionContainer 组件的 `...

    Dojo API 1.9.chm 离线参考手册

    6. **dojo/store** 和 **dijit/tree**: Dojo的`dojo/store`抽象了数据存储,与视图层分离,便于数据源的切换。结合`dijit/tree`,可以构建交互式的树形数据结构,广泛应用于导航菜单或文件目录展示。 7. **dojo/xhr...

    Dojo框架英文使用指南

    Dojo的dijit层是这些组件的实现,提供了一致的API和主题样式,便于创建一致的用户体验。 数据绑定是Dojo的另一大亮点,它通过dojo/store和dojo/Stateful实现了模型-视图-控制器(MVC)模式。dojo/store用于存储和...

    Dojo之Widget标签开发 - 我为人人,人人为我 - BlogJava

    7. **国际化(i18n)**和**主题(theming)**: Dojo支持多语言和主题切换,Widget可以通过导入资源文件实现本地化,同时可以轻松应用不同的视觉样式。 8. **模块化(AMD)**: Dojo采用Asynchronous Module ...

    dojo-release-1.4.2-src.tar.gz

    4. **主题和样式**:Dijit组件支持多种预设主题,通过CSS实现UI风格的快速切换。 5. **响应式设计**:Dojo 1.4.2虽然相对较旧,但仍支持不同设备和屏幕尺寸的适配。 6. **性能优化**:Dojo的build工具可以对源码进行...

    dojo1.4.1代码下载

    9. **主题**:Dojo 的dijit小部件支持多种预定义的主题,如“claro”、“tundra”、“soria”等,可以通过简单的CSS切换改变应用的外观。 10. **工具集**:Dojo还提供了一些实用工具函数,如`dojo.forEach`、`dojo....

    AJAX DOJO0.3 源代码

    8. **主题与样式**: Dojo的`dijit`模块包含了可复用的UI组件,0.3版本的源码展示了如何实现可定制的主题和样式,为前端UI设计提供了便利。 9. **测试框架**: Dojo还包含了测试框架`dojotest`,帮助开发者进行单元...

    dojo-release-1.2.1

    3. **Dojo的UI组件**:Dojo包含了一系列可复用的UI组件,如dijit/Dialog对话框、dijit/form/Button按钮、dijit/layout/AccordionContainer手风琴容器等,这些组件具有良好的样式和可定制性,能快速构建用户界面。...

    dojo学习第一天 Tab选项卡 实现

    创建Tab选项卡首先需要引入Dojo的主题样式,这可以通过导入tundra主题的CSS文件来实现。之后,需要引入Dojo的基础文件和主题样式,通过script标签引入,同时使用djConfig参数进行配置。 djConfig参数中的...

    dojo工具包

    Dojox允许开发者探索和使用新的技术,或者实现一些Dojo Base和Dijit未涵盖的功能。 在"dojo-release-1.8.3"这个版本中,你可以期待以下特性: - AMD(Asynchronous Module Definition)加载器:Dojo 1.8引入了AMD...

    dojo工具包,帮助你快速开发

    8. **国际化和本地化**:Dojo提供了强大的i18n(国际化)支持,可以轻松切换语言和区域设置,以适应全球用户的需求。 9. **工具和实用程序**:Dojo还包括许多实用工具函数,如字符串处理、数组操作、日期和时间处理...

    dojo包工具

    6. **主题和样式**:Dojo包工具还支持主题和CSS的管理,可以轻松切换和定制UI界面的外观。 7. **构建优化**:通过`build`命令,Dojo包工具可以对整个项目进行编译和优化,包括去除未使用的代码(dead code ...

    JSF2.0实战 - 8、实现换肤功能

    总之,JSF 2.0结合Dojo库提供了一种灵活的方法来实现换肤功能,通过动态改变CSS引用,可以轻松地改变Web应用的视觉样式,满足用户的个性化需求。通过深入理解这些技术和实践,你可以为你的JSF应用带来更丰富、更具...

Global site tag (gtag.js) - Google Analytics