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, 从下列代码可以看出区别:
<asp:TextBox ID="txtSearch" runat="server" CssClass="NormalTextBox" Style="width: 190px;" EnableViewState="False"
MaxLength="500" />
<Ajax:TextBoxWatermarkExtender ID="txtWESearch" runat="server" TargetControlID="txtSearch"
WatermarkText="Search Entrys" WatermarkCssClass="SearchWatermark" />
<asp:TextBox ID="txtSearch" runat="server" CssClass="SearchWatermark" Style="width: 160px;height:20px;font-size:16px;"
EnableViewState="False" MaxLength="500"/>
对应的js代码:
jQuery(document).ready(function() {
_swapElem = jQuery('.SearchWatermark');
_swapValue = 'Search Entrys';
_swapElem.focus(function() {
if (_swapElem.val() == _swapValue) {
_swapElem.val("");
_swapElem.removeClass('SearchWatermark');
}
}).blur(function() {
if (jQuery.trim(_swapElem.val()) == "") {
_swapElem.val(_swapValue);
_swapElem.addClass('SearchWatermark');
}
});
})
以上算是一个小demo(更新: 其实这种方式是存在问题, 特别是点击按钮回放之后, 对此我们最终开发一个独立的jQuery插件Watermark plugin,有兴趣不妨看看后来的文章: jQuery插件开发: Watermark Plugin), 如果你注意到的话, 本Blog的TagCloud模块就是利用jQuery框架和Animated Hover Plugin（一个jQuery插件）实现某些动画效果，有兴趣不妨把鼠标停留在某一个Tag标签上看看, 关于Animated Hover Plugin请参看这里: http://media.brianbeck.com/shared/javascript/jquery-ahover/demo/demo.html
接下来SunBlog将利用jQuery BlockUI Plugin来替代ModalPopupExtender, 真正让jQuery融入SunBlog里边，预计整体性能会提升不少。
更多的jQuery和DNN的整合链接:
jQuery, Microsoft and DNN
http://www.dotnetnuke.com/Community/Blogs/tabid/825/EntryId/2008/jQuery-Microsoft-and-DNN.aspx
DotNetNuke 5.0: Now with jQuery
http://www.dotnetnuke.com/Community/Blogs/tabid/825/EntryId/2009/DotNetNuke-5-0-Now-with-jQuery.aspx
Using JQuery In DotNetNuke 5.0
http://blog.theaccidentalgeek.com/post/2008/10/20/Using-jQuery-in-DotNetNuke-50.aspx
更多的jQuery和Asp.Net的整合链接:
Asp.Net之父Scott Guthrie的博客: http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx
一个对jQuery加入MVC框架拍手赞成的牛人: http://encosia.com/category/jquery/
一直研究ASP MVC框架的大腕，当然对jQuery也见解独到: http://www.west-wind.com/WebLog/
一个对UI颇有研究的Web开发架构师，同时对jQuery一见钟情: http://mattberseth.com/blog/jquery/