Hpyer 的未知空间 » javascript http://hpyer.cn 现实的世界里寻找点滴的未知空间 Tue, 20 Apr 2010 06:53:31 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 图片幻灯片JSlider http://hpyer.cn/codes/jslider http://hpyer.cn/codes/jslider#comments Mon, 19 Jan 2009 03:19:05 +0000 Hpyer http://hpyer.cn/?page_id=496 Summry / 概览：

This is an images slide based on Javascript.
这是一款基于 Javascript 的图片幻灯片程序。

DEMO / 示例：

http://demo.hpyer.cn/js/jslider/

Download / 下载：

JSlider   [v1.0 - 155.32 KB - 56 Hits]

Standard version (without any JS libraries) / 标准版（无须任何 JS 类库）

Usage / 用法：

1. Import script / 引入脚本

<script language="javascript" type="text/javascript" src="jslider.js"></script>

2. Import stylesheet / 引入样式

<link rel="stylesheet" type="text/css" href="jslider.css" />

3. Create slide / 创建幻灯片

<div id="jslider2" class="jslider"></div>
<script language="javascript" type="text/javascript">
var items = [];
items.push({
    file: 'images/1.jpg',
    link: '#1'
});
items.push({
    file: 'images/2.jpg',
    link: '#2',
    desc: 'Title'
});
JSlider.init('jslider', items, {width:'200px', height:'200px'});
</script>
]]> http://hpyer.cn/codes/jslider/feed 0 利用 jsonp 进行 Javascript 的跨域数据访问 http://hpyer.cn/visit-remote-data-with-jsonp-in-javascript.html http://hpyer.cn/visit-remote-data-with-jsonp-in-javascript.html#comments Thu, 23 Oct 2008 14:32:38 +0000 Hpyer http://hpyer.cn/?p=379 一、基础知识

　　1、什么是 JSON：JavaScript Object Notation (JSON) 是一种轻量级、基于文本、语言无关的数据交换格式。它是从 ECMAScript 语言标准衍生而来的。JSON为轻便的表示结构化数据，定义了一小套格式化规则。以下是一个 JSON 对象的例子：

{
    "Image": {
        "Width": 800,
        "Height": 600,
        "Title": "View from 15th Floor",
        "Thumbnail": {
            "Url": "http://www.example.com/image/481989943",
            "Height": 125,
            "Width": "100"
        },
        "IDs": [116, 943, 234, 38793]
    }
}

　　2、什么是 JSONP：JSONP（JSON with Padding）是一个非官方的协议，它允许在服务器端集成 Script tags 返回至客户端，通过 Javascript callback 的形式实现跨域访问（这仅仅是 JSONP 简单的实现形式）。

二、JSONP 的原理

　　首先说明一下，想要使用 JSONP 来进行跨域访问，必须服务器端支持，原因后面再解释。和 AJAX 一样，JSONP 实际上也是早已存在，只是说法相对比较新颖（貌似也出来很久了，额…），而且所有做网页开发肯定都用过。为什么这么说？应为它用到的只是所有 HTML 元素中一个简单的 script 元素。看到这是不是觉得越发奇怪了？没关系，继续看下去就会茅厕（塞）顿开的，嘿嘿～来看个例子吧：
demo.html 文件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo</title>
<script type="text/javascript">
function say(words) {
    alert(words);
}
</script>
</head>
<body>
<script type="text/javascript" src="demo.js"></script>
</body>
</html>

demo.js 文件

say("Hello, everyone!");

　　运行 demo.html 文件后，是不是看到写着“Hello, everyone!”的警告框了？你可能会觉得这个例子很简单，没什么了不起的，甚至会在想：这和 JSONP 有关系吗？那么，我可以很肯定的告诉你：有关系！而且，这个例子实际上就是 JSONP 的原型！你也许会想到，JSONP 不是访问远程数据的吗？对，试想一下，如果 demo.js 文件在其它域的服务器上呢？结果会不会出现问题？我也可以很负责的告诉你：不会！你可以将上面例子中的 demo.js 更改为：http://demo.hpyer.cn/php/jsonp.php?callback=say 再试一下。
　　现在，聪明的你应该已经明白 JSONP 到底是怎么回事了，那么，再来解释一下本节开头第一句话吧。看过 demo.js 文件的内容，应该知道，其只是对一个函数（通常称之为：回调函数）的调用，而需要交互的数据则通过参数形势进行返回。所以通过 JSONP 访问的服务器需要提供一个可以设置回调函数名的接口，就像 http://demo.hpyer.cn/php/jsonp.php?callback=say 中的 callback，所以，综上所述 JSONP 是需要服务器端的支持的。附上 jsonp.php 的源码：

