复杂控件(广告和日历)
AdRotator广告控件
元素 | 描述 |
ImageUrl | 要显示的图像的URL(必须项) |
NavigateUrl | 单击AdRotator控件时要打开的页面的URL(可选) |
Height | 图像的高度(可选) |
Width | 图像的宽度(可选) |
AlternateText | 图像不可用时要显示替代文本。在某些浏览器中,该文本显示为提示信息(可选) |
Keyword | 广告的类别。AdRotator控件使用该属性来筛选显示的特定类别(可选) |
Impressions | 广告显示的频率,数字越大,显示该广告的频率越高。XML文件中所有<Impressions>值的总和不能超过2047999999(可选) |
XML说明:
<Advertisements>
<Ad>
<ImageUrl>image/1.png</ImageUrl>
--广告显示的图片
<NavigateUrl>http://www.baidu.com/</NavigateUrl>
--单击广告图片时的超级链接,链到什么网站
<AlternateText>百度广告</AlternateText>
--交替文本:当鼠标悬停或图片无效时显示的文字
<Keyword>1</Keyword>
--显示多个广告时,对广告进行分组,本组组号为1
<Impressions>120</Impressions>
--本组,即1号广告显示的几率120
</Ad>
首字母都需要大写。否则出现找不到xml文件的错误。
广告控件数据源
1 <?xml version="1.0" encoding="utf-8"?>
2 <Advertisements>
3 <Ad>
4 <ImageUrl>~/img/sina.gif</ImageUrl>
5 <NavigateUrl>http://www.sina.com</NavigateUrl>
6 <AlternateText>新浪网</AlternateText>
7 <Keyword>新闻</Keyword>
8 <Impressions>50</Impressions>
9 <StartDate>6/12/07</StartDate>
10 <EndDate>23/12/08</EndDate>
11 </Ad>
12 <Ad>
13 <ImageUrl>~/img/qq.gif</ImageUrl>
14 <NavigateUrl>http://www.qq.com</NavigateUrl>
15 <AlternateText>腾讯网</AlternateText>
16 <Keyword>聊天</Keyword>
17 <Impressions>50</Impressions>
18 <StartDate>6/12/07</StartDate>
19 <EndDate>23/12/08</EndDate>
20 </Ad>
21 <Ad>
22 <ImageUrl>~/img/baidu.gif</ImageUrl>
23 <NavigateUrl>http://www.baidu.com</NavigateUrl>
24 <AlternateText>百度</AlternateText>
25 <Keyword>搜索</Keyword>
26 <Impressions>50</Impressions>
27 <StartDate>6/12/07</StartDate>
28 <EndDate>23/12/08</EndDate>
29 </Ad>
30 </Advertisements>
****************************************
Calendar 日历控件使用
简介
Calendar控件是一个很简单的控件,主要用来在页面中提供日历的选择,其实现在已经有很多用javascript写的日历控件,但是Canlendar日历控件能够让我们更快速地来实现这种效果,只需要进行一些简单的设置即可。
重要属性
TargetControlID:用来显示选择日期的控件,改控件必需为TextBox
CssClass:设置日历的样式
Format:显示日期的格式,如yyMMdd,会显示071105
PopupButtonID:当日期是通过选定某个按钮弹出的时候,为改按钮的ID,一般为一个日历图片
示例1
1.打开visual studio2005,新建一个AjaxControlToolkit网站。
2.在网站根目录下添加一个窗体,命名为Calendar1.aspx。
3.切换到设计视图,在页面上添加ScriptManger,一个TextBox和一个CalendarEntender控件。
4.设置CalendarExtender控件的属性如下:
<cc1:CalendarExtender TargetControlID="txtDate"
runat="server"
Format="yyMMdd" ID="calDate"
CssClass="MyCalendar"/>
下面是样式代码,对应上面的CssClass,关于改样式的解释在后面讲到:
<style type="text/css">
.MyCalendar .ajax__calendar_container
{
border:1px solid #646464;
background-color:#faac38;
}
.MyCalendar .ajax__calendar_other
.ajax__calendar_day,
.MyCalendar .ajax__calendar_other
.ajax__calendar_year
{
color:#ffffff;
}
.MyCalendar .ajax__calendar_hover
.ajax__calendar_day
{
color:red;
background-color:#e8e8e8;
}
.MyCalendar .ajax__calendar_active
.ajax__calendar_day
{
color:blue;
font-weight:bolder;
background-color:#e8e8e8;
}
</style>
5.保存设计,F5运行,当文本框控件获得焦点时就会弹出日历控件,选择日期后所选日期会按照所设定的格式显示在文本框中,然后日历控件会自动隐藏。
示例2
这个例子是单击一个图片按钮后会弹出日历控件,这个在网站中也是经常用到的
1.在网站的根目录下新建一个web窗体,命名为Calendar2.aspx.
2.步骤和上面的一样,只是在页面中多了一个image控件,Calendar控件的设置如下:
<cc1:CalendarExtender TargetControlID="txtDate"
runat="server" Format="yyMMdd"
ID="calDate" PopupButtonID="imgDate"
CssClass="MyCalendar"/>
设置基本上和上一个示例一样,多了一个PopupButtonID,用来制定点击的图片
3.保存设计,按F5运行,当单击日历图片时会弹出日历控件,选择了日期,控件会隐藏,选择的日期会显示在文本框中。
注:属性Format用来控制日期显示的格式,但要注意代表月的M一定要大写,如:yyyy-MM-dd,yyyy/M/d,yyyy年MM月dd日
CssClass说明:
.ajax_calendar_container:日历控件的整体内容部分
.ajax_calendar_footer:日历控件的页脚部分
.ajax_calendar_header:日历控件的页眉部分
.ajax_calendar_activa
.ajax_calendar_day:选中日期时的样式,一般选择过的日期会以另一种颜色显示。
.ajax_calendar_hover
.ajax_calendar_day:鼠标划过日期时的样式,一般改变悬停在的日期的前景色和背景色。
.ajax_calendar_other .ajax_calendar_day:非本月日期的样式名