jquery实现切换皮肤

这是帮其他组实现的一个小功能，这边记录一下给做同样功能的一个参考好了。
代码地址：https://github.com/liwei26/jquery-change-skin
目前大多数jquery实现换肤思路都是将所有样式文件引入，然后切换样式文件显隐来实现样式的切换，我觉得把所有样式文件都引入不太好，所以做了些改动。大体思路是通过切换皮肤的id来加载对应样式文件。
首先我们需要的依赖库有jquery，jquery-cookie，文件目录格式如下

jquery实现切换皮肤
style里面有两个不同样式文件，分别对应模板skin1，skin2,（注意：css样式文件夹名与后面换肤按钮id相同）
js文件下的changeskin.js为实现换肤的js文件
然后实现换肤

在头部引入默认样式 skin1 并给 link 加上 id

<link rel="stylesheet" href="./style/skin1/index.css" id="skin_css_file">

给换肤按钮添加id


    <div id='change-skin'>
      <span class="skin">换肤</span>
      <ul id="hide" class='display'>
        <li id="skin1" style="list-style: none">模板一</a>
        <li id="skin2" style="list-style: none">模板二</a>
      </ul>
    </div>

换肤函数

$(document).ready(function () {
  $("#hide li").click(function () {
    var skin = $(this).attr("id");
    $('#skin_css_file').attr('href','./style/'+skin+'/index.css')
    $.cookie("skin_name", skin);
  });
  var skin = $.cookie("skin_name");
  if (skin != null) {
    $('#skin_css_file').attr('href','./style/'+skin+'/index.css')
  }

})

a) 给换按钮添加点击事件
b) 获取当前点击事件对应dom的id, id 作为 skin 名字
c) 给样式链接添加选中css路径
d) 将选中skin 名字保存到cookie中,key为skin_name, 有效期可设置

关于更换图标

a) 更换图标颜色
如果想要页面图标也跟着变换颜色，则要采用svg等字体图标
字体图标可以通过css控制样式，不同样式模板给图标写样式即可

b) 更换图标
以阿里矢量图库图标为例，首先将需要的图标@font-face代码准备好。具体参考官网教程（http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code）
然后在html中使用图标，官方示例图标写法如下

<i class='iconfont'>&#x33;</i>

我们对这个做些改动，将图标放在css中维护，首先将i标签中内容（图标名）删除，然后在css文件中添加一个样式


.icon-i1::before { content: "\e618"; }
.icon-i2::before { content: "\e619"; }
.icon-i3::before { content: "\e620"; }

content中内容就是图标对应编号（图标名），有兴趣可以打开@font-face代码中src文件研究），最后将css中的类添加到html文件中

        <li style="list-style: none">
          <i class="iconfont  icon icon-i2"></i>礼物
        </li>
        <li style="list-style: none">
          <i class="iconfont  icon icon-i3"></i>相机
        </li>
        <li style="list-style: none">
          <i class="iconfont  icon icon-i1"></i>金牛
        </li>

这里i标签里面有3个class，分别是官方字体大小等样式，我们自定义的图标颜色，图标

在不同皮肤模板css文件中写不同图标样式即可实现换图标