idea's blog » JavaScript http://www.ideawu.net/blog 网络服务器架构, Linux C/C++服务器端开发, TCP/IP网络协议, PHP Web后端和Web前端开发, 网站架构. Wed, 08 Feb 2012 10:02:48 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 强大的纯JS数据图工具-flot http://www.ideawu.net/blog/archives/611.html http://www.ideawu.net/blog/archives/611.html#comments Wed, 03 Aug 2011 17:03:09 +0000 ideawu http://www.ideawu.net/blog/?p=611 发现一个在网页中绘制数据图, 如曲线图, 柱状图的纯 JavaScript 工具: flot. 极度推荐啊! 有图和代码为证:

*代码附后*

以前知道的工具有 Open Flash Chart, 还有 Google 出品的 Google Chart Tool. 两者使用不同的技术, 同时也是两种截然不同的设计理念. 相比较而言, 我更认同 Google Chart 的设计理念. 原因如下:

Open Flash Chart 使用 Flash 来做图, 这本来也可以接受. 但是, 图形的样式必须通过一个 URL 返回的数据来指定, 而不是网页端技术.

Google Chart Tool 使用 VML 来做图, 同时实现数据和表现的分离, 是 MVC 的思想. 这样的好处是, 同一份数据, 可以用来显示曲线图, 也可以显示成柱状图等等.

显而易见, Open Flash Chart 的技术和理念太陈旧了, 所以不推荐使用. 但是, Google Chart Tool 也有一个重大缺陷, 就是不能离线使用. 当网络状况不好时(在中国大陆经常遇到), 就没法使用了. Google 太霸道, 也不能用.

flot 也是 Google Chart Tool 类似的理念, 所以使用起来非常方便, 而且 demo 代码简单修改就能运行, 学习曲线非常轻松. 而且完美支持 IE6.

附一个可以运行的 flot 例子代码, 将下面的代码保存成 a.html, 然后到 flot 网站下载 JavaScript 代码, 保证路径正确即可用浏览器打开看效果.

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>flot</title>
	<!--[if lte IE 8]>
		<script language="javascript" type="text/javascript" src="excanvas.min.js"></script>
	<![endif]-->
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.flot.js"></script>
</head>
<body>

<script type="text/javascript">
<!--
var data = [];
data.push({
    "label": "中国",
    "data": [[2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1]]
});

$(function(){
    var options = {
        lines: { show: true },
        points: { show: true },
        xaxis: { tickDecimals: 0, tickSize: 1 }
    };
    var placeholder = $("#placeholder");
    $.plot(placeholder, data, options);
});
//-->
</script>

<div id="placeholder" style="width:500px;height:240px"></div>

</body>
</html>

flot 项目首页: http://code.google.com/p/flot/

补充: 再推荐另外一个非常不错的工具 – Highcharts, 看起来功能更强大, 但还没调研使用是否简便.

Related posts:

  1. JavaScript+jQuery两栏选择控件
  2. 最简单的JavaScript两级联动示例
  3. 使用Python POST任意的HTTP数据以及使用Cookie
  4. JavaScript分页控件
  5. 以浏览器为核心的客户端软件的安全问题
]]> 发现一个在网页中绘制数据图, 如曲线图, 柱状图的纯 JavaScript 工具: flot. 极度推荐啊! 有图和代码为证:

*代码附后*

以前知道的工具有 Open Flash Chart, 还有 Google 出品的 Google Chart Tool. 两者使用不同的技术, 同时也是两种截然不同的设计理念. 相比较而言, 我更认同 Google Chart 的设计理念. 原因如下:

Open Flash Chart 使用 Flash 来做图, 这本来也可以接受. 但是, 图形的样式必须通过一个 URL 返回的数据来指定, 而不是网页端技术.

Google Chart Tool 使用 VML 来做图, 同时实现数据和表现的分离, 是 MVC 的思想. 这样的好处是, 同一份数据, 可以用来显示曲线图, 也可以显示成柱状图等等.

显而易见, Open Flash Chart 的技术和理念太陈旧了, 所以不推荐使用. 但是, Google Chart Tool 也有一个重大缺陷, 就是不能离线使用. 当网络状况不好时(在中国大陆经常遇到), 就没法使用了. Google 太霸道, 也不能用.

flot 也是 Google Chart Tool 类似的理念, 所以使用起来非常方便, 而且 demo 代码简单修改就能运行, 学习曲线非常轻松. 而且完美支持 IE6.

附一个可以运行的 flot 例子代码, 将下面的代码保存成 a.html, 然后到 flot 网站下载 JavaScript 代码, 保证路径正确即可用浏览器打开看效果.

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>flot</title>
	<!--[if lte IE 8]>
		<script language="javascript" type="text/javascript" src="excanvas.min.js"></script>
	<![endif]-->
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.flot.js"></script>
</head>
<body>

<script type="text/javascript">
<!--
var data = [];
data.push({
    "label": "中国",
    "data": [[2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1]]
});

$(function(){
    var options = {
        lines: { show: true },
        points: { show: true },
        xaxis: { tickDecimals: 0, tickSize: 1 }
    };
    var placeholder = $("#placeholder");
    $.plot(placeholder, data, options);
});
//-->
</script>

<div id="placeholder" style="width:500px;height:240px"></div>

</body>
</html>

flot 项目首页: http://code.google.com/p/flot/

补充: 再推荐另外一个非常不错的工具 – Highcharts, 看起来功能更强大, 但还没调研使用是否简便.

