Baldwin's DNN-Category-JQuery

分享jQuery技巧

dnnsun@gmail.com — Tue, 04 Aug 2009 03:12:44 GMT

分享一些在项目用到的jQuery小技巧, 对自己做个记录，对别人也许有些帮助:

1) DatePicker设置特定问日期, 有时我们可能需要特定的默认日期或重新设置值, 而不是Today, 代码如下:

// set the specific date value from the hidden element 'defaultDate'
if ($("#LBRGCalendar").length)
    $("#LBRGCalendar").datepicker('setDate', $.datepicker.parseDate('yy-mm-dd', $('#defaultDate').val()));

// 错误的做法，因为DatePicker的setDate接收的日期必须是Date对象而非字符串
$("#LBRGCalendar").datepicker('setDate','2009-07-31');

2) 判断所获取的文档节点(element)是否存在:

// id为你所要获取的节点id
if ($(id).length) {
    // 对该节点进行操作
}

3) 当你在一链接(link)上注册某一事件(比如ajax请求)时不要忘了取消默认的链接行为, 因为点击一个链接时, 执行完捕获/冒泡动作后, 会触发链接的默认事件: 跳转到指定链接地址, 比如href="#"则在IE下有时会跳到页面顶端, 以往我们为了兼容所有的浏览器, 可以封装一个如下的函数:

function stopDefault(e) {
    // Prevent the default browser action (W3C)
    if (e && e.preventDefault)
        e.preventDefault();
    // A shortcut for stoping the browser action in IE
    else
        window.event.returnValue = false;
    
    return false;
}

如今如果你在使用jQuery框架那你就幸福不少, 因为jQuery已经为你封装了这一函数, 原理一样但更精妙, 你可以直接如此用即可:

$('#SendToFriend').click(function(e) {
    // do somthing 比如: $('#EmailToFriendForm').dialog('open');
    
    // 阻止该链接的默认行为
    e.preventDefault();
});

4) 如何进行下拉框或下拉菜单(dropDown, select)等的相关操作, 不妨看看你之前写过一篇文章如何借助JQuery封装HTML SELECT操作?

5) 如何判断Checkbox是否选中, 目前的常见方式有三种, 不妨作为参考参考:

// First way   
$('#checkBox').attr('checked');   
  
// Second way   
$('#edit-checkbox-id').is(':checked');   
  
 // Third way   
$("[:checkbox]:checked").each( function() {   
       // Insert code here   
    }
 );

6) 利用jQuery创建自动等高的列(元素)布局, 在此分享一个更为简便的函数, 更详细的关于此话题的讨论请查看我之前的一篇文章jQuery插件开发: equalizeCols Plugin:

///<summary>
/// Take a group of elements and make them all the same height
///</summary>
function equaliseHeights(arrayOfIds){
    var maxh = 0, i = arrayOfIds.length, id;
    while(i--){
        id = arrayOfIds[i];
        $(id).each(function(){
            if($(this).height() > maxh){
                maxh = $(this).height();
            }
        });
        $(id).height(maxh);
        maxh = 0;
    }
}

//如下使用即可, 接收的参数是一组需要设置等高的元素
equaliseHeights(['.feature .component-container']);

Enjoy jQuery, :)

(转载)掌握JavaScript语言的思想前提

dnnsun@gmail.com — Sat, 28 Feb 2009 09:24:25 GMT

对于JavaScript的学习，可能最重要的还是要从思想上认识到JavaScript不是玩具语言。JavaScript的作用远不止增加点表单验证，我们可以看看GMail、看看Google Maps，如果开发者们没有对JavaScript足够尊敬，是不大可能写出如此优秀的Web应用的。

jQuery插件开发: equalizeCols Plugin

dnnsun@gmail.com — Tue, 17 Feb 2009 14:54:28 GMT

在开发web应用中, 自从我们抛弃了基于Table的页面布局后, 创建同等高度栏目或内容盒子的视觉效果(多是处于UI美观的考虑)已然是一个挑战, 在此推荐一个jQuery插件, 使得在同一个容器里“平衡”盒子的高度成为一件很简单的事情，从而修正了浏览器之间的差异, 还一个漂亮的UI.

SunBlog更新:增加3D Tag Clouds插件

dnnsun@gmail.com — Sat, 07 Feb 2009 06:35:13 GMT

