Additional functionallity for the Bootstrap 3 Panel
Include the script after the jQuery library
<script src="/path/to/jquery.panel.js"></script>
Initialize the plugin and put the code inside the jQuery document.ready callback like here:
<!-- Simple Panel without data- Attributes; Configuration is set in Javascript -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">My Panel</h3>
</div>
<div class="panel-body">
My Panel content
</div>
</div>
<!-- Panel using data- Attributes for individual configuration -->
<div class="panel panel-default" data-url="/user/profile?id=0815" data-collapsible="true" data-collapsed="false" data-autorefresh="10">
<div class="panel-heading">
<h3 class="panel-title">My Panel</h3>
</div>
<div class="panel-body">
My Panel content
</div>
</div>
$(function(){
// Example 1: Call without configuration (Individual configuration could be done in HTML via data- Attributes)
$('.panel').panel();
// Example 2: Put all configuration in Javascript
$('.panel').panel({
url: '/user/profile?id=0815',
collapsible: true,
collapsed: false,
autorefresh: 10
});
});
Two ways to configure jquery.panel.js:
- Passing Configuration Parameters in Javascript
- Adding data- Attributes to the Panel Element
Decide, how you want to integrate the Panel: If all Panels on one page share the same configuration, use Javascript. If you have multiple Panels with different options, use the HTML Initialisation. You can also use a Mix of both, ie. it could make sense to only define the url per data- Attribute and setup all the other parameters in Javascript.
When true, adds an chevron icon to the header to toggle between collapsed and uncollapsed state.
Defines the initial state of the panel. Ignored if collapsible
is false
. If no collapsed
is defined, but an url is defined, the panel starts collapsed and uncollapses as soon as any content is received.
An url to load HTML contents via XHR.
Interval in seconds to reload content via given url
.