给SlideShowExtender增加链接

 

写作目的:扩展ajaxtoolkit应用
ajaxtoolkit版本:Version 1.0.10606.0
ASP.NET AJAX 版本:version 1.0
测试环境:vista+vs2005sp1+IE7
适应人群:M$的asp.net发烧友

概述:
官方网站的DEMO:(http://ajax.asp.net/ajaxtoolkit/SlideShow/SlideShow.aspx)您访问时也许已经升级,请注意版本

这个web控件主要来源于ms古老的幻灯片,vista的sidebar也有相应的控件,用以显示图片,无论在winform上还是webform上都是一种很cool的用户体验:



问题:
虽然这次发布的版本中加入了一个新的属性:ImageTitleLabelID,用来显示图片的描述,但是如果想做为广告显示幻灯片放映,还需要使用链接来转到相应的广告

方法:
1.需要下载ajaxtoolkit的相应版本的源代码包,请到官网下载
2,在你已经引用控件包的网站中新建网站,加入以下代码:

 1          < ajaxToolkit:ToolkitScriptManager  ID ="ToolkitScriptManager1"  runat ="server" >
 2          </ ajaxToolkit:ToolkitScriptManager >
 3          < asp:Image  ID ="Image1"  runat ="server"  Height ="175px"  Width ="300px"   />< br  />
 4          < asp:Label  ID ="Label_Title"  runat ="server" ></ asp:Label >< br  />
 5          < asp:Label  ID ="Label_Description"  runat ="server" ></ asp:Label >< br  />
 6          < asp:Button  ID ="Button_Preview"  runat ="server"  Text ="上一个"   />
 7          < asp:Button  ID ="Button_Stop"  runat ="server"  Text ="停止"   />
 8          < asp:Button  ID ="Button_Next"  runat ="server"  Text ="下一个"   />< br  />
 9          < ajaxToolkit:SlideShowExtender  ID ="SlideShowExtender1"  runat ="server"  AutoPlay ="True"
10             Loop ="True"  SlideShowServiceMethod ="GetSlides"  SlideShowServicePath ="~/WebService/ad.asmx"
11             TargetControlID ="Image1"  ImageDescriptionLabelID ="Label_Description"  ImageTitleLabelID ="Label_Title"  NextButtonID ="Button_Next"  PlayButtonID ="Button_Stop"  PlayButtonText ="播放"  PreviousButtonID ="Button_Preview"  StopButtonText ="停止"   >
12          </ ajaxToolkit:SlideShowExtender >

我的ad.asmx中有一个GetSlides的方法,用于从数据库中获取每个图片的url,标题和描述.
当然作为演示,你也可以使用demo中所给出的页面方法来实现,只不过数据是硬性写入的.
如果这个网页可以正常工作,请看下一步：
3.从你的源代码包中拷贝出SlideShowBehavior.js文件,它会出现在X: \解压目录\AjaxControlToolkit\SlideShow目录下,复制它到你的网站中,比如~/js/SlideShowBehavior.js
设置你的SlideShowExtender的ScriptPath属性为~/js/SlideShowBehavior.js
4,因为我们只需图片标题和链接,所以可以把描述的字段替换成链接的地址,我们修改js文件中的写部分：

 1     updateImage :  function (value)  {
 2        /// <summary>
 3        /// Set current image to be the specified Slide.
 4        /// </summary>  
 5        /// <param name="value" type="Object" mayBeNull="false" />
 6        /// <returns />
 7             
 8        if (value) {
 9            if (this.raiseSlideChanging(this._currentValue, value)) {
10                return;
11            }
12            this._currentValue = value;
13            this._elementImage.src = value.ImagePath;
14            this._elementImage.alt = value.Name;
15            
16            if (this._imageDescriptionLabel && value.Description) {
17                this._imageDescriptionLabel.innerHTML = value.Description;
18            }
19            if (this._imageTitleLabel && value.Name) {
20                this._imageTitleLabel.innerHTML ="<a href=\""+value.Description+"\" target=\"_blank\">" + value.Name + "</a>";
21            }
22            this.raiseSlideChanged(value);
23            this.resetButtons();
24        }
25    } ,

黄色背景部分为添加的内容.看一下效果：


最后修改一下显示效果,再把Description的label隐藏掉就行了.

希望本文能对您有所帮助.

转载于:https://www.cnblogs.com/fhmsha/archive/2007/06/17/786049.html