如果你用过WordPress的博客应该都知道有一个很著名的插件WP-Cumulus WordPress plugin, 这也是一个3D Tag Coulds插件, 它通过Flash+js来展现Tag或目录的标签云效果, 超炫且极为实用, 而这也是我偶然发现, 觉得效果不错并对SunBlog有借鉴意义, 因为之前我也曾有JQuery来实现有些动画效果的标签云插件, 故现在手痒把Flash也整合进来, 如此用户就有更多的选择和效果呈现了, 经过一个晚上的努力终于把这一插件开发出来, 无缝的整合到SunBlog里边, 目前发布了Beta版本做个Demo, 即将开发的功能包括:

~~1) 用户可设置标签云呈现相关选项, 比如宽度, 高度, Tag颜色等等~~ (已完成, 更新于2009-02-15)

2) 整合JQuery Flash Plugin, 不用默认的SWF Object脚本, 简洁方便.

3) 独立成一个控件组件, 也许DNN其他模块也可以用到.

4) 更好的支持中文Tag呈现

SunBlog 3D Tag Coulds插件 Demo

Javascript版本的StringBuilder

dnnsun@gmail.com — Wed, 04 Feb 2009 13:24:56 GMT

众所周知, C#或其他一些纯粹的面向对象编程语言都存在StringBuilder这一类型, 这是因为字符串在内存中是不可变的。这意味着, 如果为了得到第三个字符串而连接两个字符串时, 在一个短暂的时间内, CLR将会在内存中维护三个字符串的实例。为了缓解这种因字符串连接而带来的性能问题, 同时为了给字符串连接操作给予编程工具支持, .NET框架提供了一个名为StringBuilder的类。通过使用StringBuilder类来动态创建可变长字符串, 可以避免因CLR中的字符串的不可变性而带来的问题, 如此编写的代码通常会更容易阅读。而今天我们要提到的是解释型语言javascript下的StringBuilder, 大家都应该知道javascript只有原生类型String, 而并没有StringBuilder, 在此我想分享的就是扩展的StringBuilder版本。

如何借助JQuery封装HTML SELECT操作?

dnnsun@gmail.com — Tue, 03 Feb 2009 12:55:59 GMT

最近一直在开发Asp.Net MVC项目, 对DNN稍有松懈, 不过由于所有技术都有相通和借鉴之处, 故在学习MVC框架的同时也对DNN有了更深的认识, 由于MVC模式对UI和前端界面的交互有更多的掌握, 需要你更多控制界面上的HTML元素, 包括布局控制和如何呈现等等. 在此想分享一点JQuery在MVC模式下(当然你在其他项目也是可以用到的, 比如DNN或传统的Asp.Net form)如何操作HTML SELECT元素。

jQuery插件开发: Watermark Plugin

dnnsun@gmail.com — Wed, 19 Nov 2008 13:31:11 GMT

最近在研究SunBlog和jQuery的整合, 不敢说有很多成就, 到此为止算是刚入门吧。jQuery最让我欣喜的是其插件式的开发模式, 这一点几乎和 DNN的模块概念同出一辙。我将陆续写些文章阐述DNN和jQuery, 比如如何开发插件(jQuery Plugin), 如何利用Ajax方式调用Webservice,如何优化UI等等, 今天就简单说说如何开发jQuery插件。

SunBlog更新:整合jQuery

dnnsun@gmail.com — Sun, 09 Nov 2008 12:36:34 GMT

jQuery以其简洁而著称, 也就是"Do more with less"理念贯穿其中, 我想这是我们需要的, 以最简洁的方式附加一系列的方法和属性甚至事件到某一个DOM节点. 而DNN也打算在5.0版本上整合jQuery, 如此ClientAPI就可以借助jQuery的框架发挥更大的威力和性能, 让我们拭目以待. 当然, SunBlog模块也不甘落后, 目前也在整合jQuery, 就是替代之前使用的Asp.Net Ajax Tookit框架, 在整合j的过程中, 发现jQuery的确可以用更少的代码开发出更强大的功能, 比如Search输入框的水印功能(Watermark), 之前我使用的是Asp.Net Ajax Tookit的TextBoxWatermarkExtender控件, 而如今我只需要几行js代码即可实现同样的feature.