前言

最近在重构个hybird(原生的壳包着Web页面)的UI框架,进行到了做换肤功能的阶段,所以这里是我思考的解决的方法。

预想

目前实现换肤的功能无非就两种做法。

1.写几个皮肤文件,然后切换使用这几个文件达到换肤的目的。

不得不说这是最常见的方式,效果也比较明显,但是它有几个缺点。

缺点:

1.如果更改一个皮肤的内容,那其他的皮肤文件也要做相应修改(这挺麻烦,不过可以用less管理css解决,所以也不是什么大问题)。

2.它是固定的,在使用的时候皮肤文件已经是写好的了,而当我需要动态设置一些属性的时候就无可奈何了。

2.使用less这种工具,在页面加载时才动态生成皮肤样式。

但这种方式的缺点却很明显。

缺点:

1.效率低,为了一个换肤的功能,却要引一个less工具(压缩后大概126KB),在终端Web是无法忍受的。

2.速度慢,因为有一个皮肤文件编译(姑且把它叫做编译)生成的过程,在终端也难以接受(有可能还出现页面皮肤闪),如果更换皮肤又要重新编译。

考虑

鉴于上面两种方法的缺点,一种无法动态,另一种效率低。

所以上面两种方法没办法使用,只能思考另外的方法了,于是就分析哪些是hybird 页面需要换肤的元素

有几个需要换肤的元素:

1.导航栏

2.底部栏

3.默认图标

而又寻找需要设置的属性:

1.背景色

2.字体颜色

3....(主要是这两个)

根据上面的两个东西,我发现没必要把页面换肤想成那么复杂一件事,不是需要用什么工具或切换css文件。是不是可以获取需要动态设置的属性,然后然后设置到需要换肤的元素就可以了(就是这个简单想法)。

PS:有人会说皮肤怎么会需要动态生成。我只能说有可能某些皮肤属性是页面启动时才知道,又或者支持自定义皮肤的。

实现

说干就干,实现起来代码很少,就直接贴出来给大家看看。

ui.Skin = (function(){

     var skinTagId = "BINGOTOUCH-SKIN", TEMPLATE = {
BGCOLOR : "@selector { background-color : @BGCOLOR !important; }",
COLOR : "@selector { color : @COLOR !important; }"
} var init = function (options){
var settings = {
changeColorSelector : [ ".header", ".footer"],
color : "#FFFFFF",
changeBgColorSelector : [ ".header", ".footer"],
bgColor : "#278cca",
appendElement : "head"
} $.extend(settings,options);
$("#" + skinTagId).remove(); var html = "<style id='" + skinTagId + "'>";
html += _createCss(settings.changeColorSelector, "COLOR", settings.color);
html += _createCss(settings.changeBgColorSelector, "BGCOLOR", settings.bgColor);
html += "<style>";
$(settings.appendElement).append(html);
} var _createCss = function(changeSelectors, colorType, color){
var html = "";
$.each(changeSelectors ,function(i, selector) {
html += TEMPLATE[colorType].replace("@selector", selector).replace("@" + colorType, color);
});
return html;
} return {
init : init
} })();

代码很简单,看看就明白

总结

我的实现方法很简单,当然所能更换的内容也较少且固定,但这对hybird应用的换肤已经是够的了。既能动态换肤,而且效率是不错的。

——技术只是技术,工具只是工具,不能为用而用。

(本篇完)

