Home

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

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.