CN105022841A - 界面主题的调整系统及其方法 - Google Patents

Abstract

本发明提供一种界面主题的调整系统及其方法。一种界面主题的调整系统，包括：主题库模块，包含至少一个CSS文件，每个所述CSS文件定义一种主题，所述主题具有唯一id；主题选择模块，接收主题选择指令，选择对应的主题；主题关联模块，将所选择的主题和与之对应CSS文件形成关联，获取对应的CSS文件名；以及主题设置模块，用于根据所述对应的CSS文件名将所选择的主题应用于界面。本发明界面主题的调整系统及其方法，应用于网页或者应用程序，可以即时、动态改变界面的主题。

Description

界面主题的调整系统及其方法

技术领域

本发明涉及网页或者应用程序的界面管理，尤指可以运行脚本语言和CSS的设备上网页或者应用程序界面管理。

背景技术

通常情况下，一个网页或者应用程序(APP)的界面风格是单一的，即具有唯一性。但是现实生活中，使用产品的用户是多种多样的，即使从单纯的审美角度来看，不同的用户对美的感受也是不尽相同的，此时单一的界面主题往往不能够满足不同需求的用户。随着信息技术的发展和人们对产品要求的提高，很多时候需要让用户可以选择自己喜欢的界面主题，从而大大提高用户体验度，满足不同的用户需要。

中国专利CN2013100767A、B.0公开了一种在界面中提供主题变体，在幻灯片文件中存储主题变体系列标识符，该标识符允许对主题的后续标识，并允许演示程序随后标识供在主题变体图库上显示的主题变体。标识文件结构，该文件结构允许向后兼容，以使得具有主题变体的幻灯片的演示文件能够由不实现主题变体的较早版本的演示程序来打开。该专利提出的界面主题改变技术需要与服务器通信，使用环境、流程和需要的设备都比较复杂。

中国专利CN201210491396.5公开了一种网页主题确定的方法，首先给出了基于布局标签的网页HTML标签文档划分方法，接着提出了块的概念，并对划分后的语义块进行位置编号，构造出带有编号的布局标签DOM树，最后基于网页块的位置进行主题的确定和主题链接的提取；使用户能迅速获取主题信息，扩展了Web的可用性。该专利需要对网页HTML标签划分块，然后构造带编号的DOM树，最后基于网页块的位置进行主题的确定和主题链接的提取，操作比较复杂。

发明内容

本发明目的是提供一种界面主题的调整系统及其方法，应用于网页或者应用程序，可以即时、动态改变界面的主题。为了实现本发明目的，采用以下技术方案：

一种界面主题的调整系统，包括：

主题库模块，包含至少一个CSS文件，每个所述CSS文件定义一种主题，所述主题具有唯一id；

主题选择模块，接收主题选择指令，选择对应的主题；

主题关联模块，将所选择的主题和与之对应CSS文件形成关联，获取对应的CSS文件名；

以及主题设置模块，用于根据所述对应的CSS文件名将所选择的主题应用于界面。

本方案利用层叠样式表(通用名称CSS)，对主题进行定义，可定义的内容包括背景图片、颜色、字体、文字大小等等，凡是CSS支持的内容，均可定义。通过对脚本语言接受用户指令并进行主题切换，用户可以十分方便的对网页或者应用程序(包括电脑程序和手机应用程序)选择主题。只要能够运行脚本语言和CSS的设备上，一切网页或应用程序均可利用本发明界面主题的调整系统进行主题调整。

优选地，所述主题选择模块包括至少一选择按钮，所述选择按钮由点击或触摸触发并显示可选择的主题。

本方案提供了主题选择的优选方式，选择按钮，用户直接点击即可，无需使用任何计算机语言发出命令。

进一步优选地，所述主题选择模块还包括主题缩略图显示模块，所述显示可选择的主题即为显示主题缩略图；

所述主题选择模块响应点击或触摸某个主题缩略图的事件，选择需要应用的主题，并向所述主题关联模块发送所选择的主题缩略图相应的主题的id。

本方案提供了选择主题时的优选显示方式——主题缩略图，其表现清楚直观，用户查看方便。

