<-- START JSPANEL DIV -->
    <-- HEADER SECTION -->
    <-- CONTENT SECTION -->
    <div class="jsPanel-ftr"></div>
<-- END JSPANEL DIV -->
image header ssection

The footer section is represented by one single div element. By default the footer CSS is set to display: none unless you specify a footer toolbar using either option.toolbarFooter or the method .addToolbar().

You can add any content you want and the footer section will automatically adjust its height to the content. By default inline content is right aligned, so buttons don't need to be floated right for example.

INFO: The div container containing the footer items already has a clearfix applied. So it should be no problem to add floats to the footer without the need to clear floated items.


All options are optional and have a default value if no custom value is set in the configuration object of $.jsPanel({config})

  • option.paneltype with value "hint"

    In case you use jsPanel as hint there is no footer toolbar available.

  • option.rtl

    implements support for right-to-left text direction.

  • option.toolbarFooter

    configures and appends a toolbar to the footer.


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

  • jsPanel.addToolbar(location,items)

    allows to append a footer toolbar to an existing jsPanel.


  • jsPanel.footer

    jsPanel.footer is a reference to the complete footer section.