jsPanel Documentation
On this page:

Toolbar Basics

jsPanel offers several ways to include an extra toolbar in either header or footer section:
option.toolbarHeader

initializes a jsPanel with a header tooolbar already included and accepts:

  • html string
  • function(jsPanel.header){}
  • array of objects
option.toolbarFooter

initializes a jsPanel with a footer tooolbar already included and accepts:

  • html string
  • function(jsPanel.footer){}
  • array of objects
jsPanel.addToolbar()

adds a toolbar to an already exsisting jsPanel and accepts:

  • array of objects

Using option.toolbarHeader, option.toolbarFooter or jsPanel.addToolbar() with an array allows to configure a number of items to append to the toolbar where each item can have its own event/callback assigned to. When using an array each array item has to be an object and each object represents an item to add to the toolbar. Each object is expected to have the following properties:

  • item is the element to append to the footer toolbar. Typically this is an htmlString, but can be anything accepted by jQuery's .append() method.
  • event is a string with the event that's supposed to trigger the callback like click, mouseover and so on.
  • btnclass is an optional class name to add to the item if item is a HTML <button> element.
  • btntext is an optional text content to apply to the item if item is a HTML <button> element.
  • callback is a function to execute when event is triggered. The function receives the event object as argument and event.data is a reference to the jsPanel itself.

Example arrays of toolbars we will use in some of the following examples

// toolbar  we use for the header examples
var headerToolbar = [
    {
        item:     '<i style="cursor:pointer;">',
        event:    'click',
        btnclass: 'fi-mail',
        callback: function (event) {
            event.data.content.append('<p>You clicked on mail ...</p>');
        }
    },
    {
        item:     '<i style="cursor:pointer;margin-left:5px;">',
        event:    'click',
        btnclass: 'fi-like',
        callback: function (event) {
            event.data.content.append('<p>You clicked on like this time ...</p>');
        }
    },
    {
        item:     '<i style="cursor:pointer;margin-left:5px;">',
        event:    'click',
        btnclass: 'fi-star',
        callback: function (event) {
            event.data.content.append('<p>You clicked on the star ...</p>');
        }
    }
];

// prepare a few items for the footer toolbar
var textItem = {
        item: '<div style="float:left;padding:10px 0 0 0;cursor:pointer;">Clickable Text ...</div>',
        event: 'click',
        callback: function (event) {
            event.data.content.append("<p>The click at position (" + event.pageX + ", " + event.pageY + ")</p>");
        }
    },
    btnClose = {
        item:     '<button class="button tiny alert"><i class="fi-x"> </i></button>',
        event:    'click',
        btnclass: 'custombutton',
        btntext:  'close',
        callback: function (event) {event.data.close(); }
    },
    btnOk =  {
        item:     '<button class="button tiny success"><i class="fi-check"> </i></button>',
        event:    'click',
        btnclass: 'custombutton',
        btntext:  'ok',
        callback: function (event) {
            event.data.content.append("<p style='padding:20px;text-align:center;'>And this was a click on the OK button!</p>");
        }
    },

    // the footer toolbar
    footerToolbar = [ textItem, btnClose, btnOk ];

option.toolbarHeader

With option.toolbarHeader a jsPanel will be initialized with a toolbar already included.

The Default value of option.toolbarHeader is false.

Passing an array to option.toolbarHeader

$.jsPanel({
    toolbarHeader: headerToolbar, // this is the array we created above
    position: "center",
    theme: "light"
});
Execute example above

Passing a HTML string to option.toolbarHeader

$.jsPanel({
    toolbarHeader: "<i>A simple html string ...</i>",
    position: "center",
    theme: "light"
});
Execute example above

Passing a function to option.toolbarHeader.
A function passed to option.toolbarHeader receives the the property jsPanel.header as argument.

// note that the function receives the property jsPanel.header as argument
$.jsPanel({
    toolbarHeader: function( hdr ){
        hdr.toolbar.css({ background: "#858585", color: "white" });
        return "jsPanels on page: " + $(".jsPanel").length;
    },
    position: "center",
    theme: "light"
});
Execute example above
With option.toolbarFooter a jsPanel will be initialized with a toolbar already included.

The Default value of option.toolbarHeader is false.

Passing an array to option.toolbarFooter

$.jsPanel({
    toolbarFooter: footerToolbar, // this is the array we created above
    position: "center",
    theme: "light"
});
Execute example above

Passing a HTML string to option.toolbarHeader

$.jsPanel({
    toolbarFooter: "<i>A simple html string ...</i>",
    position: "center",
    theme: "light"
});
Execute example above

Passing a function to option.toolbarHeader.
A function passed to option.toolbarHeader receives the the property jsPanel.header as argument.

// note that the function receives the property jsPanel.header as argument
$.jsPanel({
    toolbarFooter: function( ftr ){
        ftr.css({ background: "#858585", color: "white" });
        return "jsPanels on page: " + $(".jsPanel").length;
    },
    position: "center",
    theme: "light"
});
Execute example above

jsPanel.addToolbar()

With jsPanel.addToolbar() you can add a toolbar to an already exsisting jsPanel and the method expects the following two parameters:
  • location string "header" | "footer"
  • items array this is exactly the same kind of array as already described above

Example adding the same header toolbar as above

// create a jsPanel first and store it in a variable
var mypanel = $.jsPanel({
    position: "center",
    theme:    "success"
});

// add toolbar, delayed only to see the toolbar added to an exsisting panel
window.setTimeout(function(){
    mypanel.addToolbar("header", headerToolbar);
}, 3000)
Execute example above

Example adding the same footer toolbar as above

// create a jsPanel first and store it in a variable
var mypanel2 = $.jsPanel({
    position: "center",
    theme:    "success"
});

// add toolbar, delayed only to see the toolbar added to an exsisting panel
window.setTimeout(function(){
    mypanel2.addToolbar("footer", footerToolbar);
}, 3000)
Execute example above