idea's blog

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

*代码附后*

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

Continue reading »

Written by ideawu at 2011-08-04 01:03:09 | tags: flot, JavaScript, jQuery

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

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

错误的代码是:

Continue reading »

Written by ideawu at 2011-07-03 22:32:43 | tags: JavaScript, jQuery

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

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

Written by ideawu at 2011-05-27 16:27:05 | tags: JavaScript, jQuery

根据用户反馈的功能需求, tableview 现新增了单选功能, 用于限制只能选择最多一行记录.

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

Written by ideawu at 2010-10-23 16:49:24 | tags: 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/

Written by ideawu at 2010-05-12 22:16:46 | tags: JavaScript

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

1. 遮挡整个页面

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

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

Continue reading »

Written by ideawu at 2010-04-26 11:47:00 | tags: JavaScript, jQuery, 载入提示, 遮挡