<?php
$type = isset($_GET['type']) ? $_GET['type'] : '';
$callback = isset($_GET['callback']) ? $_GET['callback'] : '';
$json = '';
 
if ($type == 'json') {
    $json = '{
        "Image": {
            "Width": 800,
            "Height": 600,
            "Title": "View from 15th Floor",
            "Thumbnail": {
                "Url":  "http://www.example.com/image/481989943",
                "Height": 125,
                "Width": "100"
            },
            "IDs": [116, 943, 234, 38793]
        }
    }';
} else {
    $json = '"Hello, everyone!"';
}
 
if (!empty($callback)) {
    $json = $callback . '(' . $json . ')';
}
 
echo $json;
?>

三、jQuery 中的应用

　　自 1.2 版本起，jQuery 加入了对 JSONP 的支持。我们可以很容易的利用 $.getJSON() 方法（或者其它基于 $.ajax() 的方法），来跨域加载 JSON 数据。来个例子吧：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function do_jsonp() {
    $.getJSON("http://demo.hpyer.cn/php/jsonp.php?type=json&callback=?",
    function(data) {
        $('#result').val('data.Image.IDs: ' + data.Image.IDs);
    });
}
</script>
</head>
<body>
<a href="javascript:do_jsonp();">Click me</a><br />
<textarea id="result" cols="50" rows="5"></textarea>
</body>
</html>

　　你可能注意到上面的例子中，url 被写成了 http://demo.hpyer.cn/php/jsonp.php?type=json&callback=?，需要说明的是，这个问号会被 jQuery 自动替换为回调函数的函数名（如果是一个匿名函数，jQuery 会自动生成一个带时间戳的函数名）。

四、小结

　　通过本文的描述，相信你对于 JSONP 有了一个比较直观的了解，Hpyer 也相信，你也肯定可以举一反三的写出属于你自己的代码。其实，JSONP 的实现方法并不是只有回调函数一种，还有其它方式，例如将数据赋值给一个变量等。在 Web 2.0 的总体趋势之下，JS 显得越来越重要，并成了许多网页制作者所必学的一种脚本，所以，尽情的去体会 JS 带来的乐趣吧，Enjoy it!

]]> http://hpyer.cn/visit-remote-data-with-jsonp-in-javascript.html/feed 7 L10n By Javascript 1.2 发布 http://hpyer.cn/l10n-by-javascript-12-released.html http://hpyer.cn/l10n-by-javascript-12-released.html#comments Sat, 04 Oct 2008 16:23:02 +0000 Hpyer http://hpyer.cn/?p=265 L10n By Javascript 1.2 released.

