AJAX中日历控件的应用

最新推荐文章于 2024-11-11 23:26:32 发布

weixin_33743661

最新推荐文章于 2024-11-11 23:26:32 发布

阅读量83

点赞数

文章标签： xhtml c# php

阅读全文并下载：http://www.cckan.net/forum.php?mod=viewthread&tid=44

<%@ Page

Code
Language="C#" AutoEventWireup="true"   CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
     <title>无标题页</title>
</head>
<body>
     <form id="form1" runat="server">
     <asp:ScriptManager ID="ScriptManager1"   runat="server" EnableScriptGlobalization ="true" >
     </asp:ScriptManager>
     <div>
     </div>
     <cc1:CalendarExtender ID="CalendarExtender1" runat="server"
         TargetControlID="TextBox1">
     </cc1:CalendarExtender>
     <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
     </form>
</body>
</html>

下面是怎么加样式的应用
每个页面中有且只有一个的scriptmanager控件，一个文本框控件，一个AutoComplete控件，一个Calendar控件，这里为了简单两个控件的TargetControl都是同一个文本框。
当然别忘了页面开始的那句话：

<% @ Register Assembly = " AjaxControlToolkit " Namespace = " AjaxControlToolkit " TagPrefix = " ajaxToolkit " %>

< asp:scriptmanager ID = " Scriptmanager1 " runat = " server " ></ asp:scriptmanager >
< asp:TextBox ID = " SearchText "   Width = " 150px " runat = " server " />
< input type = " button " id = " show " />

< ajaxToolkit:CalendarExtender TargetControlID = " SearchText " CssClass = " MyCalendar "
      runat = " server "   PopupButtonID = " show " ID = " Calendar " Animated = " true "
      Format = " yyyy-MM-dd " Enabled = " true " ></ ajaxToolkit:CalendarExtender >

< ajaxToolkit:AutoCompleteExtender runat = " server " ID = " AutoCompleteSearch "
         MinimumPrefixLength = " 1 " TargetControlID = " SearchText "
         ServicePath = " AutoCompleteService.asmx "
         ServiceMethod ="GetSearchTerms"></ajaxToolkit:AutoCompleteExtender>

首先来试试日历控件。TargetControlID就是日历控件要显示在哪个控件的下方，这里是SearchText文本框，Format是日期的格式。这里需要注意的是PopupButtonID,如果不设置这个属性，日历控件就在TargetControl获得焦点的时候显示，选择日期后也不会消失，而必须在TargetControl失去焦点的时候才消失，设置PopupButtonID属性，当点击这个Button的时候日历控件在TargetControl下方显示，选择日期后就消失，或者点击按钮消失。

下面是日历控件的CSS，目前就知道这些：

.MyCalendar .ajax__calendar_container
{
     border : 1px solid #646464 ; background-color : #C0AB80 ; color : #FC2628 ; background-image : url(../Images/large62230.jpg) ;
}
     .MyCalendar .ajax__calendar_other .ajax__calendar_day,
     .MyCalendar .ajax__calendar_other .ajax__calendar_year
      {
          color : black ;
      }
.MyCalendar .ajax__calendar_hover .ajax__calendar_day,
.MyCalendar .ajax__calendar_hover .ajax__calendar_month,
.MyCalendar .ajax__calendar_hover .ajax__calendar_year
   {     color : #6E52DB ; font-size : medium ; }
  .MyCalendar .ajax__calendar_active .ajax__calendar_day,
  .MyCalendar .ajax__calendar_active .ajax__calendar_month,
  .MyCalendar .ajax__calendar_active .ajax__calendar_year
   {     color : black ;   font-weight : bold ; }