hybird之web动态换肤实现的更多相关文章

  1. CocoStudio基础教程(4)骨骼动画的动态换肤

    1.概述 游戏中人物的状态会发生改变,而这种改变通常要通过局部的变化来表现出来.比如获得一件装备后人物形象的改变,或者战斗中武器.防具的损坏等.这些变化的实现就要通过动态换肤来实现. 2.运行到程序 ...

  2. duilib入门之贴图描述、类html文本描述、动态换肤、Dll插件、资源打包

    转载自duilib入门文档 贴图描述: Duilib的表现力丰富很大程度上得益于贴图描述的简单强大.Duilib的贴图描述分为简单模式和复杂模式两种. 简单模式使用文件名做为贴图描述内容,在这种方式下 ...

  3. Cocos2d-x 3.0 cocostudio骨骼动画的动态换肤

    概述 游戏中人物的状态会发生改变,而这种改变通常要通过局部的变化来表现出来.比如获得一件装备后人物形象的改变,或者战斗中武器.防具的损坏等.这些变化的实现就要通过动态换肤来实现.在接下来的这个Demo ...

  4. Android动态换肤(二、apk免安装插件方式)

    在上一篇文章Android动态换肤(一.应用内置多套皮肤)中,我们了解到,动态换肤无非就是调用view的setBackgroundResource(R.drawable.id)等方法设置控件的背景或者 ...

  5. Android动态换肤(一、应用内置多套皮肤)

    动态换肤在很多android应用中都有使用,用户根据自己的喜好设置皮肤主题,可以增强用户使用应用的舒适度. Android换肤可以分为很多种,它们从使用方式,用户体验以及项目框架设计上体现了明显的差异 ...

  6. element-ui 动态换肤

    1.在安装好 element-ui@2.x 以后,首先安装sass-loader npm i sass-loader node-sass -D 2.安装 element-theme npm i ele ...

  7. WPF之动态换肤

    原文:WPF之动态换肤 如何实现换肤呢,对于复杂的换肤操作,如,更换按钮样式.窗口样式等,我们需要写多个资源字典来表示不同的皮肤,通过动态加载不同的资源字典来实现换肤的效果:对于简单的换肤操作,如更改 ...

  8. ASP.NET MVC扩展自定义视图引擎支持多模板&动态换肤skins机制

    ASP.NET mvc的razor视图引擎是一个非常好的.NET MVC框架内置的视图引擎.一般情况我们使用.NET MVC框架为我们提供的这个Razor视图引擎就足够了.但是有时我们想在我们的项目支 ...

  9. ASP.NET MVC 扩展自定义视图引擎支持多模板&动态换肤skins机制

    ASP.NET  mvc的razor视图引擎是一个非常好的.NET  MVC 框架内置的视图引擎.一般情况我们使用.NET MVC框架为我们提供的这个Razor视图引擎就足够了.但是有时我们想在我们的 ...

随机推荐

  1. linux下查看进程占用端口和端口占用进程命令

    Linux下查看进程占用端口: 查看程序对应进程号:ps –ef|grep 进程名 REDHAT :查看进程号所占用的端口号:netstat –nltp|grep 进程号 ubuntu:查看进程占用端 ...

  2. js实现对json数据的序列化(兼容ie6以上浏览器)

    /** * 增加对JSON数据的序列化方法, * 主要用于IE6.7不支持JSON对象的浏览器 */ var xue = xue || {};xue.json = xue.json || {}; xu ...

  3. 使用NuGet管理项目类库引用

    NuGet 是微软开发平台(包括.NET平台)的一个包管理器,这里只介绍和.NET相关的NuGet Visual Studio扩展客户端, 在VS2010 ,VS2012 ,VS2013中默认集成了N ...

  4. 大话PHP缓存头

    304的请求机制和200有什么不一样呢?在fiddler中查看304请求的时候突然想到这个问题,就想到研究下这个304请求机制了. 我们自己在nginx上放一个文件,test.png.可以使用下面的地 ...

  5. [JS] JS模块化开发之RequireJS

    本节将简述RequireJS常用的功能 RequireJS 实现了 Asynchronous Module API. 目录: 为什么使用RequireJS 加载RequireJS Hello Worl ...

  6. 做一个会PS切图的前端开发

    系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...

  7. C#密封类

    密封类 密封类使用sealed修饰符声明. 密封类中不可能有抽象方法[因为:抽象方法必须在抽象类中,而抽象类不能是密封的或者是静态的,也就是说abstract 和sealed不能同时修饰一个类]   ...

  8. 我读过的最好的epoll讲解--转自”知乎“

    首先我们来定义流的概念,一个流可以是文件,socket,pipe等等可以进行I/O操作的内核对象. 不管是文件,还是套接字,还是管道,我们都可以把他们看作流. 之后我们来讨论I/O的操作,通过read ...

  9. 激活当前视图菜单高亮呈现 V2.0

    前一段时间,Insus.NET有分享一篇<激活当前视图菜单高亮呈现>http://www.cnblogs.com/insus/p/5287093.html 这篇只是同一控制器的菜单. 今天 ...

  10. 【Win10开发】关于汉堡菜单-SplitView的用法

    SplitView(汉堡菜单)是win10新加的一种控件,顾名思义,其实就是将视图分割成两部分,废话不多说,下面来介绍一下SplitView的基本用法. 首先介绍几个SplitView经常用到的属性. ...