1 <%@ Page Language="C#" AutoEventWireup="true" Codebehind="Popup.aspx.cs" Inherits="ZeeControls2Demo.WebSplitter.Basic.Popup"
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 runat="server">
8 <title>Popup Menu</title>
9
10 <script src="../../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
11
12 <script src="../../SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
13
14 <link href="../../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
15 <link href="../../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
16 <link href="../../SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
17 <style type="text/css">
18 .IE8Fix {
19 z-index: 10000;
20 }
21
22 .AspMenuItem {
23 background-color: #ece9d8;
24 padding: 0.3em 0.5em;
25 width: 8.2em;
26 color: #333;
27 }
28
29 .AspMenu {
30 border: 1px #ccc solid;
31 }
32
33 .AspMenuHover {
34 background-color: #33c;
35 color: #fff;
36 }
37
38 </style>
39 </head>
40 <body>
41 <form id="form1" runat="server">
42 <div>
43 <cc1:WebLayout ID="WebLayout1" runat="server" Height="682px" Orientation="Horizontal"
44 Width="893px" FitParent="FitWindow">
45 <Panels>
46 <cc1:WebLayoutPanel runat="server" PreferredSize="130">
47 <Content>
48 <strong>Popup Menu<br />
49 <br />
50 </strong>By default, a panel with overflowed content will either display scroll
51 bars, or clip the content. So popup menu within a panel must be treated specially.<br />
52 <br />
53 The followings demonstrate how ZeeControls can handle popup menus properly.
54 </Content>
55 </cc1:WebLayoutPanel>
56 <cc1:WebLayoutPanel runat="server" AllowPopup="True" Overflow="Hidden" PreferredSize="80">
57 <Content>
58 <div style="width: 1000px">
59 Panel 1: ASP Menu popup will be displayed properly.
60 <div style="position: relative; z-index: 1000; float: left;">
61 <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
62 <DynamicMenuStyle CssClass="IE8Fix AspMenu" />
63 <DynamicMenuItemStyle CssClass="AspMenuItem" />
64 <DynamicHoverStyle CssClass="AspMenuHover" />
65 <StaticMenuItemStyle CssClass="AspMenuItem" />
66 <StaticHoverStyle CssClass="AspMenuHover" />
67 <Items>
68 <asp:MenuItem Text="Item 1" Value="Item1">
69 <asp:MenuItem Text="Item 1.1" Value="Item1_1"></asp:MenuItem>
70 </asp:MenuItem>
71 <asp:MenuItem Text="Item 2" Value="Item2">
72 <asp:MenuItem Text="Item 2.1" Value="Item2_1"></asp:MenuItem>
73 </asp:MenuItem>
74 <asp:MenuItem Text="Item 3" Value="Item3">
75 <asp:MenuItem Text="Item 3.1" Value="Item3_1"></asp:MenuItem>
76 <asp:MenuItem Text="Item 3.2" Value="Item3_2"></asp:MenuItem>
77 <asp:MenuItem Text="Item 3.3" Value="Item3_3"></asp:MenuItem>
78 <asp:MenuItem Text="Item 3.4" Value="Item3_4"></asp:MenuItem>
79 <asp:MenuItem Text="Item 3.5" Value="Item3_5"></asp:MenuItem>
80 <asp:MenuItem Text="Item 3.6" Value="Item3_6"></asp:MenuItem>
81 <asp:MenuItem Text="Item 3.7" Value="Item3_7"></asp:MenuItem>
82 <asp:MenuItem Text="Item 3.8" Value="Item3_8"></asp:MenuItem>
83 <asp:MenuItem Text="Item 3.9" Value="Item3_9"></asp:MenuItem>
84 <asp:MenuItem Text="Item 3.10" Value="Item3_10"></asp:MenuItem>
85 <asp:MenuItem Text="Item 3.11" Value="Item3_11"></asp:MenuItem>
86 <asp:MenuItem Text="Item 3.12" Value="Item3_12"></asp:MenuItem>
87 <asp:MenuItem Text="Item 3.13" Value="Item3_13"></asp:MenuItem>
88 <asp:MenuItem Text="Item 3.14" Value="Item3_14"></asp:MenuItem>
89 </asp:MenuItem>
90 <asp:MenuItem Text="Item 4" Value="Item4">
91 <asp:MenuItem Text="Item 4.1" Value="Item4_1"></asp:MenuItem>
92 <asp:MenuItem Text="Item 4.2" Value="Item4_2"></asp:MenuItem>
93 <asp:MenuItem Text="Item 4.3" Value="Item4_3"></asp:MenuItem>
94 <asp:MenuItem Text="Item 4.4" Value="Item4_4"></asp:MenuItem>
95 <asp:MenuItem Text="Item 4.5" Value="Item4_5"></asp:MenuItem>
96 <asp:MenuItem Text="Item 4.6" Value="Item4_6"></asp:MenuItem>
97 <asp:MenuItem Text="Item 4.7" Value="Item4_7"></asp:MenuItem>
98 <asp:MenuItem Text="Item 4.8" Value="Item4_8"></asp:MenuItem>
99 <asp:MenuItem Text="Item 4.9" Value="Item4_9"></asp:MenuItem>
100 <asp:MenuItem Text="Item 4.10" Value="Item4_10"></asp:MenuItem>
101 <asp:MenuItem Text="Item 4.11" Value="Item4_11"></asp:MenuItem>
102 <asp:MenuItem Text="Item 4.12" Value="Item4_12"></asp:MenuItem>
103 <asp:MenuItem Text="Item 4.13" Value="Item4_13"></asp:MenuItem>
104 <asp:MenuItem Text="Item 4.14" Value="Item4_14"></asp:MenuItem>
105 </asp:MenuItem>
106 </Items>
107 </asp:Menu>
108 </div>
109 </div>
110 </Content>
111 </cc1:WebLayoutPanel>
112 <cc1:WebLayoutPanel runat="server" BackColor="White" PreferredSize="80">
113 <Content>
114 <div style="width: 1000px">
115 Panel 2: ASP Menu popup will be clipped in default setting.
116 <div style="position: relative; z-index: 900; float: left;">
117 <asp:Menu ID="Menu2" runat="server" Orientation="Horizontal">
118 <DynamicMenuStyle CssClass="IE8Fix AspMenu" />
119 <DynamicMenuItemStyle CssClass="AspMenuItem" />
120 <DynamicHoverStyle CssClass="AspMenuHover" />
121 <StaticMenuItemStyle CssClass="AspMenuItem" />
122 <StaticHoverStyle CssClass="AspMenuHover" />
123 <Items>
124 <asp:MenuItem Text="Item 1" Value="Item1">
125 <asp:MenuItem Text="Item 1.1" Value="Item1_1"></asp:MenuItem>
126 </asp:MenuItem>
127 <asp:MenuItem Text="Item 2" Value="Item2">
128 <asp:MenuItem Text="Item 2.1" Value="Item2_1"></asp:MenuItem>
129 </asp:MenuItem>
130 <asp:MenuItem Text="Item 3" Value="Item3">
131 <asp:MenuItem Text="Item 3.1" Value="Item3_1"></asp:MenuItem>
132 <asp:MenuItem Text="Item 3.2" Value="Item3_2"></asp:MenuItem>
133 <asp:MenuItem Text="Item 3.3" Value="Item3_3"></asp:MenuItem>
134 <asp:MenuItem Text="Item 3.4" Value="Item3_4"></asp:MenuItem>
135 <asp:MenuItem Text="Item 3.5" Value="Item3_5"></asp:MenuItem>
136 <asp:MenuItem Text="Item 3.6" Value="Item3_6"></asp:MenuItem>
137 <asp:MenuItem Text="Item 3.7" Value="Item3_7"></asp:MenuItem>
138 <asp:MenuItem Text="Item 3.8" Value="Item3_8"></asp:MenuItem>
139 <asp:MenuItem Text="Item 3.9" Value="Item3_9"></asp:MenuItem>
140 <asp:MenuItem Text="Item 3.10" Value="Item3_10"></asp:MenuItem>
141 <asp:MenuItem Text="Item 3.11" Value="Item3_11"></asp:MenuItem>
142 <asp:MenuItem Text="Item 3.12" Value="Item3_12"></asp:MenuItem>
143 <asp:MenuItem Text="Item 3.13" Value="Item3_13"></asp:MenuItem>
144 <asp:MenuItem Text="Item 3.14" Value="Item3_14"></asp:MenuItem>
145 </asp:MenuItem>
146 <asp:MenuItem Text="Item 4" Value="Item4">
147 <asp:MenuItem Text="Item 4.1" Value="Item4_1"></asp:MenuItem>
148 <asp:MenuItem Text="Item 4.2" Value="Item4_2"></asp:MenuItem>
149 <asp:MenuItem Text="Item 4.3" Value="Item4_3"></asp:MenuItem>
150 <asp:MenuItem Text="Item 4.4" Value="Item4_4"></asp:MenuItem>
151 <asp:MenuItem Text="Item 4.5" Value="Item4_5"></asp:MenuItem>
152 <asp:MenuItem Text="Item 4.6" Value="Item4_6"></asp:MenuItem>
153 <asp:MenuItem Text="Item 4.7" Value="Item4_7"></asp:MenuItem>
154 <asp:MenuItem Text="Item 4.8" Value="Item4_8"></asp:MenuItem>
155 <asp:MenuItem Text="Item 4.9" Value="Item4_9"></asp:MenuItem>
156 <asp:MenuItem Text="Item 4.10" Value="Item4_10"></asp:MenuItem>
157 <asp:MenuItem Text="Item 4.11" Value="Item4_11"></asp:MenuItem>
158 <asp:MenuItem Text="Item 4.12" Value="Item4_12"></asp:MenuItem>
159 <asp:MenuItem Text="Item 4.13" Value="Item4_13"></asp:MenuItem>
160 <asp:MenuItem Text="Item 4.14" Value="Item4_14"></asp:MenuItem>
161 </asp:MenuItem>
162 </Items>
163 </asp:Menu>
164 </div>
165 </div>
166 </Content>
167 </cc1:WebLayoutPanel>
168 <cc1:WebLayoutPanel runat="server" AllowPopup="True" Overflow="Hidden" PreferredSize="80">
169 <Content>
170 <div style="width: 1000px">
171 Panel 3: SpryMenu popup will be displayed properly.
172 <ul id="SpryMenu1" class="MenuBarHorizontal">
173 <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
174 <ul>
175 <li><a href="#">Item 1.1</a></li>
176 <li><a href="#">Item 1.2</a></li>
177 <li><a href="#">Item 1.3</a></li>
178 <li><a href="#">Item 1.4</a></li>
179 <li><a href="#">Item 1.5</a></li>
180 <li><a href="#">Item 1.6</a></li>
181 <li><a href="#">Item 1.7</a></li>
182 <li><a href="#">Item 1.8</a></li>
183 <li><a href="#">Item 1.9</a></li>
184 <li><a href="#">Item 1.10</a></li>
185 <li><a href="#">Item 1.11</a></li>
186 <li><a href="#">Item 1.12</a></li>
187 <li><a href="#">Item 1.13</a></li>
188 <li><a href="#">Item 1.14</a></li>
189 <li><a href="#">Item 1.15</a></li>
190 <li><a href="#">Item 1.16</a></li>
191 <li><a href="#">Item 1.17</a></li>
192 </ul>
193 </li>
194 <li><a href="#">Item 2</a></li>
195 <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
196 <ul>
197 <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
198 <ul>
199 <li><a href="#">Item 3.1.1</a></li>
200 <li><a href="#">Item 3.1.2</a></li>
201 </ul>
202 </li>
203 <li><a href="#">Item 3.2</a></li>
204 <li><a href="#">Item 3.3</a></li>
205 </ul>
206 </li>
207 <li><a href="#">Item 4</a></li>
208 </ul>
209 </div>
210 </Content>
211 </cc1:WebLayoutPanel>
212 <cc1:WebLayoutPanel runat="server" BackColor="White" PreferredSize="80">
213 <Content>
214 Panel 4: SpryMenu popup will be clipped in default setting.
215 <ul id="SpryMenu2" class="MenuBarHorizontal">
216 <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
217 <ul>
218 <li><a href="#">Item 1.1</a></li>
219 <li><a href="#">Item 1.2</a></li>
220 <li><a href="#">Item 1.3</a></li>
221 <li><a href="#">Item 1.4</a></li>
222 <li><a href="#">Item 1.5</a></li>
223 <li><a href="#">Item 1.6</a></li>
224 <li><a href="#">Item 1.7</a></li>
225 <li><a href="#">Item 1.8</a></li>
226 <li><a href="#">Item 1.9</a></li>
227 <li><a href="#">Item 1.10</a></li>
228 <li><a href="#">Item 1.11</a></li>
229 <li><a href="#">Item 1.12</a></li>
230 <li><a href="#">Item 1.13</a></li>
231 <li><a href="#">Item 1.14</a></li>
232 <li><a href="#">Item 1.15</a></li>
233 <li><a href="#">Item 1.16</a></li>
234 <li><a href="#">Item 1.17</a></li>
235 </ul>
236 </li>
237 <li><a href="#">Item 2</a></li>
238 <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
239 <ul>
240 <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
241 <ul>
242 <li><a href="#">Item 3.1.1</a></li>
243 <li><a href="#">Item 3.1.2</a></li>
244 </ul>
245 </li>
246 <li><a href="#">Item 3.2</a></li>
247 <li><a href="#">Item 3.3</a></li>
248 </ul>
249 </li>
250 <li><a href="#">Item 4</a></li>
251 </ul>
252 </Content>
253 </cc1:WebLayoutPanel>
254 <cc1:WebLayoutPanel runat="server" Filled="True">
255 </cc1:WebLayoutPanel>
256 </Panels>
257 </cc1:WebLayout>
258 </div>
259
260 <script type="text/javascript">
261 <!--
262 var SpryMenu1 = new Spry.Widget.MenuBar("SpryMenu1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
263 var SpryMenu2 = new Spry.Widget.MenuBar("SpryMenu2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
264 //-->
265 </script>
266
267 </form>
268 </body>
269 </html>
270
1 using System;
2 using System.Data;
3 using System.Configuration;
4 using System.Collections;
5 using System.Web;
6 using System.Web.Security;
7 using System.Web.UI;
8 using System.Web.UI.WebControls;
9 using System.Web.UI.WebControls.WebParts;
10 using System.Web.UI.HtmlControls;
11
12 namespace ZeeControls2Demo.WebSplitter.Basic
13 {
14 public partial class Popup : System.Web.UI.Page
15 {
16 protected void Page_PreInit(object sender, EventArgs e)
17 {
18 // For ASP.NET Menu to work in Chrome
19 if (Page.Request.ServerVariables["http_user_agent"].ToLower().Contains("safari"))
20 {
21 Page.ClientTarget = "uplevel";
22 }
23 }
24
25 protected void Page_Load(object sender, EventArgs e)
26 {
27
28 }
29 }
30 }
31
1 body
2 {
3 font-family: Tahoma, Geneva;
4 font-size: 10pt;
5 }
6
7 .ZCWDMainContent, .ZCWDPanelContent
8 {
9 padding: 3px;
10 }
11
12 .ZCWDPanelTitleBar
13 {
14 padding-left: 3px;
15 }
16
17 .ZCWSPanel
18 {
19 padding: 3px;
20 }
21
22 .title
23 {
24 display: block;
25 font-weight:bold;
26 line-height: 24px;
27 }
28
29 .indent
30 {
31 padding: 10px;
32 padding-left: 30px;
33 }
34
35 .blah
36 {
37 color: Gray;
38 }
39
40 .tableRowHeader
41 {
42 color: #666666;
43 }
44
45 .tableColumnHeader
46 {
47 color: #666666;
48 }
49
1 <%--
2 Default skin template. The following skins are provided as examples only.
3
4 1. Named control skin. The SkinId should be uniquely defined because
5 duplicate SkinId's per control type are not allowed in the same theme.
6
7 <asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >
8 <AlternatingRowStyle BackColor="Blue" />
9 </asp:GridView>
10
11 2. Default skin. The SkinId is not defined. Only one default
12 control skin per control type is allowed in the same theme.
13
14 <asp:Image runat="server" ImageUrl="~/images/image1.jpg" />
15 --%>