框架换肤功能实现

开发工具与关键技术：VS 后端

作者：陈芝番

撰写时间：2019.6.25

现在所说切换皮肤就是切换框架颜色风格，这里只说三种颜色风格，根据自己喜欢颜色的风格，换颜色的控件的背景色或者字的颜色亦或其他…引用的属性的值就好了。

框架换肤功能实现

九宫肤格切换颜色风格改变源码如下：

框架换肤功能实现

颜色风格改变效果：

框架换肤功能实现

然后对color_div进行声明，基于class的选择性的性能相对于基于id选择器开销很大，因为其需要遍历所有DOM元素。this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是有一个总原则，那就是this指的是调用函数的那个对象。功能实现部分源码展示：

var colorIndex = 0;

$(function(){

changeColor(colorIndex);

$(".hidden-xs").click(function(){

$("#color_div").hide();

});

$("#color").hover(function(){

$("#color_div").show();

});

$(".color_ul li").each(function(index){

$(this).click(function(){

if(index<5){

changeColor(index)

}else {

changeColor(0)

}

})

});

function changeColor(index){

var logo = $(".logo");

var navbar = $(".skin-blue .main-header .navbar");

var left_Side = $(".skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side");

var header = $(".skin-blue .sidebar-menu > li.header");

var treeview_menu = $(".skin-blue .sidebar-menu > li > .treeview-menu");

var aa = $(".skin-blue .sidebar-menu > li.active > a");

var page_tabs_content = $(".content-wrapper .content-tabs .page-tabs .page-tabs-content a");

if(index==0) {

logo.addClass("logo1");

navbar.addClass("navbar1");

left_Side.addClass("left-side1");

header.addClass("header1");

treeview_menu.addClass("treeview-menu1");

aa.addClass("a0");

logo.removeClass("logo2");

navbar.removeClass("navbar2");

left_Side.removeClass("left-side2");

header.removeClass("header2");

treeview_menu.removeClass("treeview-menu2");

aa.removeClass("a2");

logo.removeClass("logo3");

navbar.removeClass("navbar3");

left_Side.removeClass("left-side3");

header.removeClass("header3");

treeview_menu.removeClass("treeview-menu3");

aa.removeClass("a3");

logo.removeClass("logo4");

navbar.removeClass("navbar4");

left_Side.removeClass("left-side4");

header.removeClass("header4");

treeview_menu.removeClass("treeview-menu4");

aa.removeClass("a4");

logo.removeClass("logo5");

navbar.removeClass("navbar5");

left_Side.removeClass("left-side5");

header.removeClass("header5");

treeview_menu.removeClass("treeview-menu5");

aa.removeClass("a5");}

结语：框架换肤需要用到的知识点，context就是限定查找的范围，context必须是一个DOM元素，context底层还是用了.find()方法来实现的。还有基于class的选择性的性能相对于基于id选择器开销很大，因为其需要遍历所有DOM元素。

框架换肤功能实现

相关推荐