PS:

https://github.com/hzlzh/Front-End-Standards/wiki/HTML-CSS-JS-i18n

本文原始思路起源于此网址,请自行查看。

本文只是简单的一个多语言实现,在刷新时会体现。如果想要更加灵活的应用请自行研究,但是本文一定会对你有所帮助。

正文:

在有想法实现多语言之后,你的第一想法是什么?最简单的想法是一个HTML页面上两个按钮或者链接,然后点击中文就切换中文,点击英文就切换英文。本文的案例是使用两个文字链接,通过cookie实现中英文切换,使点击不同的链接在刷新页面时弹出对应语种的提示框。

所以,问题来了,你要先做什么。

如果没有任何思路,就先搭个框架吧,先写个HTML页面包含两个链接。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<a>中文</a>
<a>English</a>
</body>
</html>

刚刚说了,本文是通过cookie来实现中英文切换的,那么我们就是需要读取cookie然后确定是哪种语言,然后显示相应的提示框。读取cookie,该段代码写在body中,也就是说当cookie读取到chinese时就调用相应的js文件,此处js后面再讲。你只需要知道是对应于该种语言的js即可。

<script>
if (document.cookie.indexOf("chinese") > ) {
document.write("<script src='/js/cn.js'><\/script>");
}
else {
document.write("<script src='/js/en.js'><\/script>");
}
</script>

好了,框架搭好了,然后呢,现在运行只能看见两个链接,点击,毫无反应。那,我们就是想要他点击有反应,所以此时在链接中需要加入href或者onclick等属性,让他能够使用。

<a href="javascript:SetChinese()">中文</a>
<a href="javascript:SetEnglish()">English</a>

这两个方法是干什么的,是客户端的方法,可是方法的实现呢?所以我们要实现这两个方法。在body中添加以下代码:

<script>
function SetEnglish() {
document.cookie = "language=english";
}
function SetChinese() {
document.cookie = "language=chinese"
}
</script>

上述代码是指在点击English时,将文档的cookie设置为"language=english"。

这下HTML页面大致写完了,别忘了,上述我们并没有解释js文件。

英语js脚本en.js对应:

var $lang = {
"用户名": "Please Enter User Name",
"密码": "Please Enter Password"
};

中文js脚本cn.js对应:

var $lang = {
"用户名": "用户名",
"此处用户名不能为空": "此处用户名不能为空"
};

大致解释为,js中存放key-value键值对,可通过key查找对应的value,那么怎么使用呢。此时运行文件并不能打到效果。

我们必须在HTML文件中获取该key:

在body中方法设置的script底部添加以下代码:

var userName = $lang["用户名"];
window.alert(userName);

第一句是在html中获取key,第二句就是通过对话框的形式,验证你的代码是否正确。

本次点击在下次刷新时起作用。

(一)ASP.NET中JavaScript的中英文(多语言)实现方案的更多相关文章

  1. (二)ASP.NET中JavaScript的中英文(多语言)实现方案(二)

    在ASP.NET中JavaScript的中英文(多语言)实现方案中简单的介绍了js实现多语言的一种方案.下面将要讲述另外一种方法,尽管很相似,但是有些地方也是需要细细琢磨的,不说了,先看看. 在Lan ...

  2. asp.net中javascript与后台c#交互

    asp.net中javascript与后台c#交互 作者:熊猫大叔 字体:[增加 减小] 类型:转载 时间:2015-10-23我要评论,出处:http://www.jb51.net/article/ ...

  3. [转]开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo

    热衷于开源框架探索的我发现ASP.NET MVC与jQuery easyUI的组合很给力.由于原先一直受Ext JS框架的licence所苦恼,于是痛下决心寻找一个完全免费的js框架——easyUI. ...

  4. 开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo(转)

    热衷于开源框架探索的我发现ASP.NET MVC与jQuery easyUI的组合很给力.由于原先一直受Ext JS框架的licence所苦恼,于是痛下决心寻找一个完全免费的js框架——easyUI. ...

  5. Asp.net中后台C#数组与前台Javascript数组交互

    摘自:http://blog.csdn.net/a6225301/article/details/20003305 在上一篇<asp.net中javascript与后台c#交互>中实现了前 ...

  6. 【转载】Asp.Net中使用基于jQuery的javascript前台模版引擎JTemplate

    JTemplate是基于jQuery的开源的前端模版引擎,在Jtemplate模板中可以使用if判断.foreach循环.for循环等操作,使用Jtemplate模板优点在于ajax局部刷新界面时候不 ...

  7. ASP.NET 中整合JavaScript的技巧

    尽管ASP.NET提供了一个强壮的平台,但是开发者也不应忽视诸如JavaScript这样成熟的技术.在这篇文章中,Tony Patton将向您解释在Web开发中如何将JavaScript与ASP.NE ...

  8. ASP.NET中使用JavaScript实现图片自动水平滚动效果

    参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...

  9. asp.net中的<%%> <%#%> <%=%>形式的详细用法 (转载)

    博客分类: ASP.NET   一. <%%>这种格式实际上就是和asp的用法一样的,只是asp中里面是vbscript或者javascript代码,而在asp.net中是.net平台下支 ...

随机推荐

  1. (转)Eclipse 扩大内存

    导入整个大工程的时候 Eclipse总是直接黑屏 然后就不可操作了.就算侥幸进入了Eclipse也会突然在复制,或者 查询某些语句的时候黑屏.极度的影响心情和工作效率. 明显是内存不够的感觉,可是电脑 ...

  2. Linux下的Memcache安装,启动

    一.linux安装memcache 1. 如果通过下载源码进行安装,则需要下载最新版本http://memcached.googlecode.com/files/memcached-1.4.13.ta ...

  3. js keyup、keypress和keydown事件 详解

    js keyup.keypress和keydown事件  详解 js keyup.keypress和keydown事件都是有关于键盘的事件 当一个按键被pressed 或released在每一个现代浏 ...

  4. mybatis 学习一 建立maven项目

    一.直接建立Maven项目方法 1.建立Maven项目 接下来使用Eclipse的maven构建一个web项目,以构建SpringMVC项目为例: 1.1 选择建立Maven Project 选择Fi ...

  5. jQuery解析JSON出现SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data

    SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data 我在使用$.parseJSON解析后 ...

  6. vue-cli中的babel配置文件.babelrc详解

    本文介绍vue-cli脚手架工具根目录的babelrc配置文件 介绍 es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏览器能够识别的代码 ba ...

  7. Mybites和hibernate的优缺点和区别2

    Hibernate与MyBatis都可以是通过SessionFactoryBuider由XML配置文件生成SessionFactory,然后由SessionFactory 生成Session,最后由S ...

  8. day4心得

    装饰器: 定义:本质就是函数,(装饰其他函数)就是为其他函数添加附加功能 原则:1.不能修改被装饰的函数的源代码 2.不能修改被装饰的函数的调用方式 实现装饰器知识储备: 1.函数即"变量& ...

  9. 3.Periodic Tasks

     celery beat是一个调度器,它可以周期内指定某个worker来执行某个任务.如果我们想周期执行某个任务需要增加beat_schedule配置信息.   broker_url='redis:/ ...

  10. Java面向对象-面向对象编程之基本概念

    面向对象这个概念,每本书上的说法定义很多. 我自己根据我的经验,自己归档总结了下, 所谓面向对象,就是 以基于对象的思维去分析和解决问题,万物皆对象: 面向对象经常和面向过程放一起讨论: 这里举例, ...