进一步优选地，所述主题选择模块还包括一恢复按钮，所述恢复按钮由点击或触摸触发并恢复默认主题。

本方案提供了恢复默认主题的实现方式，操作简单。

所述主题关联模块接收所述主题选择模块发来相应的主题的id，获取对应的CSS文件名；

并且所述主题设置模块根据所述对应的CSS文件名链接到对应的CSS文件，将所选择的主题应用于界面。

本发明还提供一种界面主题的调整方法，包括以下步骤，

S1根据主题选择指令，选择对应的主题，每个所述主题由一个对应的CSS文件定义并具有唯一id；

S2将所选择的主题和与之对应CSS文件形成关联，获取对应的CSS文件名；

S3根据所述对应的CSS文件名将所选择的主题应用于界面。

进一步优选地，若未发出主题选择指令，则界面使用默认主题，所述默认主题由一个对应的CSS文件定义。事实上，使用本发明系统或方法的网页或者应用程序在刚刚打开时，界面使用默认主题。

进一步优选地，发出主题选择指令通过一选择按钮实现，所述选择按钮由点击或触摸触发并显示可选择的主题；所述显示可选择的主题为显示主题缩略图，选择主题缩略图则选择需要应用的主题。

进一步优选地，还包括一恢复步骤，所述恢复步骤通过一恢复按钮实现，所述恢复按钮由点击或触摸触发并恢复默认主题。

进一步优选地，所述步骤S2具体为，响应对选择主题缩略图的点击或触摸事件，获取选择需要应用的主题的id，并根据该id获取对应的CSS文件的文件名；

并且，步骤S3具体为根据所述对应的CSS文件名链接到对应的CSS文件，将所选择的主题应用于界面。

本发明至少具有以下有益效果之一：

1.利用脚本语言和CSS实现本发明的界面主题的调整系统，对主题的定义自由灵活，实现方便简单。

2.用户利用本发明系统和方法即时、动态地改变界面的主题，操作方便快捷。

3.凡是能够运行脚本语言和CSS的设备上，一切网页或应用程序均可利用本发明系统和方法进行主题调整，可以应用在各种电脑、手机、路由器、平板等等各种设备上，应用面宽。

4.本发明通过增加缩略图和与之对应的CSS文件，并使用脚本语言增加缩略图和CSS文件的关联，即可实现用户界面主题的扩展，具有很好的可扩展性。

5.本发明经实际测试使用，效果理想，功能稳定。

附图说明

下面结合附图和具体实施方式对本发明作进一步详细说明：

图1为界面主题的调整系统第一实施例示意图；

图2为在选择主题时界面显示内容的示意图；

图3为界面主题的调整方法流程示意图；

图4为默认主题界面显示示意图；

图5为bule主题界面显示示意图。

图中：

100 界面主题的调整系统  10 界面

1 主题库模块  2 主题选择模块  3 主题关联模块  4 主题设置模块

21 选择按钮  22 恢复按钮  A、B 主题缩略图

具体实施方式

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，以下说明和附图对于本发明是示例性的，并且不应被理解为限制本发明。以下说明描述了众多具体细节以方便对本发明理解。然而，在某些实例中，熟知的或常规的细节并未说明，以满足说明书简洁的要求。

CSS是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS是能够真正做到网页表现与内容分离的一种样式设计语言。CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

应用本发明的设备通常包括处理器，含单核处理器或多核处理器。处理器也可称为一个或多个微处理器、中央处理单元(CPU)等等。更具体地，处理器可为复杂的指令集计算(CISC)微处理器、精简指令集计算(RISC)微处理器、超长指令字(VLIW)微处理器、实现其他指令集的处理器，或实现指令集组合的处理器。处理器还可为一个或多个专用处理器，诸如专用集成电路(ASIC)、现场可编程门阵列(FPGA)、数字信号处理器(DSP)、网络处理器、图形处理器、网络处理器、通信处理器、密码处理器、协处理器、嵌入式处理器、或能够处理指令的任何其他类型的逻辑部件。处理器用于执行本发明所讨论的操作和步骤的指令。

