Hybird's web dynamic skin-changing implementation

Objective

Recently in refactoring the UI framework of a hybird (native shell-wrapped web page), it's time to do the skin-changing function, so here's how I think about the solution.

Expected

The current function of skin rejuvenation is nothing more than a two-way approach.

1. Write several skin files, then switch to use these files to achieve the purpose of skin changing.

I have to say that this is the most common way, the effect is more obvious, but it has a few shortcomings.

Disadvantages:

1. If you change the contents of a skin, the other skin files should also be modified (this is very troublesome, but can be used in the less management of CSS, so it is not a big problem).

2. It is fixed, in use when the skin file is already written, and when I need to dynamically set some properties of the time helpless.

2. Using the less tool, the skin style is dynamically generated when the page is loaded.

But the shortcomings of this approach are obvious.

Disadvantages:

1. Inefficient, for a skin-changing function, but to lead a less tool (after compression of about 126KB), in the terminal web is unbearable.

2. Slow, because there is a skin file compilation (it is called compilation) generation process, at the terminal is also difficult to accept (there may also be page skin flash), if the replacement of the skin and then recompile.

Consider

In view of the disadvantages of the above two methods, one cannot be dynamic and the other is inefficient.

So the above two methods can not be used, only to think of another method, so the analysis of which is the Hybird page needs to change the skin elements

There are several elements that require skin changes:

1. Navigation bar

2. Bottom Bar

3. Default icon

And then look for the properties you want to set:

1. Background color

2. Font Color

3 .... (Mainly these two)

According to the above two things, I found that there is no need to change the page to think of a complex thing, not need to use any tool or switch CSS files. Is it possible to get the property that needs to be set dynamically, then set it to the element that needs to be changed (that's the simple idea).

PS: Some people will say how the skin will need to be dynamically generated. I can only say that it is possible that certain skin properties are known only when the page is started, or when custom skins are supported.

Realize

Say the dry, the implementation of the code is very small, just paste it out for everyone to see.

Ui. Skin = (function(){     varSkintagid = "Bingotouch-skin", TEMPLATE ={BGCOLOR:"@selector {background-color: @BGCOLOR!important;}", COLOR:"@selector {color: @COLOR!important;}"     }         varinit =function(options) {varSettings ={changecolorselector: [". Header", ". Footer"], color:"#FFFFFF", Changebgcolorselector: [". Header", ". Footer"], BgColor:"#278cca", Appendelement:"Head"} $.extend (settings,options); $("#" +skintagid). Remove (); varhtml = "<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) {varhtml = ""; $.each (Changeselectors,function(i, selector) {HTML+ = Template[colortype].replace ("@selector", selector). replace ("@" +colortype, color);                   }); returnhtml; }     return{Init:init}}) ();

The code is simple, just look and see

Summarize

My implementation is simple, of course, the content can be changed less and fixed, but this hybird application of the skin is enough. It can be changed dynamically, and the efficiency is good.

Technology is just technology, tools are tools, not for use.

(End of this article)

Hybird Web Dynamic skin-changing implementation