Header HTML

<-- START JSPANEL DIV -->
<div class="jsPanel-hdr jsPanel-theme-default">
    <h3 class="jsPanel-title"></h3>
    <div class="jsPanel-hdr-r">
        <div class="jsPanel-btn-close"><span class="jsglyph jsglyph-remove"></span></div>
        <div class="jsPanel-btn-max"><span class="jsglyph jsglyph-maximize"></span></div>
        <div class="jsPanel-btn-norm"><span class="jsglyph jsglyph-normalize"></span></div>
        <div class="jsPanel-btn-min"><span class="jsglyph jsglyph-minimize"></span></div>
        <div class="jsPanel-btn-small"><span class="jsglyph jsglyph-chevron-up"></span></div>
        <div class="jsPanel-btn-smallrev"><span class="jsglyph jsglyph-chevron-down"></span></div>
    </div>
    <div class="jsPanel-hdr-toolbar jsPanel-clearfix"></div>
</div>
<-- CONTENT SECTION -->
<-- FOOTER SECTION  -->
<-- END JSPANEL DIV -->
image header ssection

jsPanel options affecting the header

The header section can be controlled by a variety of options. All options are optional and have a default value if no custom value is set in the configuration object of $.jsPanel({config})

Options affecting the header:

  • option.title API option.title

    sets a title for the jsPanel.

  • option.controls API option.controls
    • allows to remove some of the controls from the DOM
    • and/or disables/enables individual controls

  • option.removeHeader API option.removeheader

    allows to completely remove the header section.

  • option.bootstrap API option.bootstrap

    implements support of bootstrap themes.

  • option.rtl API option.rtl

    implements support for right-to-left text direction.

  • option.theme API option.theme

    allows the use of several predefined themes.

  • option.toolbarHeader API option.toolbarHeader

    configures and appends a toolbar to the header.

    Floats in the header toolbar:The DIV container taking the toolbar items already has a clearfix applied. So it should be no problem to add floats to the header toolbar without the need to clear floated items.


jsPanel methods affecting the header

After a jsPanel is inserted into the document it's still possible to control the header section using the following methods:

  • jsPanel.addToolbar(string location, array items) API method.addToolbar()

    allows to append a header toolbar to an existing jsPanel.

  • jsPanel.control(string action, string ctrl) API method.control()

    allows to disable/enable an individual control of an existing jsPanel.

  • jsPanel.title([string]) API method.title()

    sets or returns the title of an existing jsPanel.


Header properties

The following properties can be used to access the header or parts of it:

  • jsPanel.header is a reference to the complete header section including title, controls and header toolbar
  • jsPanel.header.title is a reference to the h3 element with the title text
  • jsPanel.header.controls is a reference to the div element containing the controls
  • jsPanel.header.toolbar is a reference to the div element containing all toolbarHeader items