Action


Info
   1:  <%@ Page Language="C#" AutoEventWireup="true" Title="AtomicAccordion -- Framework Icons" CodeBehind="FrameworkIcons.aspx.cs"
   2:      Inherits="Atom.Website.Samples.AtomicAccordion.FrameworkIcons" %>
   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:       
  19:      <script type="text/javascript">
  20:          var flag = false;
  21:          
  22:          $(document).ready(function () {
  23:              $('#IconSelector').buttonset();
  24:   
  25:              $('li.ui-state-default').click(function(){
  26:                  var newIcon = $(this).attr('title').replace('.','');
  27:                  
  28:                  var icons = <%= AtomicAccordion1.ClientID %>.accordion( "option", "icons");
  29:                  if ($('#Icon').is(':checked')) {
  30:                      icons.header = newIcon;
  31:                  }else{
  32:                      icons.headerSelected = newIcon;
  33:                  }
  34:                  
  35:                  <%= AtomicAccordion1.ClientID %>.accordion( "option", "icons", icons);
  36:              })
  37:   
  38:              $('#hideIcons').button().click(function () {
  39:                  <%= AtomicAccordion1.ClientID %>.accordion( "option", "icons", flag );
  40:                  flag = !flag;
  41:              });
  42:          })
  43:   
  44:      </script>
  45:  </head>
  46:  <body>
  47:      <form id="form1" runat="server">
  48:      <fieldset>
  49:          <legend>Action</legend>
  50:          <div>
  51:              <input type="button" name="name" value="Toggle icons" id='hideIcons' />
  52:              <div style="float: right" id="IconSelector">
  53:                  <input type="radio" id="Icon" name="radio" checked="checked" /><label for="Icon">Icon</label>
  54:                  <input type="radio" id="SelectedItemIcon" name="radio" /><label for="SelectedItemIcon">Selected
  55:                      item icon</label>
  56:              </div>
  57:          </div>
  58:      </fieldset>
  59:      <div>
  60:          <atom:AtomicAccordion ID="AtomicAccordion1" runat="server">
  61:              <Items>
  62:                  <atom:AccordionItem Header="Example jQuery UI Framework icons part 1">
  63:                      <Template>
  64:                          <ul class="accordion-framework-ul-icons ui-widget ui-helper-clearfix">
  65:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n"><span class="ui-icon ui-icon-carat-1-n">
  66:                              </span></li>
  67:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span class="ui-icon ui-icon-carat-1-ne">
  68:                              </span></li>
  69:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span class="ui-icon ui-icon-carat-1-e">
  70:                              </span></li>
  71:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span class="ui-icon ui-icon-carat-1-se">
  72:                              </span></li>
  73:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span class="ui-icon ui-icon-carat-1-s">
  74:                              </span></li>
  75:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-sw"><span class="ui-icon ui-icon-carat-1-sw">
  76:                              </span></li>
  77:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-w"><span class="ui-icon ui-icon-carat-1-w">
  78:                              </span></li>
  79:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-nw"><span class="ui-icon ui-icon-carat-1-nw">
  80:                              </span></li>
  81:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-n-s"><span class="ui-icon ui-icon-carat-2-n-s">
  82:                              </span></li>
  83:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-e-w"><span class="ui-icon ui-icon-carat-2-e-w">
  84:                              </span></li>
  85:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n">
  86:                              </span></li>
  87:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne">
  88:                              </span></li>
  89:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e">
  90:                              </span></li>
  91:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se">
  92:                              </span></li>
  93:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s">
  94:                              </span></li>
  95:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw">
  96:                              </span></li>
  97:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w">
  98:                              </span></li>
  99:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw">
 100:                              </span></li>
 101:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span
 102:                                  class="ui-icon ui-icon-triangle-2-n-s"></span></li>
 103:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span
 104:                                  class="ui-icon ui-icon-triangle-2-e-w"></span></li>
 105:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n">
 106:                              </span></li>
 107:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne">
 108:                              </span></li>
 109:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e">
 110:                              </span></li>
 111:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se">
 112:                              </span></li>
 113:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s">
 114:                              </span></li>
 115:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw">
 116:                              </span></li>
 117:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w">
 118:                              </span></li>
 119:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw">
 120:                              </span></li>
 121:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span class="ui-icon ui-icon-arrow-2-n-s">
 122:                              </span></li>
 123:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span class="ui-icon ui-icon-arrow-2-ne-sw">
 124:                              </span></li>
 125:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span class="ui-icon ui-icon-arrow-2-e-w">
 126:                              </span></li>
 127:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span class="ui-icon ui-icon-arrow-2-se-nw">
 128:                              </span></li>
 129:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n">
 130:                              </span></li>
 131:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e">
 132:                              </span></li>
 133:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s">
 134:                              </span></li>
 135:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w">
 136:                              </span></li>
 137:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span
 138:                                  class="ui-icon ui-icon-arrowthick-1-n"></span></li>
 139:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span
 140:                                  class="ui-icon ui-icon-arrowthick-1-ne"></span></li>
 141:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span
 142:                                  class="ui-icon ui-icon-arrowthick-1-e"></span></li>
 143:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span
 144:                                  class="ui-icon ui-icon-arrowthick-1-se"></span></li>
 145:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span
 146:                                  class="ui-icon ui-icon-arrowthick-1-s"></span></li>
 147:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span
 148:                                  class="ui-icon ui-icon-arrowthick-1-sw"></span></li>
 149:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span
 150:                                  class="ui-icon ui-icon-arrowthick-1-w"></span></li>
 151:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span
 152:                                  class="ui-icon ui-icon-arrowthick-1-nw"></span></li>
 153:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span
 154:                                  class="ui-icon ui-icon-arrowthick-2-n-s"></span></li>
 155:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span
 156:                                  class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></li>
 157:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span
 158:                                  class="ui-icon ui-icon-arrowthick-2-e-w"></span></li>
 159:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span
 160:                                  class="ui-icon ui-icon-arrowthick-2-se-nw"></span></li>
 161:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span
 162:                                  class="ui-icon ui-icon-arrowthickstop-1-n"></span></li>
 163:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span
 164:                                  class="ui-icon ui-icon-arrowthickstop-1-e"></span></li>
 165:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span
 166:                                  class="ui-icon ui-icon-arrowthickstop-1-s"></span></li>
 167:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span
 168:                                  class="ui-icon ui-icon-arrowthickstop-1-w"></span></li>
 169:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span
 170:                                  class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
 171:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span
 172:                                  class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li>
 173:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span
 174:                                  class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li>
 175:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span
 176:                                  class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li>
 177:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span
 178:                                  class="ui-icon ui-icon-arrowreturn-1-w"></span></li>
 179:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span
 180:                                  class="ui-icon ui-icon-arrowreturn-1-n"></span></li>
 181:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span
 182:                                  class="ui-icon ui-icon-arrowreturn-1-e"></span></li>
 183:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span
 184:                                  class="ui-icon ui-icon-arrowreturn-1-s"></span></li>
 185:                              </li>
 186:                          </ul>
 187:                      </Template>
 188:                  </atom:AccordionItem>
 189:                  <atom:AccordionItem Header="Example jQuery UI Framework icons part 2">
 190:                      <Template>
 191:                          <ul class="ui-widget ui-helper-clearfix accordion-framework-ul-icons">
 192:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span
 193:                                  class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>
 194:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span
 195:                                  class="ui-icon ui-icon-arrowrefresh-1-n"></span></li>
 196:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span
 197:                                  class="ui-icon ui-icon-arrowrefresh-1-e"></span></li>
 198:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span
 199:                                  class="ui-icon ui-icon-arrowrefresh-1-s"></span></li>
 200:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4">
 201:                              </span></li>
 202:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag">
 203:                              </span></li>
 204:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink">
 205:                              </span></li>
 206:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin">
 207:                              </span></li>
 208:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh">
 209:                              </span></li>
 210:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle">
 211:                              </span></li>
 212:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w">
 213:                              </span></li>
 214:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span
 215:                                  class="ui-icon ui-icon-transferthick-e-w"></span></li>
 216:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span
 217:                                  class="ui-icon ui-icon-folder-collapsed"></span></li>
 218:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open">
 219:                              </span></li>
 220:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document">
 221:                              </span></li>
 222:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b">
 223:                              </span></li>
 224:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note">
 225:                              </span></li>
 226:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed">
 227:                              </span></li>
 228:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open">
 229:                              </span></li>
 230:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase">
 231:                              </span></li>
 232:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment">
 233:                              </span></li>
 234:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person">
 235:                              </span></li>
 236:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print">
 237:                              </span></li>
 238:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash">
 239:                              </span></li>
 240:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked">
 241:                              </span></li>
 242:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked">
 243:                              </span></li>
 244:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark">
 245:                              </span></li>
 246:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag">
 247:                              </span></li>
 248:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home">
 249:                              </span></li>
 250:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag">
 251:                              </span></li>
 252:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator">
 253:                              </span></li>
 254:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart">
 255:                              </span></li>
 256:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil">
 257:                              </span></li>
 258:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock">
 259:                              </span></li>
 260:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk">
 261:                              </span></li>
 262:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar">
 263:                              </span></li>
 264:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin">
 265:                              </span></li>
 266:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout">
 267:                              </span></li>
 268:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search">
 269:                              </span></li>
 270:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench">
 271:                              </span></li>
 272:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear">
 273:                              </span></li>
 274:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart">
 275:                              </span></li>
 276:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star">
 277:                              </span></li>
 278:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link">
 279:                              </span></li>
 280:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel">
 281:                              </span></li>
 282:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus">
 283:                              </span></li>
 284:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick">
 285:                              </span></li>
 286:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus">
 287:                              </span></li>
 288:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick">
 289:                              </span></li>
 290:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close">
 291:                              </span></li>
 292:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick">
 293:                              </span></li>
 294:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key">
 295:                              </span></li>
 296:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb">
 297:                              </span></li>
 298:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors">
 299:                              </span></li>
 300:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard">
 301:                              </span></li>
 302:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy">
 303:                              </span></li>
 304:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact">
 305:                              </span></li>
 306:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image">
 307:                              </span></li>
 308:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video">
 309:                              </span></li>
 310:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script">
 311:                              </span></li>
 312:                          </ul>
 313:                      </Template>
 314:                  </atom:AccordionItem>
 315:                  <atom:AccordionItem Header="Example jQuery UI Framework icons part 3">
 316:                      <Template>
 317:                          <ul id="icons" class="ui-widget ui-helper-clearfix accordion-framework-ul-icons">
 318:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert">
 319:                              </span></li>
 320:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info">
 321:                              </span></li>
 322:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice">
 323:                              </span></li>
 324:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help">
 325:                              </span></li>
 326:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check">
 327:                              </span></li>
 328:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet">
 329:                              </span></li>
 330:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off">
 331:                              </span></li>
 332:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on">
 333:                              </span></li>
 334:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w">
 335:                              </span></li>
 336:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s">
 337:                              </span></li>
 338:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play">
 339:                              </span></li>
 340:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause">
 341:                              </span></li>
 342:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next">
 343:                              </span></li>
 344:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev">
 345:                              </span></li>
 346:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end">
 347:                              </span></li>
 348:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first">
 349:                              </span></li>
 350:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop">
 351:                              </span></li>
 352:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject">
 353:                              </span></li>
 354:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off">
 355:                              </span></li>
 356:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on">
 357:                              </span></li>
 358:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power">
 359:                              </span></li>
 360:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag">
 361:                              </span></li>
 362:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal">
 363:                              </span></li>
 364:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0">
 365:                              </span></li>
 366:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1">
 367:                              </span></li>
 368:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2">
 369:                              </span></li>
 370:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3">
 371:                              </span></li>
 372:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span class="ui-icon ui-icon-circle-plus">
 373:                              </span></li>
 374:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span class="ui-icon ui-icon-circle-minus">
 375:                              </span></li>
 376:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span class="ui-icon ui-icon-circle-close">
 377:                              </span></li>
 378:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span
 379:                                  class="ui-icon ui-icon-circle-triangle-e"></span></li>
 380:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span
 381:                                  class="ui-icon ui-icon-circle-triangle-s"></span></li>
 382:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span
 383:                                  class="ui-icon ui-icon-circle-triangle-w"></span></li>
 384:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span
 385:                                  class="ui-icon ui-icon-circle-triangle-n"></span></li>
 386:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span
 387:                                  class="ui-icon ui-icon-circle-arrow-e"></span></li>
 388:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span
 389:                                  class="ui-icon ui-icon-circle-arrow-s"></span></li>
 390:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span
 391:                                  class="ui-icon ui-icon-circle-arrow-w"></span></li>
 392:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span
 393:                                  class="ui-icon ui-icon-circle-arrow-n"></span></li>
 394:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span class="ui-icon ui-icon-circle-zoomin">
 395:                              </span></li>
 396:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span
 397:                                  class="ui-icon ui-icon-circle-zoomout"></span></li>
 398:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span class="ui-icon ui-icon-circle-check">
 399:                              </span></li>
 400:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span
 401:                                  class="ui-icon ui-icon-circlesmall-plus"></span></li>
 402:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span
 403:                                  class="ui-icon ui-icon-circlesmall-minus"></span></li>
 404:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span
 405:                                  class="ui-icon ui-icon-circlesmall-close"></span></li>
 406:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span
 407:                                  class="ui-icon ui-icon-squaresmall-plus"></span></li>
 408:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span
 409:                                  class="ui-icon ui-icon-squaresmall-minus"></span></li>
 410:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span
 411:                                  class="ui-icon ui-icon-squaresmall-close"></span></li>
 412:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span
 413:                                  class="ui-icon ui-icon-grip-dotted-vertical"></span></li>
 414:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span
 415:                                  class="ui-icon ui-icon-grip-dotted-horizontal"></span></li>
 416:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span
 417:                                  class="ui-icon ui-icon-grip-solid-vertical"></span></li>
 418:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span
 419:                                  class="ui-icon ui-icon-grip-solid-horizontal"></span></li>
 420:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span
 421:                                  class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li>
 422:                              <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span
 423:                                  class="ui-icon ui-icon-grip-diagonal-se"></span>
 424:                          </ul>
 425:                      </Template>
 426:                  </atom:AccordionItem>
 427:              </Items>
 428:          </atom:AtomicAccordion>
 429:      </div>
 430:      <br />
 431:      <sample:Source ID="Code" runat="server" />
 432:      </form>
 433:  </body>
 434:  </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 FrameworkIcons : System.Web.UI.Page
  11:      {
  12:          protected void Page_Load(object sender, EventArgs e)
  13:          {
  14:   
  15:          }
  16:      }
  17:  }
   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 FrameworkIcons
   9:          Inherits System.Web.UI.Page
  10:          Protected Sub Page_Load(sender As Object, e As EventArgs)
  11:          End Sub
  12:      End Class
  13:  End Namespace