|
用变量的方式虽然可以解决,但是太复杂。定义变量之后,还需要在每个页面中取出来写在相应的位置,那要定义非常多的id.
我的项目也需要支持多语言,我利用了css
方法如下:
可以写一个模块,在每页判断当前手机的语言,或者让用户手工切换语言,反正切换后,在body标签增加语言标识。例如中文:
- <body class="CN">
- </body>
复制代码 英文:
- <body class="EN">
- </body>
复制代码 在公用样式中这样写:
- .ml-name{
- display:none;
- }
- .CN .cn-name{
- display:inline;
- }
- .EN .en-name{
- display:inline;
- }
复制代码 那么在页面中就可以直接使用:
- <header>
- <span class="ml-name cn-name">返回</span>
- <span class="ml-name en-name">back</span>
- </header>
复制代码 这样当body的class="CN"时,除了cn-name外,其它就会自动隐藏
这种方法的优点是写起来简单,想在哪加就在哪加,也无需用多余的js代码。缺点是较分散,不能统一管理名称。有得必有失。
如果想统一管理,还有另一个办法:
在公共css中这样写:
- .CN [ml="返回"]:before{
- content:"返回";
- }
- .EN [ml="返回"]:before{
- content:"back";
- }
复制代码 在使用时这样写:
- <header>
- <span ml="返回"></span>
- </header>
复制代码 这种方法的优点是在html页面中只须写一行,由css去决定显示的内容,缺点是明明这页只有“返回”两个字,确可能要引入所有程序中使用的字段,造成太多冗余。而且放在一起的话,该起来还是要查的。
我刚开始用的是这种方法,但考虑到性能问题,最终使用了前面一种。
|
|