Java堂  


4月 20, 2008

Javascript的国际化方案

归档在: DynamicLanguage — Jet @ 6:50 上午
Tags:
原文出处: http://www.javatang.com/archives/2008/04/20/5034268.html
作者: Jet Mah from Java堂
声明: 可以非商业性任意转载, 转载时请务必以超链接形式标明文章原始出处、作者信息及此声明！

目前Ajax框架是层出不穷，而且功能变得越来越强大，从而使得Web页面发展为现在的三层结构之说：HTML + CSS + Script。在使用Javascript的时候涉及到其中一个国际化的问题。

Javascript中没有像Java那样拥有国际化的方案，但是可以使用一些技巧来达到目的。首先将在脚本中用到的文字全部保存到每个语种的文件中，比如简体中文zh_CN.js、英文en.js等等，然后使用动态语言判断客户端浏览器或Cookies的语言来决定加载对应语种的js文件，这样就实现了国际化的效果。

但是对于保存文本的变量而言有不同的形式，可以每个文本指定一个变量，也可以将所有的变量保存到一个或几个数组中。我发现ExtJS框架是采用通过覆盖对应模块的类属性来实现不同模块中文本的多语种显示。下面我就举例来说明这种方式：

  1. /* base.js */
  2.  
  3. if (javatang== null) var javatang= {};
  4.  
  5. if (javatang.lang == null) javatang.lang = new function(){
  6.     this.sampleText= "This is sample text";
  7.     // 设置下面的属性 ...
  8. };
  9.  
  10. /* zh_CN.js */
  11. this.sampleText = "例子";

在HTML页面中调用方式如下：

  1. <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gbk" >
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=gbk" />
  6. <title> Title </title>
  7. <script type="text/javascript" src="base.js"></script>
  8. <script type="text/javascript" src="zh_CN.js"></script>
  9. <script type="text/javascript">
  10. // 下面开始在页面中调用
  11. </script>
  12. </head>
  13.  
  14. <body>
  15.  
  16. </body>
  17. </html>

参考资料：
了解JavaScript类

10月 28, 2007

用js检测是否安装指定插件的函数

归档在: DynamicLanguage — Jet @ 12:27 下午
Tags:
原文出处: http://www.javatang.com/archives/2007/10/28/2751231.html
作者: Jet Mah from Java堂
声明: 可以非商业性任意转载, 转载时请务必以超链接形式标明文章原始出处、作者信息及此声明！

最近需要实在使用Javascript来检测客户端是否安装Quicktime插件，但是网上都是一些用来检测是否安装Flash插件的例子，而且大多数都是针对于IE的，后来查阅了一些例子然后写了一个用来检测任何插件的通用函数，现在拿出来同大家分享。

  1. /*
  2. * 用来检测是否安装指定的插件
  3. * pluginsName 插件的名称
  4. * activexObjectName 控件名称，主要针对于IE
  5. * author: Jet Mah
  6. * website: http://www.javatang.com/archives/2006/09/13/442864.html 
  7. */ 
  8. function checkPlugins(pluginsName, activexObjectName) {
  9.     // 通常ActiveXObject的对象名称是两个插件名称的组合
  10.     if (activexObjectName == '') activexObjectName = pluginsName + "." + pluginsName;
  11.    
  12.     var np = navigator.plugins;
  13.     // 针对于FF等非IE
  14.     if (np && np.length) {
  15.         for(var i = 0; i < np.length; i ++) {
  16.             if(np[i].name.indexOf(pluginsName) != -1) return true;
  17.         }
  18.         return false;
  19.     }
  20.     // 针对于IE
  21.     else if (window.ActiveXObject) {
  22.         try {
  23.             var axobj =eval("new ActiveXObject(activexObjectName);");
  24.             // 将对象转化为布尔类型
  25.             return axobj ? true : false;
  26.         } catch (e) {
  27.             return false;
  28.         }
  29.     } else {
  30.         // 以上情况都排除则返回false
  31.         return false;
  32.     }
  33. }

最后说明一点的是，如何来查找插件的名称？我是通过Editplus中Html工具栏里面的“插入Object”命令来获取的，比如插入Flash对象之后这个命令会产生一段HTML代码，其中Object中的id属性里面，将名称的空格和最后的Object去除就是对象的名称了。比如Flash的id为“Shockwave Flash Object”，那它的插件名称为“Shockwave”；Quicktime的插件名称为“Quicktime”等等。

