打印本文 打印本文 关闭窗口 关闭窗口
ASP.NET组件编程step by step
作者:武汉SEO闵涛  文章来源:敏韬网  点击数3641  更新时间:2009/4/23 10:47:16  文章录入:mintao  责任编辑:mintao

ASP.NET组件编程step by step

 

       事先声明:本文只适合对组件编程感兴趣的初、中级程序员,如果您对组件编程很牛X了,您可以略过此地。欢迎各位指导并发表意见和建议。

 

       事情的起因(纯粹为了增强文章的趣味性)

       我对电影一向不感冒,最近网上、电视上《十面埋伏》的广告和评论扑天盖地,加上张艺谋在中央电视台还搞了个晚会,专门宣传该影片,不免也蠢蠢欲动起来。我没有去电影院看电影的习惯,所以如果网上有就到网上看了。恰巧一日QQ聊天时,一个群里的会员发了个链接,说是可以下载《十面埋伏》,我试了一下,果然,速度还不错,有70多K的速度,100多M的东东很快就下完了(是不是我特别容易满足?)。可是效果不太好,颜色基本上没有了,像过去的黑白电影,还不清晰,不过免费的东西就这样了,将就一下啦。

 

       看了十几分钟,终于看不下去了,都是打打杀杀,三个主要人物都出场了,没有帅哥也没有美女,看得我头晕眼花直打盹。为了防止见周公,鼠标在我手里不安份起来,我用的播放器是为了看这个电影刚下载的realplay10的,这可是头一次见,以前都用8.0的,界面没新版的好看(虽然我并不觉得好看,笨笨的),所以想看看有些什么功能,最后,我打开了下面的界面:

 

     

       咦,我一看那个蓝色的背景挺有趣的啊,“名称”标签和文件框组合成一个复合控件,背景颜色还可以变化,有点创意,效果也不错,那我也做一个啊,哈哈,有时候一个想法就是这样无意中产生的。

 

       基础知识

       在ASP.net中做一个复合控件不是很难了,但是如果是刚刚接触的话,可能还是需要指点一下方向,所以不妨在这里啰嗦一下,高手们莫怪。

       Javascript:当今最流行的客户端脚本语言,如果要做出特效来他最有能耐。

       CSS:级联样式表,用于设置元素的样式。

       DHTML:动态HTML,和浏览器交互会用到。

       System.Web.UI.WebControls.WebControl:在ASP.NET中自定义控件的基类,我们可能会重写他的一些方法,常用的有:

       CreateChildControls():给予控件创建内定子控件的机会,预设情况OnPreRender()方法会调用此方法要求该控件创建其子控件,别一种情况则是由FindControl()方法调用。

       OnPreRender():触发PreRender事件,在绘制控件之前发生。

       Render():绘制控件。

       AddAttributesToRender():向标签中添加HTML样式或属性。

       另外,还有一个方法:EnsureChildControls(),该方法用于确定服务器控控件是否包含子控件,如果不包含,则创建子控件,在设计阶段起作用。

    其他的慢慢去看啦,这几个是我们的例子中会用到的。

 

    最终效果

    先看看效果,这样心中才有明确的目标。

   

    没有任何鼠标动作            鼠标移到控件上              鼠标移出后还原

 

    怎么样?效果挺炫吧?(我在自夸呢)

   

    跟我一步一步来

       现在,请听我的指令:喜欢这个效果的站左边,不喜欢这个效果或者极为不屑的站右边。好了,右边的朋友请关闭您的浏览器继续您喜欢的网上之旅,左边的朋友请跟我来:

 

1、  我们先完成效果部分,也就是编写javascript脚本。我的方法是写一个HTML文件,试验脚本的正确性:

<HTML>

<HEAD>

<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">

<TITLE></TITLE>

 

<script language=javascript>

var OldColor;

function mouseover(ctrl,color)

{

        OldColor = ctrl.style.backgroundColor;

        ctrl.style.color = "#ffffff";

        ctrl.style.backgroundColor = color;

       

}

function mouseout(ctrl)

{

        ctrl.style.backgroundColor = OldColor;

        ctrl.style.color = "#000000";

}

</script>

</HEAD>

<BODY>

[1] [2] [3] [4] [5]  下一页

打印本文 打印本文 关闭窗口 关闭窗口