[发明专利]一种宽带猫web界面切换方法

说明书

技术领域

本发明涉及宽带猫技术领域，特别是涉及一种宽带猫web界面切换方法。

背景技术

在宽带猫中，web是基本的元素，当中的logo及背景颜色是web当中最基本的元素，是客户体验的第一感觉。通常，我们的宽带猫会面对形形色色的用户，每个用户在视觉上对颜色纷纷不一，有些喜欢橘色，有些喜欢红色。目前，宽带猫都只有单一的一种颜色，故而只能满足一部分的视觉要求。

现有宽带猫的用户界面的logo颜色以及背景颜色都是单一固定不变的，实现web的背景颜色的的方法是直接在源代码上再重新编写，无法做到在使用同一个界面的风格下支持多种背景颜色的切换。

发明内容

基于此，有必要提供一种方便用户切换风格的宽带猫web界面切换方法。

一种宽带猫web界面切换方法，包括：

步骤1：将需要改变的用户界面使用样式类进行替换；

步骤2：创建各种样式表CSS，在所述样式表CSS中定义所述样式类；

步骤3：在web页面中创建自定义控件，将自定义控件对应样式表CSS；

步骤4：触发自定义控件，替换当前样式表CSS，加载样式表CSS中对应样式类下的属性值。

进一步的，所述在web页面中创建自定义控件，将自定义控件对应样式表CSS的步骤具体包括：

在web页面中创建自定义控件；

自定义控件的ID值与样式表CSS名称匹配。

进一步的，所述样式类下的属性值包括背景颜色和/或加载文件的名称。

进一步的，所述背景颜色包括红、橙、黄、绿、青、蓝、紫。

进一步的，还包括：

定义一个link标签，连接一个默认的样式表CSS。

采用本发明的方法后，通过样式类找出需要替换的位置，然后加载样式类属性值，即样式表CSS，方便的完成宽带猫的背景风格变换，满足广大用户的不同需求，客户体验良好。

附图说明

图1为本发明提供的一个实施例的流程图；

图2为本发明提供的另一个实施例的流程图。

具体实施方式

为了使本发明的目的、技术方案及优点更清楚明白，以下结合附图及实施例，对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。

参阅图1，本发明提供的一个实施例的web背景切换方法，包括：

步骤S101，将需要改变的用户界面使用样式类进行替换；

原来在代码中直接编写的背景、风格、字体或者图片，现在使用样式类，方便替换，知道要替换的是什么，在哪里替换。例如，原来直接把图片加在代码里，现在就是用一个picture的样式类，替换的时候，看到picture就知道在哪里。

步骤S102，创建各种样式表CSS，在所述样式表CSS中定义所述样式类；

步骤S101就是找到哪里是需要替换的，步骤S102是在步骤S101找到替换的位置后具体换成什么。例如，在样式类red中，其样式表red.css为样式类red下的属性值，包括背景颜色red和加载的文件的名称。

步骤S103，在web页面中创建自定义控件，将自定义控件对应样式表CSS；

在优选实施方式中，步骤S103具体包括：

在web页面中创建自定义控件；

自定义控件的ID值与样式表CSS名称匹配，且一一对应。

例如，自定义控件对应切换红色背景的控件的ID值与样式表red.css的名称red匹配。

步骤S104，触发自定义控件，替换当前样式表CSS，加载样式表CSS中对应样式类下的属性值。

在优选实施方式中，样式表类下的属性值包括背景颜色和/或加载文件的名称。可以理解，样式类下的属性值不限于背景颜色和/或加载文件的名称，还可以是字体的大小、字体等。背景颜色包括红、橙、黄、绿、青、蓝、紫，可以理解，背景颜色可以为任何颜色。

参阅图2，为本发明提供的另一个实施例的宽带猫web界面切换方法，包括：

步骤S201，将需要改变的用户界面使用样式类进行替换；

原来在代码中直接编写的背景、风格、字体或者图片，现在使用样式类，方便替换的时候，知道要替换的是什么，在哪里替换。例如，原来直接把图片加在代码里，现在就是用一个picture的样式类，替换的时候，看到picture就知道在哪里。

步骤S202，创建各种样式表CSS，在所述样式表CSS中定义所述样式类；