一种基于Web国际化切换页面样式的方法及装置制造方法及图纸

本发明专利技术公开了一种基于Web国际化切换页面样式的方法及装置，所述方法包括如下步骤：步骤S1，在不同国际化语言文件中定义对某页面元素进行样式修改的样式变量；步骤S2，根据在不同国际化语言文件中已定义好的样式变量，将其加入到需要进行样式处理的页面元素中，以在进行国际化切换时，将定义好的样式覆盖到对应的页面元素中，本发明专利技术通过在国际化语言文件内增加样式变量，实现了在切换不同语言版本的同时，对相应的样式进行修改的目的。

【技术实现步骤摘要】
一种基于Web国际化切换页面样式的方法及装置
本专利技术涉及网页开发
，特别是涉及一种基于Web国际化切换页面样式的方法及装置。
技术介绍
Web“国际化”是针对不同语言的人在访问网站时可以自定义切换对应语言的一种技术，也就是说，对于国际化的Web软件，需要能同时应对世界不同地区和国家的访问，并针对不同地区和国家的访问，提供相应的、符合来访者阅读习惯的页面内容或数据。例如，对于程序中固定使用的文本元素，如菜单栏、导航条等使用的文本元素，或者错误提示信息，状态信息等，需要形成与来访者的地区和国家相对应的语言内容显示。目前，Web国际化通常的使用方式是在对应目录下建立不同的语言文件，在切换语言时，读取相应文件中的翻译，对其进行覆盖并重新读取页面，这些网站往往有着许多来自不同国家、地区的访问来源。但是不同国家的语言存在着个异性，如同一意义的词语长短不一，这就使得切换各个“语言版本”后的页面往往会出现一些显示问题，在样式上难以同时兼顾处理。
技术实现思路
为克服上述现有技术存在的不足，本专利技术之目的在于提供一种基于Web国际化切换页面样式的方法及装置，通过在国际化语言文件内增加样式变量，实现了在切换不同语言版本的同时，对相应的样式进行修改的目的。为达上述目的，本专利技术提出一种基于Web国际化切换页面样式的方法，包括如下步骤：步骤S1，在不同国际化语言文件中定义需对某页面元素进行样式修改的样式变量；步骤S2，根据在不同国际化语言文件中已定义好的样式变量，将其加入到需要进行样式处理的页面元素中进行绑定，以在进行国际化切换时，能够将定义好的样式覆盖到对应的页面元素中。优选地，于步骤S1中，确定需进行样式调整的页面元素，对各页面元素在在不同国际化语言文件中定义进行样式修改的样式变量。优选地，于步骤S1中，对某页面元素进行样式修改的变量在不同国际化语言文件分别定义同一变量名称。优选地，对某页面元素进行样式修改的样式变量的定义以“变量名：变量值”的形式展现。优选地，所述变量值则为各个语言版本下，绑定页面元素需要显示的具体样式。优选地，于步骤S2中，找到需进行样式变动的资源文件，在该资源文件中，找到目标元素对所定义的对应的样式变量进行绑定。优选地，于步骤S2中，对目标元素的绑定使用“:style＝’$t(‘语言文件中定义的变量名’)’”。优选地，于步骤S1中，还通过定义模块来对各样式变量进行区分。优选地，于步骤S2后，还包括如下步骤：骤S3，将页面切换不同语言版本，进行样式调试，直到每个语言版本都能到达预期的显示效果。为达到上述目的，本专利技术还提供一种基于Web国际化切换页面样式的装置，包括：变量定义单元，用于在不同国际化语言文件中定义需对某页面元素进行样式修改的样式变量；变量绑定单元，用于根据在不同国际化语言文件中已定义好的样式变量，将其加入到需要进行样式处理的页面元素中进行绑定，以在进行国际化切换时，能够将定义好的样式覆盖到对应的页面元素中；样式调试单元，用于将页面切换不同语言版本，进行样式调试，直到每个语言版本都能到达预期的显示效果。与现有技术相比，本专利技术具有如下有益效果：本专利技术无需新建额外的样式文件，只需在国际化文件内增加样式变量，借助了国际化语言切换时的特性，不仅可以很方便的随时更改翻译，也可以在更改翻译的同时，对相应的样式进行修改，简单、高效而又便捷。附图说明图1为本专利技术一种基于Web国际化切换页面样式的方法的步骤流程图；图2为本专利技术实施例中国际化语言文件的目录结构示意图；图3为本专利技术实施例中不同国际化语言文件中样式变量的定义示意图；图4为本专利技术实施例中对资源文件中目标元素绑定的流程示意图；图5为本专利技术一种基于Web国际化切换页面样式的装置的系统架构图；图6为本专利技术实施例中基于Web国际化切换页面样式的流程示意图。具体实施方式以下通过特定的具体实例并结合附图说明本专利技术的实施方式，本领域技术人员可由本说明书所揭示的内容轻易地了解本专利技术的其它优点与功效。本专利技术亦可通过其它不同的具体实例加以施行或应用，本说明书中的各项细节亦可基于不同观点与应用，在不背离本专利技术的精神下进行各种修饰与变更。图1为本专利技术一种基于Web国际化切换页面样式的方法的步骤流程图。如图1所示，本专利技术一种基于Web国际化切换页面样式的方法，包括如下步骤：步骤S1，在不同国际化语言文件中定义需对某页面元素进行样式修改的样式变量。对于某一页面元素来说，如果该页面元素需要在不同语言环境下显示不同样式，则该页面元素就需要在语言文件中定义一个变量。在本专利技术具体实施例中，首先找到国际化语言文件所在位置，例如，在本实施例中，国际化语言文件的文件位置为/local，如图2所示，文件夹下有三个语言文件，对应的是简体中文(zh-CN.js)、英文(en.js)以及繁体中文(zh-TW.js)，然后确定需进行样式调整的页面元素，对各页面元素在不同国际化语言文件中定义进行样式修改的样式变量，即对某一需样式调整的页面元素，在不同国际化语言文件中定义需要对其进行样式修改的变量名称，在本专利技术具体实施例中，对某页面元素进行样式修改的变量在不同国际化语言文件分别定义同一变量名称，定义以“变量名：变量值”的形式展现，变量值与资源文件中使用的具体样式的形式有关，变量值则为各个语言版本下，绑定页面元素需要显示的具体样式，其可以为整个完整样式(style)的字符串，也可以为单一CSS样式的具体值，具体如下：情形1，当变量作为某元素的完整style时(如行内样式)，为需要改变的行内样式对应的字符串(如：“width:100px；height:100px；...”)。情形2，当变量作为某元素的具体某一个样式值时(如长度、宽度、颜色等)，则只需要设置这个样式的具体数值(如：“300px”，“red”，...)。在本专利技术中，所述页面元素包括对页面文字、图片、超链接网址、页面元素对应的操作功能以及子页面中的至少一种，假设对需要对某页面元素进行样式修改的变量定义“box”，则在三个语言文件中，分别定义同一变量名“box”，变量的值为各个语言版本下，绑定元素需要显示的具体样式，如图3所示，例如在简体中文(zh-CN.js)下，其变量值为“width:100px；height:50px；color:red；”，在英文(en.js)版本下，其变量值为“width:150px；height:40px；color:red；”，在繁体中文(zh-TW.js)版本下，其变量值为“width:100px；height:40px；color:blue；”，在本专利技术实施例中，变量的值为整个完整的行内样式。步骤S2，根据在不同国际化语言文件中已定义好的样式变量，将其加入到需要进行样式处理的页面元素中，即进行绑定，以在进行国际化切换时，能够将定义好的样式覆盖到本文档来自技高网...

