[JS] 利用BlockUI實作簡單個人行事曆

2011-05-01

8758
0
JavaScript

此範例主要利用BlockUI將備忘存檔的功能顯示在中間，可以不用切換頁面做到每一天行事曆的資料存取動作。

JS部分:

    <script src="./Scripts/jquery.js" type="text/javascript"></script>
    <script src="./Scripts/jquery.blockUI.js" type="text/javascript"></script>
    <script type="text/javascript">
        function ShowSubWin(url) {
            var frmHtml = "<iframe style='width: 100%; height:100%;' src='" + url + "'></iframe>";
            $.blockUI({
                css: { width: '40%', height: '40%', top: '30%', left: '30%' },
                message: frmHtml
            });
        }
        $(function () {
            if (parent.window != window)
                $("#QQQ").hide();
            else {
                $("#EEE").hide();
            }
 
        });
    </script>

HTML部分:

    <div id="QQQ">
        <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999" 
            CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" 
            ForeColor="Black" Height="180px" ShowGridLines="True" VisibleDate="2011-04-29" 
            Width="100%" OnDayRender="Calendar1_OnDayRender"  UseAccessibleHeader="true">
        <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
        <NextPrevStyle VerticalAlign="Bottom" />
        <OtherMonthDayStyle ForeColor="#808080" />
        <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
        <SelectorStyle BackColor="#CCCCCC" />
        <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
        <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
        <WeekendDayStyle BackColor="#FFFFCC" />
        </asp:Calendar>
    </div>
    <div id="EEE">
        日期:<asp:Label ID="lblDate" runat="server" ></asp:Label><br/>
        備忘:<asp:TextBox ID="txtMemo" runat="server"></asp:TextBox><br/>
        <asp:Button ID="btnSave" runat="server" Text="存檔" OnClick="btnSave_Click" />
        <asp:Button ID="btnClose" runat="server" Text="取消" OnClientClick="parent.eval('$.unblockUI();');return false;" />
    </div>

Code部分:

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!string.IsNullOrEmpty(Request["day"]))
                lblDate.Text = Request["day"];
        }
        protected void btnSave_Click(object sender, EventArgs e)
        {
            string Script = "alert('日期:{0}\\n備忘:{1}');parent.eval('$.unblockUI();');";
            Script = string.Format(Script, lblDate.Text, txtMemo.Text);
            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "ShowMsg", Script, true);
        }
        protected void Calendar1_OnDayRender(Object sender, System.Web.UI.WebControls.DayRenderEventArgs e)
        {
            e.Cell.Controls.Clear();
            e.Cell.Text = @"<a href=""javascript:ShowSubWin(location.href + '?day={0}');"">{1}</a>";
            e.Cell.Text = string.Format(e.Cell.Text, e.Day.Date.ToString("yyy/MM/dd"), e.Day.DayNumberText);
        }

回首頁