Action


Customize the header icons with the icons property, which accepts classes for the header's default and active (open) state. 
Use any class from the UI CSS framework, or create custom classes with background images.
   1:  <%@ Page Language="C#" AutoEventWireup="true" Title="AtomicAccordion -- Icons By Url" CodeBehind="IconsByUrl.aspx.cs" Inherits="Atom.Website.Samples.AtomicAccordion.IconsByUrl"
   2:      EnableEventValidation="true" %>
   3:   
   4:  <%@ Register Assembly="Atom.Web" Namespace="Atom.Web.UI.WebControls" TagPrefix="atom" %>
   5:  <%@ Register Src="../Source.ascx" TagName="Source" TagPrefix="sample" %>
   6:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   7:  <html xmlns="http://www.w3.org/1999/xhtml">
   8:  <head id="Header1" runat="server">
   9:      <link rel="Shortcut Icon" type="image/ico" href="../images/icon.png" /> 
  10:      <!-- The jQuery UI theme that will be used by the components. -->
  11:      <link href="../themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
  12:      <!-- jQuery runtime minified -->
  13:      <script src="../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
  14:      <!-- jQuery UI runtime minified, client-side javascript of the components.-->
  15:      <script src="../Scripts/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
  16:      <!-- This style reference is needed only for the current example. -->
  17:      <link href="../css/example.css" rel="stylesheet" type="text/css" />
  18:  </head>
  19:  <body>
  20:      <form id="form1" runat="server">
  21:          <fieldset>
  22:              <legend>Action</legend>
  23:              <div>
  24:                  <asp:Button Text="text" ID="ChangeIcon" runat="server" />
  25:              </div>
  26:          </fieldset>
  27:          <div>
  28:              <atom:AtomicAccordion ID="AtomicAccordion1" runat="server" IconUrl="/images/icons/alert/alert_9.png"
  29:                  IconSelectedUrl="/images/icons/alert/alert_1.gif">
  30:                  <Items>
  31:                      <atom:AccordionItem Header="Alert icons">
  32:                          <Template>
  33:                              <asp:ImageButton ImageUrl='/images/icons/alert/alert_1.gif' alt='icon' runat="server"
  34:                                  OnClick="Icon_Click" />
  35:                              <asp:ImageButton ImageUrl='/images/icons/alert/alert_9.png' alt='icon' runat="server"
  36:                                  OnClick="Icon_Click" />
  37:                              <asp:ImageButton ImageUrl="/images/icons/alert/alert_1.jpg" alt='icon' OnClick="Icon_Click"
  38:                                  runat="server" />
  39:                              <asp:ImageButton ImageUrl="/images/icons/alert/alert_1.png" alt='icon' OnClick="Icon_Click"
  40:                                  runat="server" />
  41:                              <asp:ImageButton ImageUrl="/images/icons/alert/alert_10.gif" alt='icon' OnClick="Icon_Click"
  42:                                  runat="server" />
  43:                              <asp:ImageButton ImageUrl="/images/icons/alert/alert_2.gif" alt='icon' OnClick="Icon_Click"
  44:                                  runat="server" />
  45:                              <asp:ImageButton ImageUrl="/images/icons/alert/alert_2.png" alt='icon' OnClick="Icon_Click"
  46:                                  runat="server" />
  47:                              <asp:ImageButton ImageUrl="/images/icons/alert/alert_3.gif" alt='icon' OnClick="Icon_Click"
  48:                                  runat="server" />
  49:                              <asp:ImageButton ImageUrl="/images/icons/alert/alert_3.png" alt='icon' OnClick="Icon_Click"
  50:                                  runat="server" />
  51:                              <asp:ImageButton ImageUrl="/images/icons/alert/alert_4.gif" alt='icon' OnClick="Icon_Click"
  52:                                  runat="server" />
  53:                              <asp:ImageButton ImageUrl="/images/icons/alert/alert_4.png" alt='icon' OnClick="Icon_Click"
  54:                                  runat="server" />
  55:                              <asp:ImageButton ImageUrl="/images/icons/alert/alert_5.gif" alt='icon' OnClick="Icon_Click"
  56:                                  runat="server" />
  57:                              <asp:ImageButton ImageUrl="/images/icons/alert/alert_5.png" alt='icon' OnClick="Icon_Click"
  58:                                  runat="server" />
  59:                              <asp:ImageButton ImageUrl="/images/icons/alert/alert_6.gif" alt='icon' OnClick="Icon_Click"
  60:                                  runat="server" />
  61:                              <asp:ImageButton ImageUrl="/images/icons/alert/alert_6.png" alt='icon' OnClick="Icon_Click"
  62:                                  runat="server" />
  63:                              <asp:ImageButton ImageUrl="/images/icons/alert/alert_7.gif" alt='icon' OnClick="Icon_Click"
  64:                                  runat="server" />
  65:                              <asp:ImageButton ImageUrl="/images/icons/alert/alert_7.png" alt='icon' OnClick="Icon_Click"
  66:                                  runat="server" />
  67:                              <asp:ImageButton ImageUrl="/images/icons/alert/alert_8.gif" alt='icon' runat="server" />
  68:                              <asp:ImageButton ImageUrl="/images/icons/alert/alert_8.png" alt='icon' OnClick="Icon_Click"
  69:                                  runat="server" />
  70:                              <asp:ImageButton ImageUrl="/images/icons/alert/alert_9.gif" alt='icon' OnClick="Icon_Click"
  71:                                  runat="server" />
  72:                          </Template>
  73:                      </atom:AccordionItem>
  74:                      <atom:AccordionItem Header="Emoticons">
  75:                          <Template>
  76:                              <asp:ImageButton ImageUrl="/images/icons/emoticons/emoticon_1.gif" alt='icon' runat="server"
  77:                                  OnClick="Icon_Click" />
  78:                              <asp:ImageButton ImageUrl="/images/icons/emoticons/emoticon_8.png" alt='icon' runat="server"
  79:                                  OnClick="Icon_Click" />
  80:                              <asp:ImageButton ImageUrl="/images/icons/emoticons/emoticon_1.jpg" alt='icon' runat="server"
  81:                                  OnClick="Icon_Click" />
  82:                              <asp:ImageButton ImageUrl="/images/icons/emoticons/emoticon_1.png" alt='icon' runat="server"
  83:                                  OnClick="Icon_Click" />
  84:                              <asp:ImageButton ImageUrl="/images/icons/emoticons/emoticon_2.gif" alt='icon' runat="server"
  85:                                  OnClick="Icon_Click" />
  86:                              <asp:ImageButton ImageUrl="/images/icons/emoticons/emoticon_2.png" alt='icon' runat="server"
  87:                                  OnClick="Icon_Click" />
  88:                              <asp:ImageButton ImageUrl="/images/icons/emoticons/emoticon_3.gif" alt='icon' runat="server"
  89:                                  OnClick="Icon_Click" />
  90:                              <asp:ImageButton ImageUrl="/images/icons/emoticons/emoticon_3.png" alt='icon' runat="server"
  91:                                  OnClick="Icon_Click" />
  92:                              <asp:ImageButton ImageUrl="/images/icons/emoticons/emoticon_4.gif" alt='icon' runat="server"
  93:                                  OnClick="Icon_Click" />
  94:                              <asp:ImageButton ImageUrl="/images/icons/emoticons/emoticon_4.png" alt='icon' runat="server"
  95:                                  OnClick="Icon_Click" />
  96:                              <asp:ImageButton ImageUrl="/images/icons/emoticons/emoticon_5.gif" alt='icon' runat="server"
  97:                                  OnClick="Icon_Click" />
  98:                              <asp:ImageButton ImageUrl="/images/icons/emoticons/emoticon_5.png" alt='icon' runat="server"
  99:                                  OnClick="Icon_Click" />
 100:                              <asp:ImageButton ImageUrl="/images/icons/emoticons/emoticon_6.gif" alt='icon' runat="server"
 101:                                  OnClick="Icon_Click" />
 102:                              <asp:ImageButton ImageUrl="/images/icons/emoticons/emoticon_6.png" alt='icon' runat="server"
 103:                                  OnClick="Icon_Click" />
 104:                              <asp:ImageButton ImageUrl="/images/icons/emoticons/emoticon_7.gif" alt='icon' runat="server"
 105:                                  OnClick="Icon_Click" />
 106:                              <asp:ImageButton ImageUrl="/images/icons/emoticons/emoticon_7.png" alt='icon' runat="server"
 107:                                  OnClick="Icon_Click" />
 108:                              <asp:ImageButton ImageUrl="/images/icons/emoticons/emoticon_8.gif" alt='icon' runat="server"
 109:                                  OnClick="Icon_Click" />
 110:                          </Template>
 111:                      </atom:AccordionItem>
 112:                      <atom:AccordionItem Header="Flags">
 113:                          <Template>
 114:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag%20_1.png" alt='icon' runat="server"
 115:                                  OnClick="Icon_Click" />
 116:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_9.png" alt='icon' runat="server"
 117:                                  OnClick="Icon_Click" />
 118:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_1.gif" alt='icon' runat="server"
 119:                                  OnClick="Icon_Click" />
 120:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_10.png" alt='icon' runat="server"
 121:                                  OnClick="Icon_Click" />
 122:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_11.png" alt='icon' runat="server"
 123:                                  OnClick="Icon_Click" />
 124:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_12.png" alt='icon' runat="server"
 125:                                  OnClick="Icon_Click" />
 126:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_13.png" alt='icon' runat="server"
 127:                                  OnClick="Icon_Click" />
 128:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_14.png" alt='icon' runat="server"
 129:                                  OnClick="Icon_Click" />
 130:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_15.png" alt='icon' runat="server"
 131:                                  OnClick="Icon_Click" />
 132:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_16.png" alt='icon' runat="server"
 133:                                  OnClick="Icon_Click" />
 134:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_17.png" alt='icon' runat="server"
 135:                                  OnClick="Icon_Click" />
 136:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_18.png" alt='icon' runat="server"
 137:                                  OnClick="Icon_Click" />
 138:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_19.png" alt='icon' runat="server"
 139:                                  OnClick="Icon_Click" />
 140:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_2.gif" alt='icon' runat="server"
 141:                                  OnClick="Icon_Click" />
 142:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_2.png" alt='icon' runat="server"
 143:                                  OnClick="Icon_Click" />
 144:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_20.png" alt='icon' runat="server"
 145:                                  OnClick="Icon_Click" />
 146:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_21.png" alt='icon' runat="server"
 147:                                  OnClick="Icon_Click" />
 148:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_22.png" alt='icon' runat="server"
 149:                                  OnClick="Icon_Click" />
 150:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_23.png" alt='icon' runat="server"
 151:                                  OnClick="Icon_Click" />
 152:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_24.png" alt='icon' runat="server"
 153:                                  OnClick="Icon_Click" />
 154:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_25.png" alt='icon' runat="server"
 155:                                  OnClick="Icon_Click" />
 156:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_26.png" alt='icon' runat="server"
 157:                                  OnClick="Icon_Click" />
 158:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_27.png" alt='icon' runat="server"
 159:                                  OnClick="Icon_Click" />
 160:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_28.png" alt='icon' runat="server"
 161:                                  OnClick="Icon_Click" />
 162:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_29.png" alt='icon' runat="server"
 163:                                  OnClick="Icon_Click" />
 164:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_3.png" alt='icon' runat="server"
 165:                                  OnClick="Icon_Click" />
 166:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_30.png" alt='icon' runat="server"
 167:                                  OnClick="Icon_Click" />
 168:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_31.png" alt='icon' runat="server"
 169:                                  OnClick="Icon_Click" />
 170:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_4.png" alt='icon' runat="server"
 171:                                  OnClick="Icon_Click" />
 172:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_5.png" alt='icon' runat="server"
 173:                                  OnClick="Icon_Click" />
 174:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_6.png" alt='icon' runat="server"
 175:                                  OnClick="Icon_Click" />
 176:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_7.png" alt='icon' runat="server"
 177:                                  OnClick="Icon_Click" />
 178:                              <asp:ImageButton ImageUrl="/images/icons/flags/flag_8.png" alt='icon' runat="server"
 179:                                  OnClick="Icon_Click" />
 180:                          </Template>
 181:                      </atom:AccordionItem>
 182:                      <atom:AccordionItem Header="Other">
 183:                          <Template>
 184:                              <asp:ImageButton ImageUrl="/images/icons/other/other_1.gif" alt='icon' runat="server"
 185:                                  OnClick="Icon_Click" />
 186:                              <asp:ImageButton ImageUrl="/images/icons/other/other_9.gif" alt='icon' runat="server"
 187:                                  OnClick="Icon_Click" />
 188:                              <asp:ImageButton ImageUrl="/images/icons/other/other_1.jpg" alt='icon' runat="server"
 189:                                  OnClick="Icon_Click" />
 190:                              <asp:ImageButton ImageUrl="/images/icons/other/other_1.png" alt='icon' runat="server"
 191:                                  OnClick="Icon_Click" />
 192:                              <asp:ImageButton ImageUrl="/images/icons/other/other_2.gif" alt='icon' runat="server"
 193:                                  OnClick="Icon_Click" />
 194:                              <asp:ImageButton ImageUrl="/images/icons/other/other_2.jpg" alt='icon' runat="server"
 195:                                  OnClick="Icon_Click" />
 196:                              <asp:ImageButton ImageUrl="/images/icons/other/other_2.png" alt='icon' runat="server"
 197:                                  OnClick="Icon_Click" />
 198:                              <asp:ImageButton ImageUrl="/images/icons/other/other_3.gif" alt='icon' runat="server"
 199:                                  OnClick="Icon_Click" />
 200:                              <asp:ImageButton ImageUrl="/images/icons/other/other_3.png" alt='icon' runat="server"
 201:                                  OnClick="Icon_Click" />
 202:                              <asp:ImageButton ImageUrl="/images/icons/other/other_4.gif" alt='icon' runat="server"
 203:                                  OnClick="Icon_Click" />
 204:                              <asp:ImageButton ImageUrl="/images/icons/other/other_4.png" alt='icon' runat="server"
 205:                                  OnClick="Icon_Click" />
 206:                              <asp:ImageButton ImageUrl="/images/icons/other/other_5.gif" alt='icon' runat="server"
 207:                                  OnClick="Icon_Click" />
 208:                              <asp:ImageButton ImageUrl="/images/icons/other/other_5.png" alt='icon' runat="server"
 209:                                  OnClick="Icon_Click" />
 210:                              <asp:ImageButton ImageUrl="/images/icons/other/other_6.gif" alt='icon' runat="server"
 211:                                  OnClick="Icon_Click" />
 212:                              <asp:ImageButton ImageUrl="/images/icons/other/other_7.gif" alt='icon' runat="server"
 213:                                  OnClick="Icon_Click" />
 214:                              <asp:ImageButton ImageUrl="/images/icons/other/other_8.gif" alt='icon' runat="server"
 215:                                  OnClick="Icon_Click" />
 216:                          </Template>
 217:                      </atom:AccordionItem>
 218:                  </Items>
 219:              </atom:AtomicAccordion>
 220:          </div>
 221:          <br />
 222:          <sample:Source ID="Code" runat="server" />
 223:      </form>
 224:  </body>
 225:  </html>
   1:  using System;
   2:  using System.Collections.Generic;
   3:  using System.Linq;
   4:  using System.Web;
   5:  using System.Web.UI;
   6:  using System.Web.UI.WebControls;
   7:   
   8:  namespace Atom.Website.Samples.AtomicAccordion
   9:  {
  10:      public partial class IconsByUrl : System.Web.UI.Page
  11:      {
  12:          protected void Page_Load(object sender, EventArgs e)
  13:          {
  14:              DataBind();
  15:          }
  16:   
  17:          protected void Icon_Click(object sender, ImageClickEventArgs e)
  18:          {
  19:              AtomicAccordion1.IconSelectedUrl = ((ImageButton)sender).ImageUrl;
  20:          }
  21:   
  22:        
  23:   
  24:          protected void Icon1_Click(object sender, ImageClickEventArgs e)
  25:          {
  26:              AtomicAccordion1.IconSelectedUrl = ((ImageButton)sender).ImageUrl;
  27:   
  28:          }
  29:   
  30:          protected void edno_SelectedIndexChanged(object sender, EventArgs e)
  31:          {
  32:   
  33:          }
  34:   
  35:          
  36:   
  37:   
  38:   
  39:   
  40:   
  41:   
  42:      }
  43:  }
   1:  Imports System
   2:  Imports System.Collections.Generic
   3:  Imports System.Linq
   4:  Imports System.Web
   5:  Imports System.Web.UI
   6:  Imports System.Web.UI.WebControls
   7:  Namespace Atom.Website.Samples.AtomicAccordion
   8:      Public Partial Class IconsByUrl
   9:          Inherits System.Web.UI.Page
  10:          Protected Sub Page_Load(sender As Object, e As EventArgs)
  11:              DataBind()
  12:          End Sub
  13:          Protected Sub Icon_Click(sender As Object, e As ImageClickEventArgs)
  14:              AtomicAccordion1.IconSelectedUrl = (DirectCast(sender, ImageButton)).ImageUrl
  15:          End Sub
  16:          Protected Sub Icon1_Click(sender As Object, e As ImageClickEventArgs)
  17:              AtomicAccordion1.IconSelectedUrl = (DirectCast(sender, ImageButton)).ImageUrl
  18:          End Sub
  19:          Protected Sub edno_SelectedIndexChanged(sender As Object, e As EventArgs)
  20:          End Sub
  21:      End Class
  22:  End Namespace