Panel

compared with
Key
These lines were removed. This word was removed.
These lines were added. This word was added.

View page history


There are 2 changes. View first change.

 h2. Overview
 _Since 3.0_
  
 Panel is a generic grouping component that supports toggling, closing and an options menu.
  
 {tip}See the ICEfaces Showcase [Live Demo|http://icefaces-showcase.icesoft.org/showcase.jsf?grp=aceMenu&exp=panelBean] of this component, complete with source code.{tip}
  
  
 h2. Getting Started
  
 {panel}
 {code:xml|borderStyle=dashed} <ace:panel header="ICEfaces Header"
  closable="true"
  toggleable="true"
  collapsed="#{panelBean.collapsed}">
  <f:facet name="options">
  <ace:menu>
  ......
  </ace:menu>
  </f:facet>
  <p>......</p>
  <p>......</p>
  </ace:panel>
 {code}
 {panel}
 h2. Attributes
  
 {tip:title=TagLib Documentation}This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available [here|http://www.icefaces.org/docs/v4_latest/ace/tld/ace/panel.html].{tip}
 {panel}
 *closable* specifies whether the panel has a button to hide the panel by using the jQuery fadeOut() function.
 {panel}
 {panel}
 *toggleable* specifies whether the panel has a button to collapse/expand the contents of the panel by using the jQuery slideToggle() function.
 {panel}
 {panel}
 *collapsed* specifies whether the panel is collapsed.
 {panel}
 {panel}
 *footer* specifies the footer text of the panel.
 {panel}
 {panel}
 *header* specifies the header text of the panel.
 {panel}
 h2. Event Listeners
  
 None.
  
 h2. Client Behavior Events
  
 | toggle | Fired when the toggle button is activated to expand or collapse the panel (default event). |
 | close | Fired when the close button is activated to remove the panel from view. |
  
 h2. JavaScript API
  
 The client side panel object is exposed through the global variable named by the *widgetVar* attribute, but currently there is no API useful to the user.
  
 h2. Keyboard Support
  h2. Keyboard and ARIA Support
  
 The following ARIA roles are supported: menu (for the menu button).
  
 h2. CSS Classes
  
 The following markup represents the basic HTML structure of the component and the CSS classes it uses.
  
 {code:xml}
 <!-- Root container -->
 <div class="ui-panel ui-widget ui-widget-content ui-corner-all [user defined classes]" style="[user defined styles]">
  <div class="ui-panel-titlebar ui-widget-header ui-corner-all">
  <span class="ui-panel-title">Panel Header</span>
  <span class="ui-panel-titlebar-icons">
  <!-- Close button -->
  <a class="ui-panel-titlebar-icon ui-corner-all ui-state-default">
  <span class="ui-icon ui-icon-closethick"></span>
  </a>
  <!-- Toggle button -->
  <a class="ui-panel-titlebar-icon ui-corner-all ui-state-default">
  <span class="ui-icon ui-icon-minusthick"></span>
  </a>
  <!-- Menu button -->
  <a class="ui-panel-titlebar-icon ui-corner-all ui-state-default">
  <span class="ui-icon ui-icon-gear"></span>
  </a>
  </span>
  </div>
  <div class="ui-panel-content ui-widget-content">
  <!-- Panel body -->
  </div>
  <!-- Menu -->
  <span>
  <div class="ui-widget ui-widget-content wijmo-wijmenu ui-corner-all ui-helper-clearfix">
  <div class="scrollcontainer checkablesupport">
  <ul class="wijmo-wijmenu-list ui-helper-reset">
  <!-- Submenu -->
  <li class="ui-widget-header ui-corner-all"><h3>Submenu label</h3></li>
  <!-- Menu item -->
  <li class="ui-widget wijmo-wijmenu-item ui-state-default ui-corner-all">
  <a class="wijmo-wijmenu-link ui-corner-all">
  <span class="wijmo-wijmenu-text">
  <span class="ui-icon wijmo-wijmenu-icon-left"></span>
  <span class="wijmo-wijmenu-text">Menu item label</span>
  </span>
  </a>
  </li>
  </ul>
  </div>
  </div>
  </span>
  <span class="ui-helper-hidden"></span>
 </div>
 {code}
  
 h2. Known Issues
  
 None.
  
 h2. Additional Resources

© Copyright 2017 ICEsoft Technologies Canada Corp.