码迷,mamicode.com
首页 > Web开发 > 详细

hybird之web动态换肤实现

时间:2014-11-26 01:15:14      阅读:271      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   ar   color   使用   sp   strong   文件   

前言

最近在重构个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动态换肤实现

标签:style   blog   io   ar   color   使用   sp   strong   文件   

原文地址:http://www.cnblogs.com/lovesong/p/4122262.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!