Related posts:

  1. JavaScript+jQuery两栏选择控件
  2. 最简单的JavaScript两级联动示例
  3. 使用Python POST任意的HTTP数据以及使用Cookie
  4. JavaScript分页控件
  5. 以浏览器为核心的客户端软件的安全问题
]]> http://www.ideawu.net/blog/archives/611.html/feed 1 获取动态加载的图片大小的正确方法 http://www.ideawu.net/blog/archives/607.html http://www.ideawu.net/blog/archives/607.html#comments Sun, 03 Jul 2011 14:32:43 +0000 ideawu http://www.ideawu.net/blog/2011/07/%e8%8e%b7%e5%8f%96%e5%8a%a8%e6%80%81%e5%8a%a0%e8%bd%bd%e7%9a%84%e5%9b%be%e7%89%87%e5%a4%a7%e5%b0%8f%e7%9a%84%e6%ad%a3%e7%a1%ae%e6%96%b9%e6%b3%95.html 有一些很容易出错的获取动态加载的图片的尺寸的方法, 之所以出错, 主要原因是:

  • 你在代码在图片从网页上下载完毕之前就调用了, 这种情况在本机开发时不太容易发现.
  • jQuery load()事件处理的BUG, 当图片是从浏览器缓存取得时, 获取的是错误的尺寸.

错误的代码是:

(错误)在添加了HTML之后立即调用代码获取尺寸

var html = '';
$('#my_div').html(html);
var width = $('#my_div img').width(); // may return 0

(错误)用jQuery的load()事件处理

var html = '';
var img = $(html);
html.load(function(){
    // return 0 if image is loaded from browser cache
    var width = img.width();
});
$('#my_div').html(img);

下面这种才是真正正确的方法, 使用JavaScript的Image类:

正确的方法

var html = '';
$('#my_div').html(html);

var ni = new Image();
ni.onload = function(){
    var width = ni.width;
}
ni.src = img.attr(URL);

Related posts:

  1. jQuery BlockUI 页面遮挡插件
  2. jQuery延时绑定事件(lazy-bind)
  3. Debian Linux 系统提速
  4. 强大的纯JS数据图工具-flot
  5. 最简单的PHP缓存方案 – Zend_Cache
]]> 有一些很容易出错的获取动态加载的图片的尺寸的方法, 之所以出错, 主要原因是:

  • 你在代码在图片从网页上下载完毕之前就调用了, 这种情况在本机开发时不太容易发现.
  • jQuery load()事件处理的BUG, 当图片是从浏览器缓存取得时, 获取的是错误的尺寸.

错误的代码是:

(错误)在添加了HTML之后立即调用代码获取尺寸

var html = '';
$('#my_div').html(html);
var width = $('#my_div img').width(); // may return 0

(错误)用jQuery的load()事件处理

var html = '';
var img = $(html);
html.load(function(){
    // return 0 if image is loaded from browser cache
    var width = img.width();
});
$('#my_div').html(img);

下面这种才是真正正确的方法, 使用JavaScript的Image类:

正确的方法

var html = '';
$('#my_div').html(html);

var ni = new Image();
ni.onload = function(){
    var width = ni.width;
}
ni.src = img.attr(URL);

Related posts:

  1. jQuery BlockUI 页面遮挡插件
  2. jQuery延时绑定事件(lazy-bind)
  3. Debian Linux 系统提速
  4. 强大的纯JS数据图工具-flot
  5. 最简单的PHP缓存方案 – Zend_Cache
]]> http://www.ideawu.net/blog/archives/607.html/feed 1 jQuery延时绑定事件(lazy-bind) http://www.ideawu.net/blog/archives/591.html http://www.ideawu.net/blog/archives/591.html#comments Fri, 27 May 2011 08:27:05 +0000 ideawu http://www.ideawu.net/blog/?p=591 有个延时绑定事件的需求, 如等待鼠标停留在某图片上面一段时间之后才展示浮动层, 以避免鼠标滑过屏幕时一片乱闪. 一时找不到合适的插件, 所以自己写了个.

// 定义
(function($){
    $.fn.lazybind = function(event, fn, timeout, abort){
        var timer = null;
        $(this).bind(event, function(){
            timer = setTimeout(fn, timeout);
        });
        if(abort == undefined){
            return;
        }
        $(this).bind(abort, function(){
            if(timer != null){
                clearTimeout(timer);
            }
        });
    };
})(jQuery);

// 使用
$('#my_img').lazybind(
    'mouseover',
    function(){
        alert(1);
    },
    240,
    'mouseout');

Related posts:

  1. 获取动态加载的图片大小的正确方法
  2. jQuery BlockUI 页面遮挡插件
  3. 史上最强大的PHP MySQL操作类
  4. 使用ServletContextListener在服务器启动和关闭时创建和关闭缓存
  5. Ideawu.P2P API 简介
]]> 有个延时绑定事件的需求, 如等待鼠标停留在某图片上面一段时间之后才展示浮动层, 以避免鼠标滑过屏幕时一片乱闪. 一时找不到合适的插件, 所以自己写了个.

// 定义
(function($){
    $.fn.lazybind = function(event, fn, timeout, abort){
        var timer = null;
        $(this).bind(event, function(){
            timer = setTimeout(fn, timeout);
        });
        if(abort == undefined){
            return;
        }
        $(this).bind(abort, function(){
            if(timer != null){
                clearTimeout(timer);
            }
        });
    };
})(jQuery);

// 使用
$('#my_img').lazybind(
    'mouseover',
    function(){
        alert(1);
    },
    240,
    'mouseout');