Change Log / 更新明细:

  • Add functions (_n and _ne) to process plural form / 增加复数形式的处理函数（_n 和 _ne）
  • Add option before/after to define a function to do anything before/after the translation / 增加 before/after 选择，用于增加翻译前后的事件处理
  • Include $.sprintf as a plugin of jQuery / 增加一个 jQuery 插件 $.sprintf
  • Rewrite Messages Picker, much useful then old version / 重写信息提取器，使用更加方便
  • Fix a bug, and now we can also translate words that writed by function __ (also _e, _n and _ne) / 修正错误，现在也可以翻译由函数 __（ _e, _n 和 _ne）输出的信息
  • Move home to Google-Code / 在 Google-Code 上建立了主页 http://code.google.com/p/l10n-by-javascript/
  • Update example and language files, removed Japanese translation because it’s not good enouph for user to understand / 更新例子和语言文件，由于翻译的效果不是很好，所以去除了日语的翻译
]]> http://hpyer.cn/l10n-by-javascript-12-released.html/feed 0 利用 JavaScript 做网站的国际化 http://hpyer.cn/web-internationalization-with-javascript.html http://hpyer.cn/web-internationalization-with-javascript.html#comments Thu, 02 Oct 2008 07:13:15 +0000 Hpyer http://www.hpyer.cn/?p=29 　　科技的发展，对于我们生活的改变是可想而知的，而互联网的发展也是非常显著的。如今，网页制作者们，也不得不为了适应国际化的发展趋势，开始制作支持多国语言的网站，由此也催生出了各式各样的国际化的框架。而本文将向您介绍一种基于 Web 2.0，利用 Javascript 脚本，通过 AJAX 技术实现无刷新的将您的网页进行国际化转换的方法——L10n By Javascript。]]> 　　随着我们国家的进一步改革开放，越来越多的人发现，和国际接轨的重要性。国外有多种多样的高科技值得我们去学习，同样，具有我们中国特色的产品、技术等等也不得不和国际社会相接轨。常言道，适者才能生存，更何况是在全球一体化后的这样一个大舞台上。
　　科技的发展，对于我们生活的改变是可想而知的，而互联网的发展也是非常显著的。如今，网页制作者们，也不得不为了适应国际化的发展趋势，开始制作支持多国语言的网站，由此也催生出了各式各样的国际化的框架。而本文将向您介绍一种基于 Web 2.0，利用 Javascript 脚本，通过 AJAX 技术实现无刷新的将您的网页进行国际化转换的方法——L10n By Javascript。
　　该脚本的设计构思，是来源于 PHP 的 gettext 框架，它可以说是 PHP 下最好的国际化方法，其相关资料大家可以 google 一番，就不再次详述。此外，由于该脚本是用 Javascript 编写的，所以其采用了时下最流行的 Javascript 类库——jQuery，并撰写为一款 jQuery 插件，从而可以方便的使用。
　　和 PHP gettext 类似，L10n By Javascript 的翻译，将经历如下的步骤：

  1. 在源文件（网页，如：.html 文件）中直接用英文表述
  2. 定义各种需要的语言资源文件（.xml 文件）
  3. 然后通过脚本读取一个事先定义语言资源文件
  4. 接着对需要翻译的原文进行匹配。如果有匹配的译文，则直接替换为译文；如果没有相应的译文，则保留原文不变。

下面是一个简单的例子：

<html>
<head>
<title>A simple example</title>
<script src="jquery.js" language="JavaScript" type="text/javascript"></script>
<script src="jquery.l10n.js" language="JavaScript" type="text/javascript"></script>
<script type="text/javascript">
$.l10n.init({
	"dir": "./languages",  // 语言资源文件的访问路径
	"lang": "zh_CN",  // 翻译的目标语言代码
	"cache": true  // 是否读取缓存中的数据
});
</script>
</head>

<body>
<script type="text/javascript">
// 直接翻译
document.write($.l10n.__("Words need to be translated"));
// 或者
$.l10n._e("Words need to be translated");
</script>

<!-- 间接翻译 -->
<span>Words need to be translated</span>
<script type="text/javascript">
$("span").l10n();  // 翻译所有 <span> 元素。一般情况下建议在文档完全载入后再执行该方法
</script>
</body>
</html>

　　虽然目前的 L10n By Javascript 还是个不成熟的插件，但是相信它将来定会成为一个非常不错的国际化程序。

]]> http://hpyer.cn/web-internationalization-with-javascript.html/feed 0 Javascript 中 click 和 dblclick 事件问题的解决办法 http://hpyer.cn/solution-for-javascript-of-click-and-dblclick-event.html http://hpyer.cn/solution-for-javascript-of-click-and-dblclick-event.html#comments Sat, 27 Sep 2008 14:21:34 +0000 Hpyer http://hpyer.cn/?p=234 　　一个DOM元素，如：div，既绑定了 click 事件，又绑定了 dblclick 事件，这两个事件分别要做独立的事情。事件处理上没有冲突，都可以各自完成各自的操作。双击的时候虽然是执行了 dblclick 事件，但是在这之前，也执行了 click 事件，那么，如何来禁止或者说屏蔽这次多余的 click 事件呢？本文将提供给您一个比较好的解决办法。

