idea's blog

在以前, 如果想做一个全选和全不选的功能, 用 jQuery 非常简单, 就是设置 checked 属性. 但今天见鬼了, 以前能正常工作的代码无论如何也不能工作.

if(selectAll){
	$('input.cb').attr('checked', 'checked');
}else{
	$('input.cb').removeAttr('checked');
}

这段代码只能工作一次, 但我可以发誓, 这段代码以前用得没问题! 然后我尝试这段代码:

$('input.cb').attr('checked', selectAll);

也是只能工作一次.

后来, 终于查明好像是 jQuery 的版本兼容问题, 我找出了下面的正确方法, 但不知道是不是兼容所有版本的 jQuery.

$('input.cb').prop('checked', cb.checked);

兼容所有版本的正确方法:

// 兼容所有版本的正确方法
$('input.cb').each(function(i, e){
	e.checked = cb.checked;
});

搜索了一下, jQuery 对于 attr() 和 prop() 有很大的争论.

二维码是移动应用领域非常重要的一项技术, 可用在账号登录, App 下载, 好友关注等领域. 事实上, 二维码是一种以图片形式编码数据的方式, 在图片中包含了某些数据, 这些数据可以是一段文本, 一个URL等等.

既然二维码是一种图片, 那么你可以会想当然地使用 PHP 或者 Java 等语言生成二维码图片, 如果在 Web 应用中这么做, 你很可能就大错特错了! 因为, 图片处理是非常消耗 CPU 计算资源的, 这会给你带来很大的成本.

对于 Web 应用, 其实可以使用客户端(浏览器)技术来生成二维码图片, 也即使用 JavaScript 来生成二维码图片, 这样, 把计算分布到每一个用户的电脑上, 充分利用"分布式计算".

Continue reading »

发现一个在网页中绘制数据图, 如曲线图, 柱状图的纯 JavaScript 工具: flot. 极度推荐啊! 有图和代码为证:

*代码附后*

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

Continue reading »

有一些很容易出错的获取动态加载的图片的尺寸的方法, 之所以出错, 主要原因是:

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

错误的代码是:

Continue reading »

有个延时绑定事件的需求, 如等待鼠标停留在某图片上面一段时间之后才展示浮动层, 以避免鼠标滑过屏幕时一片乱闪. 一时找不到合适的插件, 所以自己写了个.

// 定义
(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');

Web应用中常常需要这样的功能: 当用户点击"提交"按钮, 或者点击"刷新"链接AJAX获取新数据时, 都需要显示一个提示Loading的提示信息, 并且锁住按钮和某个区域, 避免用户重复操作. 使用 jQuery 的 BlockUI 插件可能轻松地达到该功能. 而且, BlockUI 的功能不仅如此, 它还能实现"弹出"窗口(如登录窗口), 气泡提示信息的功能.

1. 遮挡整个页面

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

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

Continue reading »