mb.jquery.components edited this page Jun 2, 2013 · 50 revisions

jquery.mb.extruder

This is a jQuery component to build a sliding panel where you can load content or navigation structure via Ajax.

go to Demo page
go to Blog page

Dependencies:

  • jquery.hoverIntent.js
  • jquery.metaData.js
  • jquery.mb.flipText.js

JS call:

      
    $("#extruderTop").buildMbExtruder({
          positionFixed:true,
          width:350,
          sensibility:800,
          position:"top", // left, right, bottom
          extruderOpacity:1,
          flapDim:100,
          textOrientation:"bt", // or "tb" (top-bottom or bottom-top)
          onExtOpen:function(){},
          onExtContentLoad:function(){},
          onExtClose:function(){},
          hidePanelsOnClose:true,
          autoCloseTime:0, // 0=never
          slideTimer:300
      });

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 extruder 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 be 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:[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.

The title shown in the flap:

it’s defined in the extruder DIV class attribute as above: {title:‘Our network’,…}. The component use my jquery.mb.flipText.js to manage the orientation of the text in the case of left panels.

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, embedded movies or whatever you want]</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, embedded movies or whatever you want]</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
  • positionFixed:true, (boolean) define if the extruder has a position fixed or not.
  • accordionPanels:true, (boolean) define if panels should close or not when the others open.
  • position:“top”, (string) to define if the slider is on top, left, right or bottom 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
  • hidePanelsOnClose:true, (boolean) define if last subpanel should stay opened or not on next extruder open
  • autoCloseTime:0, (int) define the time in milliseconds the extruder should close on mouse out; 0=never
  • closeOnExternalClick:true, (boolean) define if the extruder should close once clicked outside it
  • closeOnClick:true, (boolean) define if the extruder should close once an internal click action is performed

Methods:

  • $.fn.disableExtruderVoice(): disable an extruder voice; the voice must have an ID.
  • $.fn.enableExtruderVoice(): enable an extruder voice; the voice must have an ID.
  • $.fn.openMbExtruder(boolean): open an extruder from an outer link; the boolean define if the opened extruder should be close once you click anywhere on the page.
  • $.fn.closeMbExtruder(): close an extruder from an outer link.
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.