Related posts:

  1. 获取动态加载的图片大小的正确方法
  2. jQuery BlockUI 页面遮挡插件
  3. 史上最强大的PHP MySQL操作类
  4. 使用ServletContextListener在服务器启动和关闭时创建和关闭缓存
  5. Ideawu.P2P API 简介
]]> http://www.ideawu.net/blog/archives/591.html/feed 0 tableview新增单选功能 http://www.ideawu.net/blog/archives/554.html http://www.ideawu.net/blog/archives/554.html#comments Sat, 23 Oct 2010 08:49:24 +0000 ideawu http://www.ideawu.net/blog/?p=554 根据用户反馈的功能需求, tableview 现新增了单选功能, 用于限制只能选择最多一行记录.

tableview 是一组功能丰富, 接口易学易用的 javascript 控件, 包括数据表格控件, 排序控件, 分页控件, 双栏选择控件. 下载及文档: http://www.ideawu.net/person/tableview/

Related posts:

  1. tableview新版本发布
  2. JavaScript+jQuery两栏选择控件
  3. JavaScript数据表格和分页控件文档升级
  4. JavaScript分页控件
  5. JavaScript年会抽奖软件
]]> 根据用户反馈的功能需求, tableview 现新增了单选功能, 用于限制只能选择最多一行记录.

tableview 是一组功能丰富, 接口易学易用的 javascript 控件, 包括数据表格控件, 排序控件, 分页控件, 双栏选择控件. 下载及文档: http://www.ideawu.net/person/tableview/

Related posts:

  1. tableview新版本发布
  2. JavaScript+jQuery两栏选择控件
  3. JavaScript数据表格和分页控件文档升级
  4. JavaScript分页控件
  5. JavaScript年会抽奖软件
]]> http://www.ideawu.net/blog/archives/554.html/feed 1 tableview新版本发布 http://www.ideawu.net/blog/archives/502.html http://www.ideawu.net/blog/archives/502.html#comments Wed, 12 May 2010 14:16:46 +0000 ideawu http://www.ideawu.net/blog/archives/502.html tableview 即原来的 two-column-selector, 在升级为 1.1 版本时, 它的项目名称变为 tableview. 1.1 版本最大的变化是加入了排序功能.

在网页开发中, 常常需要一个表格与列表相结合的控件, 即能像表格(table)一样显示丰富的信息, 又能像列表选择控件(select)一样方便地选择数据. 在桌面应用程序开发中, 许多GUI库都提供了类似的控件, 如.Net的ListView.

  • PagerView是一个好看精巧的分页控件. PagerView+TableView为网页开发提供了类似的工具, 但代码更简单, 功能更紧凑.
  • SortView是一个方便易用的分页控件.
  • TableView是一个数据表格控件, 代码简单, 功能紧凑.
  • SelectorView是一个由两个TableView组合而成的控件, 相对于列表选择器, 提供了一个临时的存放已选中项的地方.

下载及文档: http://www.ideawu.net/person/tableview/v1.1/

Related posts:

  1. tableview新增单选功能
  2. JavaScript数据表格和分页控件文档升级
  3. JavaScript分页控件
  4. JavaScript+jQuery两栏选择控件
  5. JavaScript年会抽奖软件
]]> tableview 即原来的 two-column-selector, 在升级为 1.1 版本时, 它的项目名称变为 tableview. 1.1 版本最大的变化是加入了排序功能.

在网页开发中, 常常需要一个表格与列表相结合的控件, 即能像表格(table)一样显示丰富的信息, 又能像列表选择控件(select)一样方便地选择数据. 在桌面应用程序开发中, 许多GUI库都提供了类似的控件, 如.Net的ListView.

  • PagerView是一个好看精巧的分页控件. PagerView+TableView为网页开发提供了类似的工具, 但代码更简单, 功能更紧凑.
  • SortView是一个方便易用的分页控件.
  • TableView是一个数据表格控件, 代码简单, 功能紧凑.
  • SelectorView是一个由两个TableView组合而成的控件, 相对于列表选择器, 提供了一个临时的存放已选中项的地方.

下载及文档: http://www.ideawu.net/person/tableview/v1.1/

Related posts:

  1. tableview新增单选功能
  2. JavaScript数据表格和分页控件文档升级
  3. JavaScript分页控件
  4. JavaScript+jQuery两栏选择控件
  5. JavaScript年会抽奖软件
]]> http://www.ideawu.net/blog/archives/502.html/feed 2 jQuery BlockUI 页面遮挡插件 http://www.ideawu.net/blog/archives/477.html http://www.ideawu.net/blog/archives/477.html#comments Mon, 26 Apr 2010 03:47:00 +0000 ideawu http://www.ideawu.net/blog/?p=477 Web应用中常常需要这样的功能: 当用户点击”提交”按钮, 或者点击”刷新”链接AJAX获取新数据时, 都需要显示一个提示Loading的提示信息, 并且锁住按钮和某个区域, 避免用户重复操作. 使用 jQuery 的 BlockUI 插件可能轻松地达到该功能. 而且, BlockUI 的功能不仅如此, 它还能实现”弹出”窗口(如登录窗口), 气泡提示信息的功能.

1. 遮挡整个页面

直接调用 $.blockUI(), 即可锁定整个页面, 并提示信息:

$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });

要解锁只需要简单地调用 unblockUI():

$.unblockUI();

2. 遮挡部分(某个元素)

对一个 jQuery DOM 对象调用 blockUI 方法, 便可锁定该对象的显示区域, 如 div 块.

