如何使用iframe实现calendar动态显示,并遮住画面中DropDownList。

类别:Asp 点击:0 评论:0 推荐:

基础知识介绍:
        iframe:可以让你在一个页面中嵌套调用别的事件。
        Calendar控件:微软自己制定的服务器端控件,用起来相当方便。
        DropDownList控件:html显示的代码为(input type=”select”),这个控件比较奇怪,M$把它定义在页面的最顶层,也就是无论你如何修改其他控件Z-INDEX,你都没有办法遮住它。

       主页面 HTML <script language="javascript">
     function setDate(strDate)
        { mainForm.txtDatetime.value = strDate; }
</script>
<body>
    <form id="mainForm" method="post" runat="server">
         <table>
            <tr> 
                <td><asp:Button ID="btnShow" Runat="server" Text="Show Calendar"></asp:Button></td>
            </tr>
            <tr>
                <td> <asp:DropDownList ID="dplSample" Runat="server">
                                <asp:ListItem>Wanna cover me?</asp:ListItem> 
                          </asp:DropDownList>
                </td>
            </tr>
            <tr>
                 <td><asp:TextBox ID="txtDatetime" Runat="server" AutoPostBack="True"></asp:TextBox></td>
             </tr> 
             <tr>
                 <td> <iframe id="frmCalendar" runat="server" src="WebCalendar.aspx" height="163" width="134" marginheight="0" marginwidth="0"> </iframe> </td>
             </tr>
          </table>
        </form>
 </body>

        主页面 cs
private void Page_Load(object sender, System.EventArgs e)
{
    if( !this.IsPostBack )
     {
        frmCalendar.Visible = false;
     } 
}
private void btnShow_Click(object sender, System.EventArgs e)
{
    if( this.frmCalendar.Visible )
    {
        this.frmCalendar.Visible = false; 
    }
    else
    {
        this.frmCalendar.Visible = true;
        this.frmCalendar.Style.Add("position", "absolute");
        this.frmCalendar.Style.Add("top", "43");
        this.frmCalendar.Style.Add("left", "12");
    }
}
 
        子页面 html 
<body>
     <form id="calenderFrom" method="post" runat="server">
         <asp:calendar id="calDate" runat="server" Font-Names="Arial" Font-Size="8pt" Height="100px" ForeColor="Black" BorderStyle="Solid" FirstDayOfWeek="Sunday"             BackColor="White" BorderColor="Black" CellSpacing="1">
             <TodayDayStyle ForeColor="White" BackColor="Navy"></TodayDayStyle>
             <DayStyle BackColor="#CCCCCC"></DayStyle> 
             <NextPrevStyle Font-Size="8pt" Font-Bold="True" ForeColor="White"></NextPrevStyle>
             <DayHeaderStyle Font-Size="8pt" Font-Bold="True" Height="8pt" ForeColor="#333333"></DayHeaderStyle>
             <SelectedDayStyle ForeColor="White" BackColor="Navy"></SelectedDayStyle>
             <TitleStyle Font-Size="9pt" Font-Names="Arial" Font-Bold="True" Height="12pt" ForeColor="White" BackColor="#333399"></TitleStyle>
             <WeekendDayStyle BackColor="DarkGray"></WeekendDayStyle> 
             <OtherMonthDayStyle ForeColor="#999999"></OtherMonthDayStyle>
        </asp:calendar>
    </form>
 </body> 
       子页面 cs
private void Page_Load(object sender, System.EventArgs e) 
{
    if(!this.IsPostBack)
   {
        // 取得当前线程中的地区设定(原对象为只读)
        CultureInfo ciNew = (CultureInfo)Thread.CurrentThread.CurrentCulture.Clone();
        // 改变日历的设定
        ciNew.DateTimeFormat.AbbreviatedDayNames = new string[]{"日","一","二","三","四","五","六"};
        // 重新对地区设定赋值
        Thread.CurrentThread.CurrentCulture = ciNew;
     }
}

private void calDate_SelectionChanged(object sender, System.EventArgs e)
{
    this.Response.Write("<script>parent.setDate('"+this.calDate.SelectedDate.ToString()+"');</script>");
    string doPostback = @" <script>parent.__doPostBack('btnShow','');</script> ";
    this.Response.Write(doPostback);
}
IzualX 于2005年2月20日晚

本文地址:http://com.8s8s.com/it/it7367.htm