Meta100 Blog
Designing Fun.
RSS  |  Archive    

mGuides

A jQuery plugin that extends jQueryUI dragable and resizable. This plugin adds guides for positioning dragable and resizable elements.


Requires: jQuery & jQueryUI.


Install: Add the line after jQueryUI.

<script type="text/javascript" src="http://plugins.meta100.com/mguides/javascripts/mGuidesUI_min.js" charset="UTF-8"></script>


Or download from https://github.com/meta100/mGuides.

Use: Adds the following options to jQueryUI draggable and resizable options (http://jqueryui.com/demos/):
guide - Default is true. Since you are loading the script it we will assume you want it to run.
guidecolor - The color of the guide lines must be an array with four colors. Default guidecolor array is [‘blue’, ‘red’, ‘green’, ‘yellow’]. First color is side guide, second is side outer padding guide, third is center align guide and fourth color is inner padding guide.
guidestyle - Default is ‘dashed’ can be any css border style
guideinner - Default false. The jQuery selector of the element you wish to have inner padding guides.
guidecenter - Default true. Set to false if you do not wish to have center guides for alignment.
guidepadding - Default 0. Set to the number of pixels you wish to have the inner and padding guides to be positioned from the edges of the elements.
snapTolerance - Default is 20. Used for the max distance from the guide the elements edge has to be for it to snap to the guide.



Example:

$(".draggable").draggable({guides: true, guidepadding: 20, guideinner: '.demo'}).resizable({handles: 'n, e, s, w', guides: true, guidepadding: 20, guideinner: '.demo'});

mGuides

Notes

  1. meta100 posted this

  5:23 pm, by meta100, [ 17 notes ] Comments