情况分析：
　　首先，来了解一下点击事件发生的先后顺序：

  • 单击：mousedown, mouseup, click
  • 双击：mousedown, mouseup, click, mousedown, mouseup, click, dblclick

　　由此看来，dblclick 事件发生之前，实际上发生了两次 click 事件。其中，第一次的 click 是会被屏蔽掉，但是第二次则不会，所以就出现在双击的时候，也触发 click 事件。

解决办法：
　　知道了原因，接下来自然就是想办法把这次 click 给屏蔽掉，但是由于各浏览器均未提供直接去停止事件的方法，所以值得改变思路。
　　由于我们只需要屏蔽一次 click 事件即可，由此联想到，可以利用 setTimeout() 方法来延时完成 click 事件的处理，在需要停止 click 的时候利用 clearTimeout() 方法停止这一事件的处理。这样，就可以比较容易的写出如下的 javascript 代码：


var timer = null;

function do_click(event) {
	clearTimeout(timer); // 这里加一句是为了兼容 Gecko 的浏览器
	// if (event.detail == 2) return ; // 同上句的作用

	timer = setTimeout(function() {
		// click 事件的处理
	}, 300);
}

function do_dblclick(event) {
	clearTimeout(timer);
	// dblclick 事件的处理
}

测试代码：
需要 jQuery 类库，你可以从 jquery.com 获取到最新版本


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

<!--

var Test = {
    times: 0,
    timer: null,
    logs: [],

    first: null,
    last: null,

    do_click: function() {
        var self = Test;

        self.start();
        clearTimeout(self.timer);
        self.times++;
        self.timer = setTimeout(function() {
            self.logs.push('click');

            self.echo();
        }, 300);
    },

    do_dblclick: function() {

        var self = Test;
        clearTimeout(self.timer);
        self.logs.push('dblclick');
        self.echo();
    },

    start: function() {
        if (this.first == null) {
            this.first = new Date().getTime();
        }

    },

    end: function() {
        if (this.last == null) {
            this.last = new Date().getTime();

        }
    },

    get_time: function() {
        return (this.last - this.first) || 0;

    },

    echo: function() {
        var self = Test;
        self.end();

        var log = 'No.' + self.times + '; Use time: ' + self.get_time() + 'ms; Event: ' + self.logs.join(', ') + ';<br />\n';
        $('#log').prepend(log);
        self.first = null;
        self.last = null;

        self.logs = [];
    },

    init: function() {
        $(document).ready(function() {

            $('div').click(Test.do_click).dblclick(Test.do_dblclick);
        });
    }
};

Test.init();
//-->
</script>
</head>

<body>
<div style="width:200px; height:50px; border:1px solid #999;">Click / DblClick Me!</div>
Log:<br />
<textarea id="log" rows="20" cols="50"></textarea>
</body>
</html>

问题总结：
　　从测试结果来看，如果前后两次点击的时间在 300ms 左右的时候，还是很容易出现 click 和 dblclick 事件被“同时”调用的情况，而如果间隔的时间更短或更长，则只会有 click 或 dblclick 事件。
　　所以，应该说这个方法已经在很大程度上，避免了 click 和 dblclick 事件的“同时”存在问题。当然，它还没有达到完全解决的程度。

需要注意的地方：

  • windows 的控制面板里是可以调鼠标的双击速度的（Linux 等系统下能不能调，俺就不清楚了），这点对于程序还是有一定影响，大家可以自己调节下试试看～
  • 经过测试，延时 300ms 是一个比较理想的事件，既考虑到对鼠标操作并不十分顺利的朋友，也兼顾 click 事件的响应速度
  • 以上代码，只在 IE6、FF3、Chrome 中测试过，并未出现问题
]]> http://hpyer.cn/solution-for-javascript-of-click-and-dblclick-event.html/feed 0