一种宽带猫web界面切换方法
【专利摘要】一种宽带猫web界面切换方法，包括：步骤1：将需要改变的用户界面使用样式类进行替换；步骤2：创建各种样式表CSS，在所述样式表CSS中定义所述样式类；步骤3：在web页面中创建自定义控件，将自定义控件对应样式表CSS；步骤4：触发自定义控件，替换当前样式表CSS，加载样式表CSS中对应样式类下的属性值。采用本发明的方法后，通过样式类找出需要替换的位置，然后加载样式类属性值，即样式表CSS，方便的完成宽带猫的背景风格变换，满足广大用户的不同需求，客户体验良好。
【专利说明】一种宽带猫web界面切换方法
【技术领域】
[0001]本发明涉及宽带猫【技术领域】，特别是涉及一种宽带猫web界面切换方法。
【背景技术】
[0002]在宽带猫中，web是基本的元素，当中的logo及背景颜色是web当中最基本的元素，是客户体验的第一感觉。通常，我们的宽带猫会面对形形色色的用户，每个用户在视觉上对颜色纷纷不一，有些喜欢橘色，有些喜欢红色。目前，宽带猫都只有单一的一种颜色，故而只能满足一部分的视觉要求。
[0003]现有宽带猫的用户界面的logo颜色以及背景颜色都是单一固定不变的，实现web的背景颜色的的方法是直接在源代码上再重新编写，无法做到在使用同一个界面的风格下支持多种背景颜色的切换。
【发明内容】
[0004]基于此，有必要提供一种方便用户切换风格的宽带猫web界面切换方法。
[0005]一种宽带猫web界面切换方法，包括:
[0006]步骤1:将需要改变的用户界面使用样式类进行替换；
[0007]步骤2:创建各种样式表CSS，在所述样式表CSS中定义所述样式类；
[0008]步骤3:在web页面中创建自定义控件，将自定义控件对应样式表CSS ；
[0009]步骤4:触发自定义控件，替换当前样式表CSS，加载样式表CSS中对应样式类下的属性值。
[0010]进一步的，所述在web页面中创建自定义控件，将自定义控件对应样式表CSS的步骤具体包括:
[0011]在web页面中创建自定义控件；
[0012]自定义控件的ID值与样式表CSS名称匹配。
[0013]进一步的，所述样式类下的属性值包括背景颜色和/或加载文件的名称。
[0014]进一步的，所述背景颜色包括红、橙、黄、绿、青、蓝、紫。
[0015]进一步的，还包括:
[0016]定义一个link标签,连接一个默认的样式表CSS。
[0017]采用本发明的方法后，通过样式类找出需要替换的位置，然后加载样式类属性值，即样式表CSS，方便的完成宽带猫的背景风格变换，满足广大用户的不同需求，客户体验良好。
【专利附图】
【附图说明】
[0018]图1为本发明提供的一个实施例的流程图；
[0019]图2为本发明提供的另一个实施例的流程图。【具体实施方式】
[0020]为了使本发明的目的、技术方案及优点更清楚明白，以下结合附图及实施例，对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
[0021]参阅图1，本发明提供的一个实施例的web背景切换方法，包括:
[0022]步骤S101，将需要改变的用户界面使用样式类进行替换；
[0023]原来在代码中直接编写的背景、风格、字体或者图片，现在使用样式类，方便替换，知道要替换的是什么，在哪里替换。例如，原来直接把图片加在代码里，现在就是用一个picture的样式类,替换的时候,看到picture就知道在哪里。
[0024]步骤S102，创建各种样式表CSS，在所述样式表CSS中定义所述样式类；
[0025]步骤SlOl就是找到哪里是需要替换的，步骤S102是在步骤SlOl找到替换的位置后具体换成什么。例如,在样式类red中，其样式表red.css为样式类red下的属性值，包括背景颜色red和加载的文件的名称。
[0026]步骤S103，在web页面中创建自定义控件，将自定义控件对应样式表CSS ；
[0027]在优选实施方式中，步骤S103具体包括:
[0028]在web页面中创建自定义控件；
[0029]自定义控件的ID值与样式表CSS名称匹配，且——对应。
[0030]例如，自定义控件对应切换红色背景的控件的ID值与样式表red.css的名称red匹配。
[0031]步骤S104，触发自定义控件，替换当前样式表CSS，加载样式表CSS中对应样式类下的属性值。
[0032]在优选实施方式中，样式表类下的属性值包括背景颜色和/或加载文件的名称。可以理解，样式类下的属性值不限于背景颜色和/或加载文件的名称，还可以是字体的大小、字体等。背景颜色包括红、橙、黄、绿、青、蓝、紫，可以理解，背景颜色可以为任何颜色。
[0033]参阅图2，为本发明提供的另一个实施例的宽带猫web界面切换方法，包括:
[0034]步骤S201，将需要改变的用户界面使用样式类进行替换；
[0035]原来在代码中直接编写的背景、风格、字体或者图片，现在使用样式类，方便替换的时候，知道要替换的是什么，在哪里替换。例如，原来直接把图片加在代码里，现在就是用一个picture的样式类,替换的时候,看到picture就知道在哪里。
[0036]步骤S202，创建各种样式表CSS，在所述样式表CSS中定义所述样式类；
[0037]步骤S201就是找到哪里是需要替换的，步骤S202是在步骤S201找到替换的位置后具体换成什么。例如,在样式类red中，其样式表red.css为样式类red下的属性值，包括背景颜色red和加载的文件的名称。
[0038]步骤S203，在web页面中创建自定义控件，将自定义控件对应样式表CSS ；
[0039]在优选实施方式中，步骤S203具体包括:
[0040]在web页面中创建自定义控件；
[0041]自定义控件的ID值与样式表CSS名称匹配，且——对应。
[0042]例如，自定义控件对应切换红色背景的控件的ID值与样式表red.css的名称red匹配。[0043]步骤S204，触发自定义控件，替换当前样式表CSS，加载样式表CSS中对应样式类下的属性值；
[0044]在优选实施方式中，样式表类下的属性值包括背景颜色和/或加载文件的名称。可以理解，样式类下的属性值不限于背景颜色和/或加载文件的名称，还可以是字体的大小、字体等。背景颜色包括红、橙、黄、绿、青、蓝、紫，可以理解，背景颜色可以为任何颜色。
[0045]步骤S205，定义一个link标签，连接一个默认的样式表CSS。
[0046]在宽带猫上电后,根据link标签连接一个默认的样式表CSS。默认样式表CSS为应用最广泛的设置，适合大众用户。
[0047]采用本发明的方法后，通过样式类找出需要替换的位置，然后加载样式类属性值，即样式表CSS，方便的完成宽带猫的背景风格变换，满足广大用户的不同需求，客户体验良好。
[0048]以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。
【权利要求】
1.一种宽带猫web界面切换方法，其特征在于，包括: 步骤1:将需要改变的用户界面使用样式类进行替换； 步骤2:创建各种样式表CSS，在所述样式表CSS中定义所述样式类； 步骤3:在web页面中创建自定义控件，将自定义控件对应样式表CSS; 步骤4:触发自定义控件，替换当前样式表CSS，加载样式表CSS中对应样式类下的属性值。
2.根据权利要求1所述的宽带猫web界面切换方法，其特征在于，所述在web页面中创建自定义控件，将自定义控件对应样式表CSS的步骤具体包括: 在web页面中创建自定义控件； 自定义控件的ID值与样式表CSS名称匹配。 宽带猫web界面
3.根据权利要求1所述的宽带猫web界面切换方法，特征在于，所述样式类下的属性值包括背景颜色和/或加载文件的名称。
4.根据权利要求3所述的宽带猫web界面切换方法，其特征在于，所述背景颜色包括红、橙、黄、绿、青、蓝、紫。
5.根据权利要求1所述的宽带猫web界面切换方法，其特征在于，还包括: 定义一个link标签,连接一个默认的样式表CSS。
【文档编号】G06F9/445GK103473086SQ201310385776
【公开日】2013年12月25日 申请日期:2013年8月29日 优先权日:2013年8月29日
【发明者】唐芬芬 申请人:上海斐讯数据通信技术有限公司