参考资料：
JavaScript 判断是否安装了 Flash 插件

10月 6, 2007

Javascript怎样设置文本框的readonly属性？

归档在: RIA, Web&Server — Jet @ 12:51 下午
Tags:
原文出处: http://www.javatang.com/archives/2007/10/06/5104204.html
作者: Jet Mah from Java堂
声明: 可以非商业性任意转载, 转载时请务必以超链接形式标明文章原始出处、作者信息及此声明！

我们知道文本框有一个readonly属性，但是如果使用下面的javascript代码设置该属性时是无效的：

  1. document.formname.inputname.readOnly=true;

后来查阅了一下可以将文本框设置一个id，然后通过getElementById方法查找到该对象，这个时候就可以使用该对象的readOnly属性了，具体代码如下：

  1. <input type="text" id="inputname" />
  2. <script type="text/javascript">
  3. document.getElementById("inputname").readOnly = true;
  4. </script>

我认为使用document.formname.inputname这种方式获取对象本身就是不太好的习惯，而应该使用document.getElementById方式来获取。

参考资料：
用javascript控制readonly属性

9月 13, 2006

遍历JavaScript对象的所有属性

归档在: RIA — Jet @ 11:44 上午
Tags:
原文出处: http://www.javatang.com/archives/2006/09/13/442864.html
作者: Jet Mah from Java堂
声明: 可以非商业性任意转载, 转载时请务必以超链接形式标明文章原始出处、作者信息及此声明！

现在网上充斥着大量关于所谓JavaScript的参考手册或参考资料，大部分都是真对于微软所推出的JScript的，而不是现在我们使用Ajax使用到的JavaScript。然而关于JavaScript的参考资料非常的有限，并且解释的也不是很全面，这样在做JavaScript脚本程序的时候往往要查询大量的资料，很是耗时。
　　今天无意中在网上找到了一个用来遍历JavaScript某个对象所有的属性名称和值的方法，这样想使用方法的时候非常的直观和方便。我整理成了一个函数，代码如下：

  1. /*
  2. * 用来遍历指定对象所有的属性名称和值
  3. * obj 需要遍历的对象
  4. * author: Jet Mah
  5. * website: http://www.javatang.com/archives/2006/09/13/442864.html 
  6. */ 
  7. function allPrpos(obj) { 
  8.     // 用来保存所有的属性名称和值
  9.     var props = "";
  10.     // 开始遍历
  11.     for(var p in obj){ 
  12.         // 方法
  13.         if(typeof(obj[p])=="function"){ 
  14.             obj[p]();
  15.         }else{ 
  16.             // p 为属性名称，obj[p]为对应属性的值
  17.             props+= p + "=" + obj[p] + "\t";
  18.         } 
  19.     } 
  20.     // 最后显示所有的属性
  21.     alert(props);
  22. }

真正的JavaScript而非JScript的参考手册可以看阿江整理的一些资料：http://www.ajiang.net/article/artview.asp?id=469

参考资料：
演示 for…in 循环语句示例
http://www.blabla.cn/js_examples/042_js_for_in.html
AJAX的JavaScript的反射机制
http://tech.163.com/06/0621/09/2K4MLGA20009159V.html

9月 5, 2006

收集到的用js和css实现的菜单

归档在: Web&Server — Jet @ 10:43 上午
Tags: ,
原文出处: http://www.javatang.com/archives/2006/09/05/433463.html
作者: Jet Mah from Java堂
声明: 可以非商业性任意转载, 转载时请务必以超链接形式标明文章原始出处、作者信息及此声明！

一个是下拉菜单，演示：http://www.spacesu.com/cssmenu.html

一个是左右弹出菜单，演示：http://www.alistapart.com/d/horizdropdowns/horizontal2.htm

这两个我打了个包，方便各位下载：menu.js.css.rar

9月 3, 2006

真的是不错的js控制区域方向的代码

归档在: Web&Server — Jet @ 12:06 上午
Tags:
原文出处: http://www.javatang.com/archives/2006/09/03/064362.html
作者: Jet Mah from Java堂
声明: 可以非商业性任意转载, 转载时请务必以超链接形式标明文章原始出处、作者信息及此声明！

无意中找到一个控制区域方向的代码，可以暂停、播放、向上下左右四个方向运行等很多效果，功能非常的强大，控制也非常的方便，于是记录下来。需要说明几点：
1. 代码中

  1. window.onload = new Function("scroll(document.all['testDiv'], 325)")

