1 <%@ Page Language="C#" AutoEventWireup="true" Codebehind="Events.aspx.cs" Inherits="ZeeControls2Demo.WebLayout.Advanced.Events"
2 Theme="Default" %>
3
4 <%@ Register Assembly="ZettaCube.ZeeControls" Namespace="ZettaCube.ZeeControls" TagPrefix="cc1" %>
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6 <html xmlns="http://www.w3.org/1999/xhtml">
7 <head id="Head1" runat="server">
8 <title>Client And Server-Side Events</title>
9
10 <script type="text/javascript" src="../../common.js"></script>
11
12 </head>
13 <body>
14 <form id="form1" runat="server">
15 <div>
16
17 <script type="text/javascript">
18
19 var stateStr = ['Normal', 'ForwardCollapsed', 'BackwardCollapsed', 'Hidden'];
20
21 function Msg(msg) {
22 document.getElementById('status').value += "\n" + msg;
23 }
24
25 function PanelStateChangingHandler(panelId, oldState, newState) {
26 Msg('PanelStateChanging: Panel ID=' + panelId + ', Old state=' + stateStr[oldState] + ', New state=' + stateStr[newState]);
27 return true; // return false to cancel the state change
28 }
29
30 function PanelStateChangedHandler(panelId, oldState, newState) {
31 Msg('PanelStateChanged: Panel ID=' + panelId + ', Old state=' + stateStr[oldState] + ', New state=' + stateStr[newState]);
32 }
33
34 function ResizedHandler (containerId, oldWidth, oldHeight, newWidth, newHeight) {
35 Msg('Resized: Container ID=' + containerId + ', Old width/height=' + oldWidth + 'x' + oldHeight + ', New width/height=' + newWidth + 'x' + newHeight);
36 }
37
38 function PanelResizedHandler (panelId, oldWidth, oldHeight, newWidth, newHeight) {
39 Msg('PanelResized: Panel ID=' + panelId + ', Old width/height=' + oldWidth + 'x' + oldHeight + ', New width/height=' + newWidth + 'x' + newHeight);
40
41 var h, w;
42
43 if (panelId == '<%= PanelMiddle.ClientID %>') {
44 h = Math.max(0, newHeight - 8);
45 w = Math.max(0, newWidth - 8);
46 document.getElementById('image1').style.height = h + 'px';
47 document.getElementById('image1').style.width = w + 'px';
48 }
49
50 if (panelId == '<%= PanelBottom.ClientID %>') {
51 h = Math.max(0, newHeight - 150);
52 w = Math.max(0, newWidth - 14);
53 document.getElementById('status').style.height = h + 'px';
54 document.getElementById('status').style.width = w + 'px';
55 }
56
57 }
58
59 function ToggleMiddlePanel() {
60 var panel = ZCWS.GetPanel('<%= PanelMiddle.ClientID %>');
61 var state = panel.GetState();
62 state = (state == 0) ? 1 : 0;
63 panel.SetState(state);
64 }
65
66 </script>
67
68 <cc1:WebLayout ID="WebLayout1" runat="server" Height="660px" Width="870px" OnClientPanelResized="PanelResizedHandler"
69 OnClientPanelStateChanged="PanelStateChangedHandler" OnClientPanelStateChanging="PanelStateChangingHandler"
70 OnClientResized="ResizedHandler" FitParent="FitWindow" OnPanelStateChanged="WebLayout1_PanelStateChanged"
71 Orientation="Horizontal">
72 <Panels>
73 <cc1:WebLayoutPanel runat="server" ID="PanelTop">
74 <Content>
75 <strong>Client And Server-Side Events</strong> <span style="font-size: 8pt">(Not available
76 in WebLayoutLite)<br />
77 </span>
78 <br />
79 Resize browser window to generate events.
80 <br />
81 On this page, the OnClientPanelResized event handler will resize the image and the
82 text area below whenever the size of the containing panels changes.
83 </Content>
84 </cc1:WebLayoutPanel>
85 <cc1:WebLayoutPanel runat="server" Filled="True" ID="PanelMiddle" PreferredSize="50" Overflow="hidden">
86 <Content>
87 <img id="image1" src="../../images/sunrise.jpg" />
88 </Content>
89 </cc1:WebLayoutPanel>
90 <cc1:WebLayoutPanel runat="server" Filled="True" ID="PanelBottom" PreferredSize="100">
91 <Content>
92 Events handled on client-side:<br />
93 <textarea id="status" style="width: 600px; height: 300px"></textarea><br />
94 <br />
95 <a href="#" onclick="ToggleMiddlePanel();return false;">Collapse/expand middle panel</a>
96 and click
97 <asp:Button ID="Button1" runat="server" Text="Postback" />
98 to generate server events.<br />
99 Events handled on server:<br />
100 <asp:Label ID="Label1" runat="server" EnableViewState="False"></asp:Label>
101 </Content>
102 </cc1:WebLayoutPanel>
103 </Panels>
104 </cc1:WebLayout>
105 </div>
106 </form>
107 </body>
108 </html>
109