$('#my_div').blockUI();

3. 显示登录窗口(模式窗口)

bockUI 函数的参数对象的 message 字段, 可以接受任意的 HTML 代码, 或者某个 DOM 对象. 我们可以这样实现, 生成一个隐藏的登录表单, 当用户点击”登录”链接时, 对整个页面调用 blockUI(), 并把登录表单作为参数传递, 即可实现一个登录窗口:

$('#login_link').click(function() {
	$.blockUI({ message: $('#loginForm') });
});

4. 自动隐藏的气泡提示信息

$.growlUI('操作成功!', '您的评论已经成功保存! 感谢您的参与!');

如果你需要更强大的气泡提示功能, 可以试试这个插件: jGrowl.

5. 自定义样式

jQuery blockUI 提供的默认样式, 你可以在每一次调用 blockUI() 函数时进行修改. 如果你觉得这样比较麻烦的话, 可以直接修改库文件 jquery.blockUI.js, 修改 $.blockUI.defaults 对象相关的代码即可.

jQuery blockUI 项目主页: http://jquery.malsup.com/block/

Related posts:

  1. jQuery延时绑定事件(lazy-bind)
  2. 获取动态加载的图片大小的正确方法
  3. [转]300+Jquery, CSS, MooTools 和 JS的导航菜单
  4. 强大的纯JS数据图工具-flot
  5. Wordpress开发指南
]]> Web应用中常常需要这样的功能: 当用户点击”提交”按钮, 或者点击”刷新”链接AJAX获取新数据时, 都需要显示一个提示Loading的提示信息, 并且锁住按钮和某个区域, 避免用户重复操作. 使用 jQuery 的 BlockUI 插件可能轻松地达到该功能. 而且, BlockUI 的功能不仅如此, 它还能实现”弹出”窗口(如登录窗口), 气泡提示信息的功能.

1. 遮挡整个页面

直接调用 $.blockUI(), 即可锁定整个页面, 并提示信息:

$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });

要解锁只需要简单地调用 unblockUI():

$.unblockUI();

2. 遮挡部分(某个元素)

对一个 jQuery DOM 对象调用 blockUI 方法, 便可锁定该对象的显示区域, 如 div 块.

$('#my_div').blockUI();

3. 显示登录窗口(模式窗口)

bockUI 函数的参数对象的 message 字段, 可以接受任意的 HTML 代码, 或者某个 DOM 对象. 我们可以这样实现, 生成一个隐藏的登录表单, 当用户点击”登录”链接时, 对整个页面调用 blockUI(), 并把登录表单作为参数传递, 即可实现一个登录窗口:

$('#login_link').click(function() {
	$.blockUI({ message: $('#loginForm') });
});

4. 自动隐藏的气泡提示信息

$.growlUI('操作成功!', '您的评论已经成功保存! 感谢您的参与!');

如果你需要更强大的气泡提示功能, 可以试试这个插件: jGrowl.

5. 自定义样式

jQuery blockUI 提供的默认样式, 你可以在每一次调用 blockUI() 函数时进行修改. 如果你觉得这样比较麻烦的话, 可以直接修改库文件 jquery.blockUI.js, 修改 $.blockUI.defaults 对象相关的代码即可.

jQuery blockUI 项目主页: http://jquery.malsup.com/block/

Related posts:

  1. jQuery延时绑定事件(lazy-bind)
  2. 获取动态加载的图片大小的正确方法
  3. [转]300+Jquery, CSS, MooTools 和 JS的导航菜单
  4. 强大的纯JS数据图工具-flot
  5. Wordpress开发指南
]]> http://www.ideawu.net/blog/archives/477.html/feed 3 JavaScript年会抽奖软件 http://www.ideawu.net/blog/archives/452.html http://www.ideawu.net/blog/archives/452.html#comments Fri, 15 Jan 2010 03:02:01 +0000 ideawu http://www.ideawu.net/blog/?p=452 年会聚餐, 或者平时团队拿到少量门票要分配, 这时就是考验大家人品的时候. 如果每次都要制作签条来抽, 那就太Out了. IT人士抽奖抓阄就得用高科技手段. 本软件基于浏览器, 真正地比Java还跨平台, 无需注册, 完全免费, 开放源码, 老少皆宜! 是teamleader, 活动组织者必备武器!

抽奖流程

等待开始
开场(open): 奖项介绍
奖项循环: 如果多于一个奖项, 则循环
	奖项开场(step_open)
	摇奖循环: 如果不是一次开完一个奖项, 则循环
		摇奖开始(rotate_start)
		摇奖结束(rotate_stop)
	奖项结束(step_close): 单项中奖名单
闭场(close)

软件主页

链接: http://www.ideawu.net/person/lottery/

Related posts:

  1. tableview新增单选功能
  2. tableview新版本发布
  3. JavaScript数据表格和分页控件文档升级
  4. 你喜欢哪一种表格样式?
  5. JavaScript+jQuery两栏选择控件
]]> 年会聚餐, 或者平时团队拿到少量门票要分配, 这时就是考验大家人品的时候. 如果每次都要制作签条来抽, 那就太Out了. IT人士抽奖抓阄就得用高科技手段. 本软件基于浏览器, 真正地比Java还跨平台, 无需注册, 完全免费, 开放源码, 老少皆宜! 是teamleader, 活动组织者必备武器!

抽奖流程

等待开始
开场(open): 奖项介绍
奖项循环: 如果多于一个奖项, 则循环
	奖项开场(step_open)
	摇奖循环: 如果不是一次开完一个奖项, 则循环
		摇奖开始(rotate_start)
		摇奖结束(rotate_stop)
	奖项结束(step_close): 单项中奖名单