是初始化脚本用的，第一个参数传递对象，第二个参数传递宽度。另外上面的代码也可以使用下面的代码替换

  1. window.onload = function(){scroll(document.all['testDiv'], 325);}

2. 保存区域的代码

  1. <div id="testDiv" style="border: buttonface 2 solid">...</div>

中间 style里面的border属性不能去掉，因为代码中会使用到的。如果不需要边框可是设置border为0；

3. 可以设置不用的事件，举例如下：

  1. // 鼠标移动到上面
  2. testDiv.onmouseover=function(){testDiv.state='stop';}
  3. // 鼠标移开
  4. testDiv.onmouseout=function(){testDiv.state='scroll';}
  5. // 鼠标单击
  6. testDiv.onclick=function(){testDiv.direction='up'; testDiv.state='scroll';}

4. 代码不适用于FireFox或NetScape浏览器。

代码如下：

  1. <html> 
  2. <head> 
  3. <title>滚动效果</title> 
  4. </head> 
  5. <body STYLE="overflow: hidden; border: 0" topmargin=0 leftmargin=0> 
  6. <table> 
  7. <tr><td style="padding: 5"> 
  8. <div id="testDiv" style="border: buttonface 2 solid"> 
  9. <img src="http://bbs.blueidea.com/images/blue/logo.gif"/> 
  10. </div> 
  11. <script language="JScript"> 
  12. function scroll(obj, oWidth, oHeight, direction, drag, zoom, speed)
  13. {
  14.   var scrollDiv    = obj
  15.   var scrollContent  = document.createElement("span")
  16.   scrollContent.style.position = "absolute"
  17.   scrollDiv.applyElement(scrollContent, "inside")
  18.   var displayWidth  = (oWidth != "auto" && oWidth ) ? oWidth : scrollContent.offsetWidth + parseInt(scrollDiv.currentStyle.borderRightWidth)
  19.   var displayHeight  = (oHeight != "auto" && oHeight) ? oHeight : scrollContent.offsetHeight + parseInt(scrollDiv.currentStyle.borderBottomWidth)
  20.   var contentWidth  = scrollContent.offsetWidth
  21.   var contentHeight  = scrollContent.offsetHeight
  22.   var scrollXItems  = Math.ceil(displayWidth / contentWidth) + 1
  23.   var scrollYItems  = Math.ceil(displayHeight / contentHeight) + 1
  24.  
  25.   scrollDiv.style.width   = displayWidth
  26.   scrollDiv.style.height   = displayHeight
  27.   scrollDiv.style.overflow = "hidden"
  28.   scrollDiv.setAttribute("state", "stop")
  29.   scrollDiv.setAttribute("drag", drag ? drag : "horizontal")
  30.   scrollDiv.setAttribute("direction", direction ? direction : "left")
  31.   scrollDiv.setAttribute("zoom", zoom ? zoom : 1)
  32.   scrollContent.style.zoom = scrollDiv.zoom
  33.  
  34.   var scroll_script =  "var scrollDiv = " + scrollDiv.uniqueID                    +"\n"+
  35.         "var scrollObj = " + scrollContent.uniqueID                  +"\n"+
  36.         "var contentWidth = " + contentWidth + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)"  +"\n"+
  37.         "var contentHeight = " + contentHeight + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)"  +"\n"+
  38.         "var scrollx = scrollObj.runtimeStyle.pixelLeft"                +"\n"+
  39.         "var scrolly = scrollObj.runtimeStyle.pixelTop"                  +"\n"+
  40.  
  41.         "switch (scrollDiv.state.toLowerCase())"                +"\n"+
  42.         "{"                          +"\n"+
  43.           "case ('scroll')  :"                  +"\n"+
  44.             "switch (scrollDiv.direction)"                +"\n"+
  45.             "{"                      +"\n"+
  46.               "case ('left')    :"              +"\n"+
  47.                 "scrollx = (--scrollx) % contentWidth"          +"\n"+
  48.                 "break"                  +"\n"+
  49.               "case ('right')  :"                +"\n"+
  50.                 "scrollx = -contentWidth + (++scrollx) % contentWidth"      +"\n"+
  51.                 "break"                  +"\n"+
  52.               "case ('up')  :"                +"\n"+
  53.                 "scrolly = (--scrolly) % contentHeight"          +"\n"+
  54.                 "break"                  +"\n"+
  55.               "case ('down')  :"                +"\n"+
  56.                 "scrolly = -contentHeight + (++scrolly) % contentHeight"    +"\n"+
  57.                 "break"                  +"\n"+
  58.               "case ('left_up')  :"              +"\n"+
  59.                 "scrollx = (--scrollx) % contentWidth"          +"\n"+
  60.                 "scrolly = (--scrolly) % contentHeight"          +"\n"+
  61.                 "break"                  +"\n"+
  62.               "case ('left_down')  :"              +"\n"+
  63.                 "scrollx = (--scrollx) % contentWidth"          +"\n"+
  64.                 "scrolly = -contentHeight + (++scrolly) % contentHeight"    +"\n"+
  65.                 "break"                  +"\n"+
  66.               "case ('right_up')  :"              +"\n"+
  67.                 "scrollx = -contentWidth + (++scrollx) % contentWidth"      +"\n"+
  68.                 "scrolly = (--scrolly) % contentHeight"          +"\n"+
  69.                 "break"                  +"\n"+
  70.               "case ('right_down')  :"              +"\n"+
  71.                 "scrollx = -contentWidth + (++scrollx) % contentWidth"      +"\n"+
  72.                 "scrolly = -contentHeight + (++scrolly) % contentHeight"    +"\n"+
  73.                 "break"                  +"\n"+
  74.               "default    :"              +"\n"+
  75.                 "return"                +"\n"+
  76.             "}"                      +"\n"+
  77.             "scrollObj.runtimeStyle.left = scrollx"              +"\n"+
  78.             "scrollObj.runtimeStyle.top = scrolly"              +"\n"+
  79.             "break"                      +"\n"+
  80.  
  81.           "case ('stop')  :"                    +"\n"+
  82.           "case ('drag')  :"                    +"\n"+
  83.           "default  :"                    +"\n"+
  84.             "return"                    +"\n"+
  85.         "}"
  86.  
  87.   var contentNode = document.createElement("span")
  88.   contentNode.runtimeStyle.position = "absolute"
  89.   contentNode.runtimeStyle.width = contentWidth
  90.   scrollContent.applyElement(contentNode, "inside")
  91.   for (var i=0; i < = scrollXItems; i++)
  92.   {
  93.     for (var j=0; j <= scrollYItems ; j++)
  94.     {
  95.       if (i+j == 0)  continue 
  96.       var tempNode = contentNode.cloneNode(true)
  97.       var contentLeft, contentTop 
  98.       scrollContent.insertBefore(tempNode)
  99.       contentLeft = contentWidth * i 
  100.       contentTop = contentHeight * j 
  101.       tempNode.runtimeStyle.left = contentLeft 
  102.       tempNode.runtimeStyle.top = contentTop 
  103.     }
  104.   }
  105.  
  106.   scrollDiv.onpropertychange = function()
  107.   {
  108.     var propertyName = window.event.propertyName 
  109.     var propertyValue = eval("this." + propertyName)
  110.     
  111.     switch(propertyName)
  112.     {
  113.       case "zoom"    : 
  114.         var scrollObj = this.children[0]
  115.         scrollObj.runtimeStyle.zoom = propertyValue 
  116.         var content_width = scrollObj.children[0].offsetWidth * propertyValue 
  117.         var content_height = scrollObj.children[0].offsetHeight * propertyValue 
  118.         scrollObj.runtimeStyle.left = -content_width + (scrollObj.runtimeStyle.pixelLeft % content_width)
  119.         scrollObj.runtimeStyle.top = -content_height + (scrollObj.runtimeStyle.pixelTop % content_height)
  120.         break 
  121.     }
  122.   }
  123.  
  124.   scrollDiv.onlosecapture = function()
  125.   {
  126.     this.state = this.tempState ? this.tempState : this.state 
  127.     this.runtimeStyle.cursor = "" 
  128.     this.removeAttribute("tempState")
  129.     this.removeAttribute("start_x")
  130.     this.removeAttribute("start_y")
  131.     this.removeAttribute("default_left")
  132.     this.removeAttribute("default_top")
  133.   }
  134.  
  135.   scrollDiv.onmousedown = function()
  136.   {
  137.     if (this.state != "drag")  this.setAttribute("tempState", this.state)
  138.     this.state = "drag" 
  139.     this.runtimeStyle.cursor = "default" 
  140.     this.setAttribute("start_x", event.clientX)
  141.     this.setAttribute("start_y", event.clientY)
  142.     this.setAttribute("default_left", this.children[0].style.pixelLeft)
  143.     this.setAttribute("default_top", this.children[0].style.pixelTop)
  144.     this.setCapture()
  145.   }
  146.  
  147.   scrollDiv.onmousemove = function()
  148.   {
  149.     if (this.state != "drag")  return 
  150.     var scrollx = scrolly = 0 
  151.     var zoomValue = this.children[0].style.zoom ? this.children[0].style.zoom : 1 
  152.     var content_width = this.children[0].children[0].offsetWidth * zoomValue 
  153.     var content_Height = this.children[0].children[0].offsetHeight * zoomValue 
  154.     if (this.drag == "horizontal" || this.drag == "both")
  155.     {
  156.       scrollx = this.default_left + event.clientX - this.start_x 
  157.       scrollx = -content_width + scrollx % content_width 
  158.       this.children[0].runtimeStyle.left = scrollx 
  159.     }
  160.     if (this.drag == "vertical" || this.drag == "both")
  161.     {
  162.       scrolly = this.default_top + event.clientY - this.start_y 
  163.       scrolly = -content_Height + scrolly % content_Height 
  164.       this.children[0].runtimeStyle.top = scrolly 
  165.     }
  166.   }
  167.  
  168.   scrollDiv.onmouseup = function()
  169.   {
  170.     this.releaseCapture()
  171.   }
  172.  
  173.   scrollDiv.state = "scroll" 
  174.   setInterval(scroll_script, speed ? speed : 20)
  175. }
  176. </script> 
  177. </script><script language="JScript"> 
  178. window.onload = new Function("scroll(document.all['testDiv'], 325)")
  179. </script> 
  180. <br /> 
  181. <button onclick="testDiv.direction='up'; testDiv.state='scroll'"><span style="font-family: Webdings">5</span>向上</button> 
  182. <button onclick="testDiv.direction='left'; testDiv.state='scroll'"><span style="font-family: Webdings">3</span>向左</button> 
  183. <button onclick="testDiv.state='stop'"><span style="font-family: Webdings">;</span>停止</button> 
  184. <button onclick="testDiv.state='scroll'"><span style="font-family: Webdings">8</span>播放</button> 
  185. <button onclick="testDiv.direction='right'; testDiv.state='scroll'"><span style="font-family: Webdings">4</span>向右</button> 
  186. <button onclick="testDiv.direction='down'; testDiv.state='scroll'"><span style="font-family: Webdings">6</span>向下</button> 
  187. <br /> 
  188. 缩放：
  189. <select onchange="testDiv.zoom = this.options[selectedIndex].value"> 
  190.   <option value=1>100%</option> 
  191.   <option value=2>200%</option> 
  192.   <option value=3>300%</option> 
  193. </select>　　　　　
  194. 托动范围：
  195. <select onchange="testDiv.drag = this.options[selectedIndex].value"> 
  196.   <option value="both">随意</option> 
  197.   <option value="horizontal" selected>横向</option> 
  198.   <option value="vertical">纵向</option> 
  199. </select> 
  200. </td></tr> 
  201. </table> 
  202. </body> 
  203. </html>

参考资料：
一个可以上下左右滚动的经典代码
http://www.hanhao.cn/blog/article.asp?id=486

3月 16, 2006

优秀的JavaScript类库 - Rico

归档在: DynamicLanguage — Jet @ 9:44 上午
Tags: ,
原文出处: http://www.javatang.com/archives/2006/03/16/440510.html
作者: Jet Mah from Java堂
声明: 可以非商业性任意转载, 转载时请务必以超链接形式标明文章原始出处、作者信息及此声明！

Rico (http://openrico.org/)是开源的JavaScript类库，用来创建丰富的internet应用。我觉得它最出色的地方就是托拽图层管理和渲染出的电影特效，可以看一下它的在线demo: http://openrico.org/demos.page
因为Rico是建立在Prototype类库之上的，所以你在使用Rico的时候必须对Prototype进行引用：

  1. <script type="text/javascript" 
  2.      src="/pathto/prototype.js">
  3. </script>
  4. <script type="text/javascript" 
  5.      src="/pathto/rico.js">
  6. </script>

Prototype (http://prototype.conio.net/) is a JavaScript framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.
在Rico的Guide文档中需要使用到Prototype。