Content panels

Content panels are a powerful feature to display two related content blocks, for instance a file explorer, an inbox and a message view panel... On large desktop, both blocks display side by side, but on smaller screens only one panel is visible at the time, and the plugin take care of showing the desired panel:

The plugin will automatically switch from full-veiw to mobile view if the element becomes to small, so it may be used safely inside columns.

Markup

Here is the minimum markup to use this feature:

<div class="content-panel">

	<!-- Navigation panel -->
	<div class="panel-navigation silver-gradient">
		...
	</div>

	<!-- Content panel -->
	<div class="panel-content linen" style="height:400px">
		...
	</div>

</div>

Note that the size of the whole element is set on the panel-content element, not on the wrapper.

The color classes silver-gradient and linen are optional, you may remove them or use alternate ones.

If you want the panels to show content first (not navigation) when opening on mobile layout, add the class show-panel-content to the main content-panel block.

Scrolling

To enable scrolling, just add the class scrollable to one or both panels:

<div class="content-panel">

	<!-- Navigation panel -->
	<div class="panel-navigation silver-gradient scrollable" style="height:400px">
		...
	</div>

	<!-- Content panel -->
	<div class="panel-content linen scrollable" style="height:400px">
		...
	</div>

</div>

In order for the scrolling to work, you must also set a size to the panel-navigation element.

Extra elements around content

By default, the plugin replace all panel's content when it loads new content, but you may wish to add fixed elements to the panels, such as a control bar, that wouldn't be removed. To do this, wrap the panel content in a block with the class panel-load-target: the plugin will look for it before loading anything, and use it instead of the panel itself, thus leaving the extra elements in place.

<div class="content-panel">

	<div class="panel-navigation silver-gradient">

		<!-- This element won't change -->
		<div class="panel-control">
			...
		</div>

		<!-- Navigation content will be loaded here -->
		<div class="panel-load-target scrollable" style="height:360px">
			...
		</div>

	</div>

	<div class="panel-content linen">

		<!-- This element won't change -->
		<div class="panel-control align-right">
			...
		</div>

		<!-- Main content will be loaded here -->
		<div class="panel-load-target scrollable" style="height:400px">
			...
		</div>

	</div>

</div>

You can add as much extra elements as wanted, just make sure the panel heights are the same for best looking result.

Forcing mobile style

If you want to use the mobile style (full width menu and content) everywhere, even on desktops, just add the class mobile-panels to the main wrapper:

<div class="content-panel mobile-panels">

	...

</div>

Loading content

This is the easy part: anywhere within the panels, just add the class open-on-panel-content or open-on-panel-navigation to the links (or their parent), depending on which panel should be targeted:

<!-- This link will open on the content panel -->
<a href="content.html" class="open-on-panel-content">Link</a>

<!-- All these links will open on the content panel -->
<ul class="open-on-panel-content">
	<li><a href="content1.html">Link</a></li>
	<li><a href="content2.html">Link</a></li>
	<li><a href="content3.html">Link</a></li>
</ul>

The plugin will automatically load the content in the desired panel, and show it if in mobile view.

Methods

The plugin provides 2 methods to load content dynamically and 2 to refresh it, which may be called on any element within the panels or on the wrapper itself:

$(selector).loadPanelNavigation(url, options)

Load navigation panel content with AJAX

Parameters

@param string url the url of the content to load
@param object options any additional options for the AJAX call

$(selector).refreshPanelNavigation()

Refresh the navigation panel content if it was previously loaded at least once

$(selector).loadPanelContent(url, options)

Load content panel content with AJAX

Parameters

@param string url the url of the content to load
@param object options any additional options for the AJAX call

$(selector).refreshPanelContent()

Refresh the content panel content if it was previously loaded at least once

Options reference

They are a couple options you may set either on a panel or on the wrapper itself. Each time a content is loaded in a panel, the options of the panel and the wrapper's options are used (panel's options override the wrapper's ones):

onStartLoad

Callback before loading content (either through the API or when clicking on a link). The function receive the settings object for the current load as parameter
Note: the callback may return false to prevent loading
Type: function
Default: null

ajax

Options object for jQuery's $.ajax method, such as callbacks on error or success, parameters, data type...
Type: object
Default: {}

Options may be set inline:

<div class="content-panel" data-panel-options='{"ajax":{"data":"user=1"}}'>

Or using a script:

$(document).ready(function()
{
	$('#panel').data('panel-options', {
		onStartLoad: function(settings)
		{
			...
		}
	});
});

Note that the callback receives the settings object as parameter, in which you may set ajax options for your backend script (for instance, layout options, filtering, pagination...):

$(document).ready(function()
{
	$('#panel').data('panel-options', {
		onStartLoad: function(settings)
		{
			// Add options
			settings.ajax = $.extend({}, settings.ajax, {
				page: 1,
				display: 'icons'
			});
		}
	});
});