【技术保护点】
1.一种基于Web国际化切换页面样式的方法，包括如下步骤：/n步骤S1，在不同国际化语言文件中定义需对某页面元素进行样式修改的样式变量；/n步骤S2，根据在不同国际化语言文件中已定义好的样式变量，将其加入到需要进行样式处理的页面元素中进行绑定，以在进行国际化切换时，将定义好的样式覆盖到对应的页面元素中。/n

【技术特征摘要】
1.一种基于Web国际化切换页面样式的方法，包括如下步骤：
步骤S1，在不同国际化语言文件中定义需对某页面元素进行样式修改的样式变量；
步骤S2，根据在不同国际化语言文件中已定义好的样式变量，将其加入到需要进行样式处理的页面元素中进行绑定，以在进行国际化切换时，将定义好的样式覆盖到对应的页面元素中。


2.如权利要求1所述的一种基于Web国际化切换页面样式的方法，其特征在于：于步骤S1中，确定需进行样式调整的页面元素，对各页面元素在不同国际化语言文件中定义进行样式修改的样式变量。


3.如权利要求2所述的一种基于Web国际化切换页面样式的方法，其特征在于：于步骤S1中，对某页面元素进行样式修改的变量在不同国际化语言文件定义同一变量名称。


4.如权利要求3所述的一种基于Web国际化切换页面样式的方法，其特征在于：对某页面元素进行样式修改的样式变量的定义以“变量名：变量值”的形式展现。


5.如权利要求4所述的一种基于Web国际化切换页面样式的方法，其特征在于：所述变量值则为各个语言版本下，绑定页面元素需要显示的具体样式。


6.如权利要求5所述的一种基于Web国际化切换页面样式的方法，其特征在...

【专利技术属性】
技术研发人员：李帅，甘磊，郭政，陈勇铨，
申请(专利权)人：上海英方软件股份有限公司，
类型：发明
国别省市：上海;31