应用本发明的设备的操作系统可为任何类型的操作系统，例如微软公司的Windows、Windows Phone，苹果公司IOS，谷歌公司的Android，以及Linux、Unix操作系统或其他实时或嵌入式操作系统诸如VxWorks等。

第一实施例

如图1为界面主题的调整系统第一实施例示意图。界面主题的调整系统100，包括：

主题库模块1，包含至少一个CSS文件，每个CSS文件定义一种主题，每个主题具有唯一id。

主题选择模块2，接收主题选择指令，选择对应的主题。

主题关联模块3，将所选择的主题和与之对应CSS文件形成关联，获取对应的CSS文件名。

以及主题设置模块4，用于根据对应的CSS文件名将所选择的主题应用于界面。

主题选择模块2，主题关联模块3，以及主题设置模块4均采用脚本语言实现，例如JavaScript。JavaScript一种直译式脚本语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言。

第二实施例

如图1、图2本实施例其他部分与上一实施例相同，包括主题库模块1、主题选择模块2，主题关联模块3，以及主题设置模块4。

如图1、图2主题选择模块2进一步包括选择按钮21、恢复按钮22以及主题缩略图A、B。图2为界面10主题的调整系统第二实施例中界面实例示意图。为了表达方便，图2中省略了其他与本发明无关的网页或者应用程序的内容。此外，选择按钮21和恢复按钮22在界面10上具体显示的字的内容(例如图中的“选择主题”、“恢复主题”)可随意设置，无论为何种内容(包括图片)均不影响本发明的实现并包括在本发明的保护范围中。选择按钮21和恢复按钮22表达其功能。主题缩略图的数量不限，有多少主题，就有对应的多少主题缩略图(以下实施例相同)。图2中以两个主题缩略图A、B为例，对应两个主题。

选择按钮21由点击或触摸触发并显示可选择的主题。显示可选择的主题即为显示主题缩略图A、B。主题选择模块2响应点击或触摸某个主题缩略图A或B的事件，选择需要应用的主题，并向主题关联模块3发送所选择的主题缩略图A或B相应的主题的id。

恢复按钮22由点击或触摸触发并恢复默认主题。

主题关联模块3接收主题选择模块2发来的主题的id，获取对应的CSS文件名。主题设置模块4根据对应的CSS文件名链接到对应的CSS文件，将所选择的主题应用于界面10。

如图3，本发明还提供一种界面主题的调整方法，包括以下步骤，

S1根据主题选择指令，选择对应的主题，每个主题由一个对应的CSS文件定义并具有唯一id；

S2将所选择的主题和与之对应CSS文件形成关联，获取对应的CSS文件名；

S3根据对应的CSS文件名将所选择的主题应用于界面。

第三实施例

下面，通过一个采用JavaScript脚本实现的本发明的实施例，说明本发明的优选方法：

首先CSS文件定义三种用户界面10的主题，对应的三个CSS文件名称分别default.css、blue.css和white.css。

default.css相应的主题为默认主题，内容为

body{

    background:#fff；

}

其定义了默认主题的背景为空白。

blue.css相应的主题id为blue，内容为：

其定义了blue主题的背景为jpg格式的图片“images/1.jpg”，以及该背景显示位置为“font-size:20px”，字体颜色为“blue”即蓝色。

white.css相应的主题id为blue，内容为：

其定义了white主题的背景为jpg格式的图片“images/2.jpg”，以及设置字体大小为“font-size:20px”，字体颜色为“white”即白色。

CSS可定义的内容包括背景图片、颜色、字体、文字大小等等，凡是CSS支持的内容，均可定义。本实施例中为了简便表达仅仅定义了背景图片和字体大小，仅为示例，不可理解为限制。

者应用程序在刚刚打开时，界面10使用默认主题。默认主题由上述名称为default.css的CSS文件定义。如图4所示，该主题背景为空白。为了表达方便，图4中省略了其他与本发明无关的网页或者应用程序的内容(以下图也是如此。)。

