├── README.md └── src └── jqdrawbsgrid.js /README.md: -------------------------------------------------------------------------------- 1 | jQDrawBootstrapGrid 2 | =================== 3 | 4 | A simple jQuery plugin that draws grid columns to a twitter bootstrap layout. Working better with non fluid layouts (container-fluid, row fluid). 5 | 6 | 7 | Defaults: 8 | -------- 9 | + By default it automatically adds a "show/hide grid" button and a key listener on the key 'l' (a small L that is). 10 | + The preview grid also by default starts in hidden mode 11 | 12 | 13 | Demo 14 | ---- 15 | The github pages feature a simple demo: http://plozi.github.com/jQDrawBootstrapGrid/example/ex.html 16 | 17 | 18 | Screenshot 19 | ---------- 20 | screenshot of the demo site 21 | 22 | 23 | Requirements 24 | ------------ 25 | + Twitter Bootstrap 26 | 27 | + JQuery > 1.7.* 28 | 29 | Usage 30 | ----- 31 | After adding the javascript source to your document, 32 | apply the plugin to the bootstrap ".container": 33 | 34 | ~~~~~~ 35 | jQuery(".container").drawBootstrapGrid(); 36 | ~~~~~~ 37 | 38 | Options 39 | ------- 40 | The default settings are: 41 | ~~~~~~ 42 | { 43 | 'columns':12, //define how much columns to draw 44 | 'singleColumnName': 'span1', //the css class name which you want to add for one column 45 | 'color':'lightgrey', //each columns background color 46 | 'opacity':0.3, //opacity of the rendered grid 47 | 'buttonLabel': 'Show/Hide Grid', //the label for the button 48 | 'startHidden':true, //if we want the grid to be shown initially 49 | 'includeMargin': false, //if we include the original columns left margin 50 | 'hiddenClassName': 'hidden', //the css class name used in your bootstrap to hide elements -> visibility: hidden 51 | 'keybinding': 'l' //hide/show grid on pressing this key 52 | } 53 | ~~~~~~ 54 | 55 | Support and Contribution 56 | ------------------------ 57 | This little project is highly encouraging YOU to work on it! 58 | 59 | Have a question, or found an issue? Just create a issue: https://github.com/plozi/jQDrawBootstrapGrid/issues 60 | 61 | 62 | Author 63 | ------- 64 | 65 | **Christian Polzer** 66 | 67 | + chris@hai-fai.de 68 | + http://twitter.com/polzifer 69 | + http://github.com/plozi 70 | + http://hai-fai.de 71 | 72 | 73 | 74 | Copyright and License 75 | --------------------- 76 | 77 | The jQDrawBootstrapGrid Plugin is licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) licenses. 78 | -------------------------------------------------------------------------------- /src/jqdrawbsgrid.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created with JetBrains WebStorm. 3 | * User: polzer 4 | * Date: 11.10.12 5 | * Time: 11:17 6 | * 7 | * Description: 8 | * A simple jQuery plugin to draw single grid lines. 9 | * Usually applied to the bootstrap "container": 10 | * jQuery(".container").drawBootstrapGrid(); 11 | * 12 | * Default settings: 13 | * { 14 | * 'columns':12, //define how much columns to draw 15 | * 'singleColumnName': 'span1', //the css class name which you want to add for one column 16 | * 'color':'lightgrey', //each columns background color 17 | * 'opacity':0.3, //opacity of the rendered grid 18 | * 'buttonLabel': 'Show/Hide Grid', //the label for the button 19 | * 'startHidden':true, //if we want the grid to be shown initially 20 | * 'includeMargin': false, //if we include the original columns left margin 21 | * 'hiddenClassName': 'hidden', //the css class name used in your bootstrap to hide elements -> visibility: hidden 22 | * 'keybinding': 'l' //hide/show grid on pressing this key 23 | * } 24 | * 25 | * Fork me at github: https://github.com/plozi/jQDrawBootstrapGrid 26 | */ 27 | 28 | ;(function ($) { 29 | 30 | $.fn.drawBootstrapGrid = function (options) { 31 | 32 | // Create some defaults, extending them with any options that were provided 33 | var settings = $.extend({ 34 | 'columns':12, 35 | 'singleColumnName': 'span1', 36 | 'color':'lightgrey', 37 | 'opacity':0.4, 38 | 'buttonLabel': 'Show/Hide Grid', 39 | 'startHidden': true, 40 | 'includeMargin': false, 41 | 'hiddenClassName': 'invisible', 42 | 'keybinding': 'l' 43 | }, options) 44 | 45 | return this.each(function () { 46 | var $this = jQuery(this), 47 | i = 0, 48 | height = $this.innerHeight() + 'px', 49 | 50 | leftmargin = jQuery('[class*=\'span\']').css('marginLeft'), 51 | $gridEl = jQuery('
').addClass('grid') 52 | .css("position", "absolute") 53 | .css("top", '0') 54 | .css("z-index", '-20') 55 | if(settings.includeMargin){ 56 | $gridEl.css("margin-left", leftmargin) 57 | } 58 | $showHideButton = jQuery('') 59 | .addClass("btn btn-primary") 60 | .css('position','fixed') 61 | .css('top', '2em') 62 | .css('right', '20px') 63 | .css('margin','10px') 64 | .css('z-index', '2000') 65 | .text(settings.buttonLabel) 66 | .click(function(){ 67 | jQuery($gridEl).toggleClass(settings.hiddenClassName) 68 | }) 69 | 70 | $(document).bind('keydown', function(ev) { 71 | if (settings.keybinding.toUpperCase() === String.fromCharCode(ev.which)) { 72 | jQuery($gridEl).toggleClass(settings.hiddenClassName); 73 | } 74 | }) 75 | 76 | if(settings.startHidden){ 77 | $gridEl.addClass(settings.hiddenClassName) 78 | } 79 | $this.append($gridEl) 80 | $this.append($showHideButton) 81 | 82 | while (i < settings.columns) { 83 | $gridEl.append( 84 | jQuery('
') 85 | .addClass(settings.singleColumnName) 86 | .css('background', settings.color) 87 | .css('opacity', settings.opacity) 88 | .css('height', height) 89 | ) 90 | i++ 91 | } 92 | }); 93 | 94 | }; 95 | 96 | })(jQuery); 97 | --------------------------------------------------------------------------------