Frankie Benevides Jr.

Fusebox Plugin Options

As I was writing the code, a number of options presented themselves. Normally this isn’t my approach (I prefer purpose-built solutions) but since this wasn't for a live project I decided to include them.

Default

This is the default appearance when no options are added.

Default

This is how the plugin renders with no options.

Maecenas sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin pede odio, iaculis id, ultrices ut, convallis eu, ipsum. Etiam nisi dui, dictum id, varius non, egestas ut, enim. Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Headline

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab 4 Content

Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Fuse Above Tabs

data-fuselocation="top"

Variable Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Maecenas sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin pede odio, iaculis id, ultrices ut, convallis eu, ipsum. Etiam nisi dui, dictum id, varius non, egestas ut, enim.

Headline

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab 4 Content

Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Tabs on Bottom / Fuse Above Tabs

data-tablocation="bottom" data-fuselocation="top"

Variable Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Maecenas sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin pede odio, iaculis id, ultrices ut, convallis eu, ipsum. Etiam nisi dui, dictum id, varius non, egestas ut, enim.

Headline

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab 4 Content

Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Tabs on Bottom / Fuse Below Tabs

data-tablocation="bottom" data-fuselocation="bottom"

Variable Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Maecenas sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin pede odio, iaculis id, ultrices ut, convallis eu, ipsum. Etiam nisi dui, dictum id, varius non, egestas ut, enim.

Headline

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab 4 Content

Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Fuse Speed & Transition Speed

data-burnspeed="[integer (ms)]" data-transspeed="[integer (ms)]" : Fuse speed & Transition speed can be controlled individually by supplying a time in milliseconds.

This example has a fast fuse speed (2 seconds per tab) and a slow transition speed (1 second).

Variable Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Maecenas sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin pede odio, iaculis id, ultrices ut, convallis eu, ipsum. Etiam nisi dui, dictum id, varius non, egestas ut, enim.

Headline

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab 4 Content

Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

No Pause on Hover

data-pause="none"

By default, the fuse pauses & resets for the current tab when the mouse cursor is over the element. This can be turned off by adding a data-attribute.

Variable Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Maecenas sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin pede odio, iaculis id, ultrices ut, convallis eu, ipsum. Etiam nisi dui, dictum id, varius non, egestas ut, enim.

Headline

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab 4 Content

Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Animated Content Height

data-boxheight="resize"

By default, Fusebox uses the height of the tallest content area. This setting allows the element to grow and shrink depending on the height of the content in each tab.

Variable Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Maecenas sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin pede odio, iaculis id, ultrices ut, convallis eu, ipsum. Etiam nisi dui, dictum id, varius non, egestas ut, enim.

Headline

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Maecenas sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin pede odio, iaculis id, ultrices ut, convallis eu, ipsum. Etiam nisi dui, dictum id, varius non, egestas ut, enim. Suspendisse vehicula, quam ut iaculis imperdiet, dolor neque semper neque, ut lacinia ante libero in tellus. Integer convallis luctus eros. Suspendisse potenti.

Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Maecenas sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin pede odio, iaculis id, ultrices ut, convallis eu, ipsum. Etiam nisi dui, dictum id, varius non, egestas ut, enim. Suspendisse vehicula, quam ut iaculis imperdiet, dolor neque semper neque, ut lacinia ante libero in tellus. Integer convallis luctus eros. Suspendisse potenti.

Tab 4 Content

Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo