Internally option.content uses jquery.append() to insert content at the end of the jsPanel content section. This means that option.content accepts any values accepted by jquery.append(). These are:

• DOM element
• array of elements
• HTML string
• jQuery object
• a function that returns an HTML string, DOM element(s), or jQuery object. Note that inside a function the this keyword refers to the current object which is the jsPanel property content in this case.

The Default value of option.content is false.

For detailed information about jquery.append() refer to the jQuery API

$.jsPanel({
    content:  "<div style='background: gray; width: 200px; height: 150px; margin: 10px auto;'>",
    position: "center",
    theme:    "light"
});

Execute example 1

Example 2 adding an array of DIV elements

$.jsPanel({
    content: [
        "<div style='background: red; width: 50px; height: 50px; margin: 10px; float: left;'>",
        "<div style='background: green; width: 50px; height: 50px; margin: 10px; float: left;'>",
        "<div style='background: blue; width: 50px; height: 50px; margin: 10px; float: left;'>",
    ],
    position: "center",
    theme:    "light"
});

Execute example 2

Example 3 adding a HTML string

$.jsPanel({
    content: "<p style='padding: 20px; text-align: center;'>An HTML string added as content ...</p>",
    position: "center",
    theme:    "light"
});

Execute example 3

Example 4 adding a jQuery object

var content = $("<div style='background: crimson; width: 50px; height: 50px; margin: 10px; float: left;'></div>"+
                "<div style='background: forestgreen; width: 50px; height: 50px; margin: 10px; float: left;'></div>"+
                "<div style='background: #446e9b; width: 50px; height: 50px; margin: 10px; float: left;'></div>");
$.jsPanel({
    content: content,
    position: "center",
    theme:    "light"
});

Execute example 4

Example 5 using a function

var content = $("<div style='background: crimson; width: 50px; height: 50px; margin: 10px; float: left;'></div>"+
                "<div style='background: forestgreen; width: 50px; height: 50px; margin: 10px; float: left;'></div>"+
                "<p style='padding: 20px; clear: left;'>Content added with function ...</p>");
$.jsPanel({
    content: function(){
        $(this).css('background', 'yellow'); // note that $(this) points to the content section of the jsPanel
        return content;
    },
    position: "center",
    theme:    "light"
});

Execute example 5

Example 6 adding an iframe with option.content (consider that there is also option.iframe)

$.jsPanel({
    size:     {width: 1000, height: 600},
    content:  "<iframe src='https://heute.de/' width='100%' height='100%' style='padding: 15px;'></iframe>",
    position: {top: 10, left: 'center'},
    theme:    'black',
    title:    'ZDF <small>heute.de</small>',
    callback: function(panel) {
        // overwrite default background to match content
        panel.css("background", "#003C4D");
    }
});

Execute example 6

Example 7 using a function and jquery.load() (consider that there is also option.load)

$.jsPanel({
    content: function(){
        $(this).load("../files/loremipsum.html");
    },
    position: "center",
    size:     {width: 420, height: 270},
    overflow: {vertical: 'scroll'},
    theme:    "light"
});

Execute example 7

Example 8 loads an HTML5 video

$.jsPanel({
    $.jsPanel({
        content:  "<video controls autoplay><source src='https://v2.jspanel.de/media/video/Big Buck Bunny (Low).mp4' type='video/mp4'></video>",
        position: "center",
        size:     {width: 640, height: 360},
        title:    "content: HTML5 video",
        theme:    "success"
    });
});

Execute example 8