A good way to have extra content or a navigation tool in your page!
This jquery component let you easly build a sliding panel where to insert any kind of content; it has builtin all the functionalities for managing menu lines and sub panels with accordion effect. It can get the content via ajax and therefore you can dynamically build it by passing DATA via request using the metadata attribute settable on the extruder container.
demo page:
http://pupunzi.com/#mb.components/mb.extruder/extruder.html
download page:
http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/
Dependencies:
- jquery.hoverIntent.js
- jquery.metaData.js
- jquery.mb.flipText.js (soon available as stand alone)
here is the js call:
$("#extruderTop").buildMbExtruder({
positionFixed:true,
width:350,
sensibility:800,
position:"top",
extruderOpacity:1,
flapDim:100,
textOrientation:"bt", // or "bt" (top-bottom or bottom-top)
onExtOpen:function(){},
onExtContentLoad:function(){},
onExtClose:function(){},
slideTimer:300
});
The HTML constructor:
on the page:
<div id="extruderTop" class="{title:'Our network', url:'parts/extruderTop.html'}"> </div>
There are two ways to fill the extruder:
- The first is inline content
in this case you can put your content inside the "content" DIV directly; in the case you have a menu structure with a sub level content, that content can only be inserted via ajax using: {panel:'parts/your subcontent url', data:'DATA to bi passed in the request as json object or as query string'} as class of the root voice.
- The second is via ajax
This way lets you define the content of the extruder in a separate file called via ajax; the URL of the file is specified in the extruder DIV class attribute as above: {url:'parts/extruderTop.html', data:to pass in the request as json object or as query string} Passing additional DATA you can manage dynamically the content to be shown building your own logic.
part to be included as primary content (in a separate file or just inline):
<div class="text">
[text with no actions managed by the component including images or whatever you need]
</div>
<div class="voice {}"><a class="label" href="http://pupunzi.com">mb.ideas.home</a></div>
<div class="voice {panel:'parts/extr.components.html'}"><a class="label"
href="http://pupunzi.com/#mb.components/components.html">mb.jquery.components</a></div>
<div class="voice {disabled:true}"><span class="label">mb.info (disabled)</span> </div>
...
In the primary conent, the one you can see opening the panel, you can display a list of lines with differen actions or just a content you define;
As you can see above, each line is defined by a DIV with class "voice" or "text" and has different action:
- the first is simply a container of content (class="text" in the DIV TAG);
- the second is a direct link to a specified url in the href (class="label" in the A TAG);
- the third is a direct link to a specified url and has a sub panel which url is defined in the class attribute as "panel" (class="voice {panel:'parts/extr.components.html'}" in the DIV TAG);
- the forth is a disabled voice ("class="voice {disabled:true}" in the DIV TAG);
secondary content file (must be in a separate file; it's invoked in the "panel" metadata setted to the root voice as above):
<div class="text">
[text with no actions managed by the component including images or whatever you need]
</div>
<div><a onclick="alert('mb.pdf.magazine');">mb.pdf.magazine</a></div>
<div><a onclick="alert('mb.video');">mb.video</a></div>
<div><a onclick="alert('mb.more');">mb.more</a></div>
...
Parameters:
- width:350, (int) the width of the sliding panel
- sensibility:800, (int) the time in milliseconds to wait befor the slider will open without a click event
- position:"top", (string) to define if the slider is on the top or on the left of your page
- extruderOpacity:1, (int) the opacity of the sliding panel once it's closed (doesn't work in IE)
- flapDim: 100, (int) the width or height (depends on the extruder position) of the flap containing the title
- textOrientation: "tb", or "bt" (string) the orientation of the text for titles in the left panel flaps
- onExtOpen, onExtContentLoad, onExtClose: "function(){}", (function) collbacks function for each event
- slideTimer: 300, (int) the time in milliseconds for the slide transition