闭场(close)

软件主页

链接: http://www.ideawu.net/person/lottery/

Related posts:

  1. tableview新增单选功能
  2. tableview新版本发布
  3. JavaScript数据表格和分页控件文档升级
  4. 你喜欢哪一种表格样式?
  5. JavaScript+jQuery两栏选择控件
]]> http://www.ideawu.net/blog/archives/452.html/feed 5 JavaScript数据表格和分页控件文档升级 http://www.ideawu.net/blog/archives/451.html http://www.ideawu.net/blog/archives/451.html#comments Tue, 12 Jan 2010 02:46:40 +0000 ideawu http://www.ideawu.net/blog/?p=451 TableView, PagerView是我开发的两个JavaScript控件, 使用方便, 代码简单. 现在, 重新组织了文档, 并用jsdoc工具生成了API文档.

链接: http://www.ideawu.net/person/two-column-selector/

Related posts:

  1. tableview新版本发布
  2. JavaScript+jQuery两栏选择控件
  3. JavaScript分页控件
  4. tableview新增单选功能
  5. JavaScript年会抽奖软件
]]> TableView, PagerView是我开发的两个JavaScript控件, 使用方便, 代码简单. 现在, 重新组织了文档, 并用jsdoc工具生成了API文档.

链接: http://www.ideawu.net/person/two-column-selector/

Related posts:

  1. tableview新版本发布
  2. JavaScript+jQuery两栏选择控件
  3. JavaScript分页控件
  4. tableview新增单选功能
  5. JavaScript年会抽奖软件
]]> http://www.ideawu.net/blog/archives/451.html/feed 0 最简单的JavaScript两级联动示例 http://www.ideawu.net/blog/archives/434.html http://www.ideawu.net/blog/archives/434.html#comments Wed, 04 Nov 2009 08:40:15 +0000 ideawu http://www.ideawu.net/blog/?p=434 JavaScript两级联动, 比如表单里面有两个下拉菜单，实现关联，根据第一个下拉菜单选择的内容，在第二个下拉菜单中显示对应的选项. 这项功能非常有用, 但新手仍会需要示例.

将下列代码保存到一个后缀为.html的文本文件, 然后用浏览器打开即可:

<form method="post" action="">
	<select name="a" id="s1" onchange="on_s1_selected()">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>

	<select name="b" id="s2">
	</select>
</form>

<script type="text/javascript">
<!--
var data = {};
data['1'] = ['1.1', '1.2', '1.3'];
data['2'] = ['2.1', '2.2', '2.3'];
data['3'] = ['3.1', '3.2', '3.3'];

var s1 = document.getElementById('s1');
var s2 = document.getElementById('s2');

function on_s1_selected(){
	var children = data[s1.value];
	s2.innerHTML = '';

	var str = '';
	for(var i in children){
		var c = children[i];
		var opt = document.createElement("option");
		opt.value = c;
		opt.innerHTML = c;
		s2.appendChild(opt);
	}
}
//-->
</script>

Related posts:

  1. 用Javascript生成弹出窗口
  2. 开发跨浏览器JavaScript—《Ajax基础教程》笔记
  3. JavaScript分页控件
  4. 强大的纯JS数据图工具-flot
  5. 写自己的 http_build_query
]]> JavaScript两级联动, 比如表单里面有两个下拉菜单，实现关联，根据第一个下拉菜单选择的内容，在第二个下拉菜单中显示对应的选项. 这项功能非常有用, 但新手仍会需要示例.

将下列代码保存到一个后缀为.html的文本文件, 然后用浏览器打开即可:

<form method="post" action="">
	<select name="a" id="s1" onchange="on_s1_selected()">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>

	<select name="b" id="s2">
	</select>
</form>

<script type="text/javascript">
<!--
var data = {};
data['1'] = ['1.1', '1.2', '1.3'];
data['2'] = ['2.1', '2.2', '2.3'];
data['3'] = ['3.1', '3.2', '3.3'];

var s1 = document.getElementById('s1');
var s2 = document.getElementById('s2');

function on_s1_selected(){
	var children = data[s1.value];
	s2.innerHTML = '';

	var str = '';
	for(var i in children){
		var c = children[i];
		var opt = document.createElement("option");
		opt.value = c;
		opt.innerHTML = c;
		s2.appendChild(opt);
	}
}
//-->
</script>

Related posts:

  1. 用Javascript生成弹出窗口
  2. 开发跨浏览器JavaScript—《Ajax基础教程》笔记
  3. JavaScript分页控件
  4. 强大的纯JS数据图工具-flot
  5. 写自己的 http_build_query
]]> http://www.ideawu.net/blog/archives/434.html/feed 0 炮轰IT写书神棍 – 由炮轰JavaScript征途有感而发 http://www.ideawu.net/blog/archives/422.html http://www.ideawu.net/blog/archives/422.html#comments Thu, 24 Sep 2009 06:15:43 +0000 ideawu http://www.ideawu.net/blog/?p=422 最近网上流行的炮轰”JavaScript征途”事件, 主要是对IT界不负责任的出书者, 以及出版社, 不要脸的推荐人的批评. 我自己之前就写过一篇日志:”某些死不正经的技术书籍作者” (http://www.ideawu.net/blog/?p=372).

计算机流行技术, 甚至包括很多计算机基础技术, 在中国大多靠自学, 学校很难学到. 既然自学, 书籍自然是最重要的学习资料了. 现在市面上很多流行的技术书, 粗制滥造, 对人没有多大帮助. 我从接触计算机书籍的第一天起, 就认准一个死理:”如果你想从垃圾堆中找点吃的, 那么你就买中国人写的计算机书籍吧.” 中国人写的计算机书籍垃圾太多了, 你不可能分辨出好的来. 而在一两年前, 市面上出售的从国外引进的经典书籍, 大多经过认真挑选, 几乎随顺买一本就能学到本事. 当然近来引进的国外垃圾书也有不少.

回到”JavaScript征途”这本书, 一个3年不到的时间写了二十多本书的人, 能写出什么好书. 但是, 写不出好书, 是作者能力问题, 而那些给垃圾书作序并写推荐的人, 是不想要自己的人品了!

所有学习编程或者其它计算机技术的人注意了:

如果你想从垃圾堆中找点吃的, 那么你就买中国人写的计算机书籍吧.

这句话当然会伤害一些认真作学问写书的人, 但环境太恶劣, 为了能学点东西, 不得不找好书比例多得多的市面上的外国书籍.

相关阅读:

Related posts:

  1. JavaScript分页控件
  2. 面试IT业界顶尖企业所应该知道的10道题(2)
  3. QQ和360互掐事件(内含少儿XX图片)
  4. 史上最强大的PHP Web面试题(会做就能进百度)
]]> 最近网上流行的炮轰”JavaScript征途”事件, 主要是对IT界不负责任的出书者, 以及出版社, 不要脸的推荐人的批评. 我自己之前就写过一篇日志:”某些死不正经的技术书籍作者” (http://www.ideawu.net/blog/?p=372).

计算机流行技术, 甚至包括很多计算机基础技术, 在中国大多靠自学, 学校很难学到. 既然自学, 书籍自然是最重要的学习资料了. 现在市面上很多流行的技术书, 粗制滥造, 对人没有多大帮助. 我从接触计算机书籍的第一天起, 就认准一个死理:”如果你想从垃圾堆中找点吃的, 那么你就买中国人写的计算机书籍吧.” 中国人写的计算机书籍垃圾太多了, 你不可能分辨出好的来. 而在一两年前, 市面上出售的从国外引进的经典书籍, 大多经过认真挑选, 几乎随顺买一本就能学到本事. 当然近来引进的国外垃圾书也有不少.

回到”JavaScript征途”这本书, 一个3年不到的时间写了二十多本书的人, 能写出什么好书. 但是, 写不出好书, 是作者能力问题, 而那些给垃圾书作序并写推荐的人, 是不想要自己的人品了!

所有学习编程或者其它计算机技术的人注意了:

如果你想从垃圾堆中找点吃的, 那么你就买中国人写的计算机书籍吧.

这句话当然会伤害一些认真作学问写书的人, 但环境太恶劣, 为了能学点东西, 不得不找好书比例多得多的市面上的外国书籍.

相关阅读:

Related posts:

  1. JavaScript分页控件
  2. 面试IT业界顶尖企业所应该知道的10道题(2)
  3. QQ和360互掐事件(内含少儿XX图片)
  4. 史上最强大的PHP Web面试题(会做就能进百度)
]]> http://www.ideawu.net/blog/archives/422.html/feed 3 JavaScript+jQuery两栏选择控件 http://www.ideawu.net/blog/archives/399.html http://www.ideawu.net/blog/archives/399.html#comments Mon, 20 Jul 2009 08:43:35 +0000 ideawu http://www.ideawu.net/blog/?p=399 两栏选择功能经常用到, 就是有一栏显示可选的数据, 另一栏显示当前已选择的数据. 我包装成一个JavaScript控件, 方便使用. 使用时需要引入两个JavaScript文件, 因为使用了jQuery, 所以还需要引入jQuery的js库文件:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="TableView.js"></script>
<script type="text/javascript" src="SelectorView.js"></script>

在HTML文件中写上:

<div id="sel_div">
</div>

<script type="text/javascript">
<!--
var sel = new SelectorView('sel_div'); // sel_div 是 HTML 节点 id
sel.src.header = {
	'id'		: 'Id',
	'name'		: 'Name',
	'text'		: 'Text'
};
sel.dst.header = {
	'id'		: 'Id',
	'name'		: 'Name'
};
sel.src.dataKey = 'id';
sel.dst.dataKey = 'id';
sel.src.title = '可选';
sel.dst.title = '已选';
sel.render();

sel.src.add({id: 1, name: 'Tom', text: 'Tomcat'});
sel.src.add({id: 2, name: 'Jerry', text: 'Jerrimy'});
sel.src.add({id: 3, name: 'Jim', text: 'System Engineer'});
sel.src.add({id: 4, name: 'Lucy', text: 'Lucy & Lily'});
//-->
</script>

演示地址: http://www.ideawu.net/person/two-column-selector/two-column-selector.html

Related posts:

  1. JavaScript分页控件
  2. 强大的纯JS数据图工具-flot
  3. JavaScript数据表格和分页控件文档升级
  4. tableview新版本发布
  5. 用Javascript生成弹出窗口
]]> 两栏选择功能经常用到, 就是有一栏显示可选的数据, 另一栏显示当前已选择的数据. 我包装成一个JavaScript控件, 方便使用. 使用时需要引入两个JavaScript文件, 因为使用了jQuery, 所以还需要引入jQuery的js库文件:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="TableView.js"></script>
<script type="text/javascript" src="SelectorView.js"></script>

在HTML文件中写上:

<div id="sel_div">
</div>

<script type="text/javascript">
<!--
var sel = new SelectorView('sel_div'); // sel_div 是 HTML 节点 id
sel.src.header = {
	'id'		: 'Id',
	'name'		: 'Name',
	'text'		: 'Text'
};
sel.dst.header = {
	'id'		: 'Id',
	'name'		: 'Name'
};
sel.src.dataKey = 'id';
sel.dst.dataKey = 'id';
sel.src.title = '可选';
sel.dst.title = '已选';
sel.render();

sel.src.add({id: 1, name: 'Tom', text: 'Tomcat'});
sel.src.add({id: 2, name: 'Jerry', text: 'Jerrimy'});
sel.src.add({id: 3, name: 'Jim', text: 'System Engineer'});
sel.src.add({id: 4, name: 'Lucy', text: 'Lucy & Lily'});
//-->
</script>

演示地址: http://www.ideawu.net/person/two-column-selector/two-column-selector.html

Related posts:

  1. JavaScript分页控件
  2. 强大的纯JS数据图工具-flot
  3. JavaScript数据表格和分页控件文档升级
  4. tableview新版本发布
  5. 用Javascript生成弹出窗口
]]> http://www.ideawu.net/blog/archives/399.html/feed 0 JavaScript 多线程 http://www.ideawu.net/blog/archives/306.html http://www.ideawu.net/blog/archives/306.html#comments Sat, 26 Jan 2008 08:34:49 +0000 ideawu 暂时, 我还不知道在 Firefox 和 IE 浏览器上使用 "JavaScript 多线程" 的方法. 一些资料上说的 setTimeout 和 setTimeInterval 函数可以模拟多线程, 但事实并不是这样. 例如 setTimeout 函数, 如果你在异步执行的代码中进行阻塞, 那么整个页面也将阻塞(表现为页面无法操作, 链接无法点击等). 这说明, setTimeout 只不是在当前线程中插入要执行的代码而已, 并不像其它某些语言中的定时器.

所谓的并发, 微观上还是串行处理, 只不过对串行处理单元进行分解, 便成了另一层次上的并发. 如果可以, 应该对要处理的事务进行分解.

Related posts:

  1. JavaScript+jQuery两栏选择控件
  2. JavaScript+CSS实现数据表格条纹
  3. 同时运行Firefox2和Firefox3
  4. 开发跨浏览器JavaScript—《Ajax基础教程》笔记
  5. jQuery延时绑定事件(lazy-bind)
]]> 暂时, 我还不知道在 Firefox 和 IE 浏览器上使用 "JavaScript 多线程" 的方法. 一些资料上说的 setTimeout 和 setTimeInterval 函数可以模拟多线程, 但事实并不是这样. 例如 setTimeout 函数, 如果你在异步执行的代码中进行阻塞, 那么整个页面也将阻塞(表现为页面无法操作, 链接无法点击等). 这说明, setTimeout 只不是在当前线程中插入要执行的代码而已, 并不像其它某些语言中的定时器.

所谓的并发, 微观上还是串行处理, 只不过对串行处理单元进行分解, 便成了另一层次上的并发. 如果可以, 应该对要处理的事务进行分解.

Related posts:

  1. JavaScript+jQuery两栏选择控件
  2. JavaScript+CSS实现数据表格条纹
  3. 同时运行Firefox2和Firefox3
  4. 开发跨浏览器JavaScript—《Ajax基础教程》笔记
  5. jQuery延时绑定事件(lazy-bind)
]]> http://www.ideawu.net/blog/archives/306.html/feed 0 基于HTML/JavaScript的本地运行的TiddlyWiki http://www.ideawu.net/blog/archives/154.html http://www.ideawu.net/blog/archives/154.html#comments Fri, 23 Jun 2006 06:21:52 +0000 ideawu
TiddlyWiki, 仅仅采用 Html + CSS + JavaScript 所组成的一个文件，允许你没有服务器、数据库、ASP或PHP的支持就可以编辑自己的 Wiki 系统。中文化的目的是推进其在中国大陆的使用。

— TiddlyWiki中文网站上的介绍。

昨天朋友介绍的一个好东西。具有保存功能，作为记事本使用不错。到 http://gf.cs.hit.edu.cn/projects/tiddlywiki/ 下载。直接在浏览器中打开html文件。

Related posts:

  1. JavaScript+jQuery两栏选择控件
  2. 强大的纯JS数据图工具-flot
  3. jQuery BlockUI 页面遮挡插件
  4. JavaScript分页控件
  5. 开发跨浏览器JavaScript—《Ajax基础教程》笔记
]]>
TiddlyWiki, 仅仅采用 Html + CSS + JavaScript 所组成的一个文件，允许你没有服务器、数据库、ASP或PHP的支持就可以编辑自己的 Wiki 系统。中文化的目的是推进其在中国大陆的使用。

— TiddlyWiki中文网站上的介绍。

昨天朋友介绍的一个好东西。具有保存功能，作为记事本使用不错。到 http://gf.cs.hit.edu.cn/projects/tiddlywiki/ 下载。直接在浏览器中打开html文件。

Related posts:

  1. JavaScript+jQuery两栏选择控件
  2. 强大的纯JS数据图工具-flot
  3. jQuery BlockUI 页面遮挡插件
  4. JavaScript分页控件
  5. 开发跨浏览器JavaScript—《Ajax基础教程》笔记
]]> http://www.ideawu.net/blog/archives/154.html/feed 0 开发跨浏览器JavaScript—《Ajax基础教程》笔记 http://www.ideawu.net/blog/archives/145.html http://www.ideawu.net/blog/archives/145.html#comments Tue, 13 Jun 2006 02:27:29 +0000 ideawu 1. 通过JavaScript设置元素的样式

