The SplitView base on 2 Views (the secondary and the primary) and has optional up to 2 Sidebars (left and right). The reason why I developed this control was to have a good scale over a wide range of screen sizes. So I want to create on control which perfectly scales from Mobile over Tablet up to Desktop screens.

On the screen-size I took the bootstrap sizes (XS, SM and LG).

Use cases of this control are views where you have an overview (like a list of EMails, ToDos, Search-Results, ...) and a detail-view which shows details to a selected item (like the selected EMail). In the Sidebars you can put main menus, options for the views and so on.

Overview are placed in the Secondary-View and detail-view are placed in the Primary-View.

On a big screen you can see the secondary-view (green) and the primary-view (blue). Additional if you have both Sidebars (left->red and right->orange). In this Size than the sidebars are permanent visible.

On a small screen the Sidebars are collapsed and can be toggle via e.g. a button (in this example the 2 links in the header 'Toggle Left Sidebar' and 'Toggle Right Sidebar').

On a very small screen you will only see the secondary or the primary view. You can switch from one to another via e.g. a button (In this example the links 'Toggle View', 'Next' or 'back'). Normaly would be the Next-Logic placed in a List-Item selection/click event.

Secondary View	Primary View
Secondary View - Sidebar	Primary View - Sidebar

You also can see that the Left Sidebar is only present for the secondary-view and the right sidebar only for the primary-view. This is configurable via CSS-Classes.

There are 2 Versions of this Control:

• JQuery Plugin (Use this Version in all websites where you don't use angular JS)
• AngularJS Plugin wrapper

You find an example here:

• Demo SplitView

initSplitView

$(<selector>).initSplitView('<viewName>');

The initSplitView function initialize the different parts of the split view.

<viewName> are: Primary, Secondary, SidebarLeft (Optinal), SidebarRight (Optinal)

toggleSidebar

$.toggleSidebar('<param>')

The toggleSidebar function toggles the give sidebar (open / closed) in the mobile and tablet size.

<param> are: left, right, close (closing both)

controlSplitView

$.controlSplitView('<param>')

The controlSplitView function switch between the secondary and the primary view in the mobile size.

<param> are: primary, secondary, toogle

sh-splitview-hide-splitScreen

Elements are marked with this CSS-class will be hidden in the tablet and desktop size.

sh-splitview-hide-fullScreen

Elements are marked with this CSS-class will be hidden in the desktop size.

sh-splitview-hide-primary

Elements are marked with this CSS-class will be hidden in the mobile size if the primary-view is displayed.

sh-splitview-hide-secondary

Elements are marked with this CSS-class will be hidden in the mobile size if the secondary-view is displayed.

Styling

To Style your container. You can use the following CSS-Classes:

sh-splitview-sidebar-right, sh-splitview-sidebar-left, sh-splitview-secondary, sh-splitview-primary

You find an example here:

• Demo SplitView Angular