脚本引用该default.css具体内容为：<link href＝’default.css’rel＝"stylesheet"media＝"screen"id＝’cssLinkId’>”，设置了一个id为“cssLinkId”，目的是为了在后续中通过改变此id对应的引入的css文件来设置和改变界面10的主题。media＝"screen"表示显示的媒体为屏幕，rel＝"stylesheet"表示指定的是外部加载的样式表。

如图2，用户发出主题选择指令通过选择按钮21实现，点击或触摸选择按钮21由触发并显示可选择的主题；显示可选择的主题为显示主题缩略图A、B。主题缩略图A对应blue主题，主题缩略图B对应white主题。选择主题缩略图A或B则选择需要应用的主题。

假设用户点击主题缩略图A，则响应对选择主题缩略图的点击或触摸事件，获取选择需要应用的主题的id即bule，并根据该id获取对应的CSS文件的文件名blue.css。根据对应的CSS文件名blue.css链接到对应的CSS文件，将所选择的主题bule应用于界面10。此时的界面10如图5所示。同样的，如果用户点击缩略图B，则主题white应用于界面10。

在图5的基础上，当用户点击恢复按钮，将恢复默认主题，如图4所示。

应当说明的是，上述实施例均可根据需要自由组合。以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干省略、改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (10)

1.一种界面主题的调整系统，其特征在于，包括：

主题库模块，包含至少一个CSS文件，每个所述CSS文件定义一种主题，所述主题具有唯一id；

主题选择模块，接收主题选择指令，选择对应的主题；

主题关联模块，将所选择的主题和与之对应CSS文件形成关联，获取对应的CSS文件名；

以及主题设置模块，用于根据所述对应的CSS文件名将所选择的主题应用于界面。

2.根据权利要求1所述的界面主题的调整系统，其特征在于，所述主题选择模块包括至少一选择按钮，所述选择按钮由点击或触摸触发并显示可选择的主题。

3.根据权利要求2所述的界面主题的调整系统，其特征在于，所述主题选择模块还包括主题缩略图显示模块，所述显示可选择的主题即为显示主题缩略图；

所述主题选择模块响应点击或触摸某个主题缩略图的事件，选择需要应用的主题，并向所述主题关联模块发送所选择的主题缩略图相应的主题的id。

4.根据权利要求2所述的界面主题的调整系统，其特征在于，所述主题选择模块还包括一恢复按钮，所述恢复按钮由点击或触摸触发并恢复默认主题。

5.根据权利要求3所述的界面主题的调整系统，其特征在于，所述主题关联模块接收所述主题选择模块发来相应的主题的id。，获取对应的CSS文件名；

并且所述主题设置模块根据所述对应的CSS文件名链接到对应的CSS文件，将所选择的主题应用于界面。

6.一种界面主题的调整方法，其特征在于，包括以下步骤，

S1根据主题选择指令，选择对应的主题，每个所述主题由一个对应的CSS文件定义并具有唯一id；

S2将所选择的主题和与之对应CSS文件形成关联，获取对应的CSS文件名；

S3根据所述对应的CSS文件名将所选择的主题应用于界面。

7.根据权利要求6所述的界面主题的调整方法，其特征在于，若未发出主题选择指令，则界面使用默认主题，所述默认主题由一个对应的CSS文件定义。

8.根据权利要求6或7所述的界面主题的调整方法，其特征在于，发出主题选择指令通过一选择按钮实现，所述选择按钮由点击或触摸触发并显示可选择的主题；所述显示可选择的主题为显示主题缩略图，选择主题缩略图则选择需要应用的主题。

9.根据权利要求7所述的界面主题的调整方法，其特征在于，还包括一恢复步骤，所述恢复步骤通过一恢复按钮实现，所述恢复按钮由点击或触摸触发并恢复默认主题。

10.根据权利要求8所述的界面主题的调整方法，其特征在于，所述步骤S2具体为，响应对选择主题缩略图的点击或触摸事件，获取选择需要应用的主题的id，并根据该id获取对应的CSS文件的文件名；

并且，步骤S3具体为根据所述对应的CSS文件名链接到对应的CSS文件，将所选择的主题应用于界面。