通过元素(Element)的setAttribute()方法设置style属性： 

var testdiv = document.getElementById("testdiv");
testdiv.setAttribute("style", "font-size:24px;color:red;");

除了IE(Microsoft Internet Explorer)，这种方法在当前其它浏览器上都行得通。为了照顾IE，我们可以使用设置不标准的属性—元素style对象的cssText属性。尽管这个属性不是标准的，但得到了广泛的支持(除了Opera)： 

var testdiv = document.getElementById("testdiv");
testdiv.style.cssText = "font-size:24px;color:red;";
  • Firefox等浏览器：运行代码，在下面的测试区域查看效果。
  • Firefox等浏览器IE浏览器：
    ，在下面的测试区域查看效果。

2. 设置元素的class属性

使用Firefox和Safari之类的浏览器，可以通过元素(Element)的setAttribute()方法设置class属性： 

var testdiv = document.getElementById("testdiv");
testdiv.setAttribute("class", "cat");

为了照顾IE这个异类，它只认识className属性—在IE中className = class，其它大多数浏览器都忽略className属性。你可以这样做： 

var testdiv = document.getElementById("testdiv");
testdiv.setAttribute("class", "cat");
testdiv.setAttribute("className", "cat");
  • Firefox等浏览器：运行代码，在下面的测试区域查看效果。
  • Firefox等浏览器IE浏览器：运行代码，在下面的测试区域查看效果。

这里是测试用的区域：

测试用的区域。Hello world!

上面的代码已经在Mozilla Firefox 1.5.0.2，Opera 8.54，Konqueror 3.5.2，IE6 测试通过。

3. 创建输入元素

注意document.createElement()和<Element>.setAttribute()方法的顺序： 

var button = document.createElement("input");
button.setAttribute("type", "reset");
var testdiv = document.getElementById("testdiv").appendChild(button);
  • Firefox等浏览器和IE浏览器：运行代码，在测试区域查看效果。

4. 向元素增加事件处理

标准的做法是： 

var testdiv = document.getElementById("testdiv");
testdiv.setAttribute("onclick", "doFoo();");

除了IE，上面的代码在所有的当前浏览器中都能工作。在IE中必须使用点词法来引用所需的事件处理程序： 

var testdiv = document.getElementById("testdiv");
testdiv.onclick = function(){doFoo();};

相关资源：

Related posts:

  1. 用Javascript生成弹出窗口
  2. 最简单的JavaScript两级联动示例
  3. JavaScript分页控件
  4. 清除Web标准误区，保持清晰的文档结构
  5. 同时运行Firefox2和Firefox3
]]> 1. 通过JavaScript设置元素的样式

通过元素(Element)的setAttribute()方法设置style属性： 

var testdiv = document.getElementById("testdiv");
testdiv.setAttribute("style", "font-size:24px;color:red;");

除了IE(Microsoft Internet Explorer)，这种方法在当前其它浏览器上都行得通。为了照顾IE，我们可以使用设置不标准的属性—元素style对象的cssText属性。尽管这个属性不是标准的，但得到了广泛的支持(除了Opera)： 

var testdiv = document.getElementById("testdiv");
testdiv.style.cssText = "font-size:24px;color:red;";
  • Firefox等浏览器：运行代码，在下面的测试区域查看效果。
  • Firefox等浏览器IE浏览器：
    ，在下面的测试区域查看效果。

2. 设置元素的class属性

使用Firefox和Safari之类的浏览器，可以通过元素(Element)的setAttribute()方法设置class属性： 

var testdiv = document.getElementById("testdiv");
testdiv.setAttribute("class", "cat");

为了照顾IE这个异类，它只认识className属性—在IE中className = class，其它大多数浏览器都忽略className属性。你可以这样做： 

var testdiv = document.getElementById("testdiv");
testdiv.setAttribute("class", "cat");
testdiv.setAttribute("className", "cat");
  • Firefox等浏览器：运行代码，在下面的测试区域查看效果。
  • Firefox等浏览器IE浏览器：运行代码，在下面的测试区域查看效果。

这里是测试用的区域：

测试用的区域。Hello world!

上面的代码已经在Mozilla Firefox 1.5.0.2，Opera 8.54，Konqueror 3.5.2，IE6 测试通过。

3. 创建输入元素

注意document.createElement()和<Element>.setAttribute()方法的顺序： 

var button = document.createElement("input");
button.setAttribute("type", "reset");
var testdiv = document.getElementById("testdiv").appendChild(button);
  • Firefox等浏览器和IE浏览器：运行代码，在测试区域查看效果。

4. 向元素增加事件处理

标准的做法是： 

var testdiv = document.getElementById("testdiv");
testdiv.setAttribute("onclick", "doFoo();");

除了IE，上面的代码在所有的当前浏览器中都能工作。在IE中必须使用点词法来引用所需的事件处理程序： 

var testdiv = document.getElementById("testdiv");
testdiv.onclick = function(){doFoo();};

相关资源：

Related posts:

  1. 用Javascript生成弹出窗口
  2. 最简单的JavaScript两级联动示例
  3. JavaScript分页控件
  4. 清除Web标准误区，保持清晰的文档结构
  5. 同时运行Firefox2和Firefox3
]]> http://www.ideawu.net/blog/archives/145.html/feed 3