Register  |  
About the author
Baldwin's Status
 Contact Me
Baldwin Sun
Senior Developer for dnn solution & founder of SunBlog module...
Blog搜索
相册库
更多照片请查看相册库
最新评论
Rss Feed
feedsky
抓虾
pageflakes
newsgator
哪吒
我们的服务
  • DotNetNuke 咨询
  • Web设计及其模块开发
  • 免费建站
  • 电子商务
  • 开拓市场
我们致力于开发定制的web 2.0 ,所服务的客户主要包括小中型企业,社区俱乐部及其非盈利机构组织。我们将利用开源的DNN作为我们核心的系统机制,更多相关信息...

SunBlog更新:整合jQuery

Posted in [最新DNN资讯], [DNN模块开发], [站点更新] By baldwin

SunBlog and jQuery

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/

Comments

Was it good for you, too?Join the discussion » ,but you need to login first before you make comments.