default.aspx 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <%@ Page Language="C#" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <script runat="server">
  4. </script>
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head id="Head1" runat="server">
  7. <title>Example</title>
  8. <style type="text/css">
  9. .redBackgroundColor {
  10. background-color:Red;
  11. }
  12. .blueBackgroundColor {
  13. background-color:Green;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <form id="form1" runat="server">
  19. <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true" />
  20. <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional">
  21. <ContentTemplate>
  22. <asp:Panel ID="Panel1" runat="server" GroupingText="Update Panel">
  23. <b>DomElement Methods</b>
  24. <br />
  25. <asp:Button ID="Button1" runat="server" Text="Toggle CssClass" />
  26. <asp:Button ID="Button2" runat="server" Text="Remove CssClass" />
  27. <p></p>
  28. <b>DomElement Properties</b>
  29. <br />
  30. <asp:Label ID="Label1" runat="server" BackColor="Black" ForeColor="White" Text="Label1" Width="102px"></asp:Label>
  31. <br />
  32. <asp:Label ID="Label2" runat="server"></asp:Label>
  33. </asp:Panel>
  34. </ContentTemplate>
  35. </asp:UpdatePanel>
  36. </form>
  37. </body>
  38. </html>
  39. <script type="text/javascript">
  40. // Add handler using the getElementById method
  41. $addHandler(Sys.UI.DomElement.getElementById("Button1"), "click", toggleCssClassMethod);
  42. // Add handler using the shortcut to the getElementById method
  43. $addHandler($get("Button2"), "click", removeCssClassMethod);
  44. // Add CSS class
  45. Sys.UI.DomElement.addCssClass($get("Button1"), "redBackgroundColor");
  46. Sys.UI.DomElement.addCssClass($get("Button2"), "blueBackgroundColor");
  47. // Method called when Button1 is clicked
  48. function toggleCssClassMethod(eventElement) {
  49. // Toggle CSS class
  50. Sys.UI.DomElement.toggleCssClass(eventElement.target, "redBackgroundColor");
  51. }
  52. // Method called when Button2 is clicked
  53. function removeCssClassMethod(eventElement) {
  54. // Remove CSS class
  55. Sys.UI.DomElement.removeCssClass(eventElement.target, "blueBackgroundColor");
  56. }
  57. // Get the bounds of the element
  58. var elementRef = $get("Label1");
  59. var elementBounds = Sys.UI.DomElement.getBounds(elementRef);
  60. var result = '';
  61. result += "Label1 bounds x = " + elementBounds.x + "<br/>";
  62. result += "Label1 bounds y = " + elementBounds.y + "<br/>";
  63. result += "Label1 bounds width = " + elementBounds.width + "<br/>";
  64. result += "Label1 bounds height = " + elementBounds.height + "<p/>";
  65. // Get the location of the element
  66. var elementLoc = Sys.UI.DomElement.getLocation(elementRef);
  67. result += "Before move - Label1 location (x,y) = (" +
  68. elementLoc.x + "," + elementLoc.y + ")<br/>";
  69. // Move the element
  70. Sys.UI.DomElement.setLocation(elementRef, 100, elementLoc.y);
  71. elementLoc = Sys.UI.DomElement.getLocation(elementRef);
  72. result += "After move - Label1 location (x,y) = (" +
  73. elementLoc.x + "," + elementLoc.y + ")<br/>";
  74. // Prepare the results
  75. $get('Label2').innerHTML = result;
  76. </script>