Gesture-based Context Actions Library For jQuery - reveal

Reveal.js implements gesture-based context actions for list elements, cards, and menus. It can be used to embed context actions and dialogues that can be revealed by performing a simple gesture with their mouse, touchpad, or fingers. Reveal is good when you need to provide users with a lot of context actions, but don't want to clutter the user interface. All actions remain hidden unless user makes a specific gesture.

Basic Usage:

1. Load jQuery library together with reveal.css and reveal.js in the document.

<link href="lib/reveal.css" rel="stylesheet"> 
<script src="lib/reveal.js"></script>

2. Call the plugin on the target element and specify the context actions using revealContext() function.

$(".example").revealContext({ 

  // actions argument

},
{ 

  // alter the default behaviour and visual properties of context actions

});

3. All the actions and callbacks.

$(".example-context").revealContext({ 

  // actions
  "left" : "Review", 
  "right" : ["Edit", "Remove"],
  "top" : ["Yummy", "Delicious"],
  "bottom" : ["Yummy", "Delicious"]

},
{ 
  // used while appending a CSS-class with an active action name to the element.
  "action_css_prefix" : "reveal-action-", 

  // Called when one of context actions for the element was selected. 
  "complete" : function() {},

  // Called when no context action was selected while performing a gesture.
  "cancle" : function() {},

  // Determines whether the element was dragged far enough to call the complete function (if exists). 
  "activation_threshold" : 0.4,

  // Maximum size (width or height) of the container for context actions embedded into the element. 
  "offscreen_element_size" : 0.5,

  // Maximum size (width or height) of a single context action embedded into the element.  
  "action_element_size" : 0.5

});

---

This awesome jQuery plugin is developed by mmth. For more Advanced Usages, please check the demo page or visit the official website.