Unify学习笔记1

好久没有写博客了，是因为自己懒惰，也因琐事繁杂，觉得写东西太费时间。

最近时间稍微多了些，又想学点啥了，没办法不追求进步肯定会倒退。学习最好的办法之一就是记录下学习过程的心得体会了。

Unify是可以切换主题风格的。就从如何切换主题入手吧。

<i class="style-switcher-btn fa fa-cogs hidden-xs"></i>

此部分显示切换主题的图标。样式如下：

i.style-switcher-btn {
   <strong>right: 0;
   top: 37px;</strong>
   color: #fff;
   font-size: 18px;
   cursor: pointer;
   z-index: 555555;
  <strong> position: fixed;</strong>
   padding: 9px 10px;
   background: #222;
   border-radius: 3px 0 0 3px !important;
}


i.style-switcher-btn:hover {
   background:#000;
}

位置设为固定，z-index设置很大的值。

切换主题的面板代码如下，面板和切换主题的图标交替显示，位置相同，虽然z-index相同，但面板代码在后，因此都显示时切换图标就被挡住了：

<div class="style-switcher animated fadeInRight">
    <div class="style-swticher-header">
        <div class="style-switcher-heading">Style Switcher</div>            
        <div class="theme-close"><i class="icon-close"></i></div>
    </div>

    <div class="style-swticher-body">
        <!-- Theme Colors -->
        <div class="style-switcher-heading">Theme Colors</div>
        <ul class="list-unstyled">
            <li class="theme-default theme-active" data-style="default" data-header="light"></li>
            <li class="theme-blue" <strong>data-style</strong>="blue" <strong>data-header</strong>="light"></li>
            <li class="theme-orange" data-style="orange" data-header="light"></li>
            <li class="theme-red" data-style="red" data-header="light"></li>
            <li class="theme-light" data-style="light" data-header="light"></li>
            <li class="theme-purple last" data-style="purple" data-header="light"></li>
            <li class="theme-aqua" data-style="aqua" data-header="light"></li>
            <li class="theme-brown" data-style="brown" data-header="light"></li>
            <li class="theme-dark-blue" data-style="dark-blue" data-header="light"></li>
            <li class="theme-light-green" data-style="light-green" data-header="light"></li>
            <li class="theme-dark-red" data-style="dark-red" data-header="light"></li>
            <li class="theme-teal last" data-style="teal" data-header="light"></li>
        </ul>

        <!-- Theme Skins -->
        <div class="style-switcher-heading">Theme Skins</div>
        <div class="row no-col-space margin-bottom-20 skins-section">
            <div class="col-xs-6">
                <button data-skins="default" class="btn-u btn-u-xs btn-u-dark btn-block active-switcher-btn handle-skins-btn">Light</button>
            </div>
            <div class="col-xs-6">
                <button data-skins="dark" class="btn-u btn-u-xs btn-u-dark btn-block skins-btn">Dark</button>
            </div>
        </div>            

        <hr>

        <!-- Layout Styles -->
        <div class="style-switcher-heading">Layout Styles</div>
        <div class="row no-col-space margin-bottom-20">
            <div class="col-xs-6">
                <a href="javascript:void(0);" class="btn-u btn-u-xs btn-u-dark btn-block active-switcher-btn wide-layout-btn">Wide</a>                
            </div>
            <div class="col-xs-6">
                <a href="javascript:void(0);" class="btn-u btn-u-xs btn-u-dark btn-block boxed-layout-btn">Boxed</a>                
            </div>
        </div>            

        <hr>

        <!-- Theme Type -->
        <div class="style-switcher-heading">Theme Type</div>
        <div class="row no-col-space margin-bottom-10">
            <div class="col-xs-6">
                <a href="Shop-UI/index.html" class="btn-u btn-u-xs btn-u-dark btn-block">Shop UI <small class="dp-block">Template</small></a>
            </div>
            <div class="col-xs-6">
                <a href="One-Page/index.html" class="btn-u btn-u-xs btn-u-dark btn-block">One Page <small class="dp-block">Template</small></a>
            </div>
        </div>           
    </div>
</div>

其中面板的关闭按钮是使用了图标，图标来自于一个插件叫line-icons。

面板中的样式中规中矩，布局很规则。

下面看看脚本。

网页加载完毕执行

StyleSwitcher.initStyleSwitcher();     

其中主要做了如下事情：

jQuery('.style-switcher-btn').click(function () {
                jQuery('.style-switcher').show();
            });

            jQuery('.theme-close').click(function () {
                jQuery('.style-switcher').hide();
            });

上面代码用来控制切换图标和关闭面板的点击事件。

jQuery('li', panel).click(function () {
                <strong>var color = jQuery(this).attr("data-style");
                var data_header = jQuery(this).attr("data-header");</strong>
                setColor(color, data_header);
                jQuery('.list-unstyled li', panel).removeClass("theme-active");
                jQuery(this).addClass("theme-active");
            });

            var setColor = function (color, data_header) {
                jQuery('#style_color').attr("href", "assets/css/theme-colors/" + color + ".css");
                if(data_header == 'light'){
                    jQuery('.logo img').attr("src", "assets/img/themes/logo1-" + color + ".png");
                    jQuery('#logo-footer').attr("src", "assets/img/themes/logo2-" + color + ".png");
                } else if(data_header == 'dark'){
                    jQuery('.logo img').attr("src", "assets/img/themes/logo1-" + color + ".png");
                    jQuery('#logo-footer').attr("src", "assets/img/themes/logo2-" + color + ".png");
                }
            }

上面代码设置主题颜色点击时的响应，颜色显示在ul的li中，通过设置的data属性记录颜色信息。每次点击一个颜色，首先获取到颜色值，然后通过Id找到指定的样式表信息<link rel="stylesheet" href="assets/css/theme-colors/default.css" id="style_color">，将信息设置为新的值。同样换掉logo。
对于Skin和layout的切换大致类似。