BVB Source Codes

lib-flexible Show makegrid.js Source code

Return Download lib-flexible: download makegrid.js Source code - Download lib-flexible Source code - Type:.js
  1. (function(win, lib){
  2.     var doc = win.document;
  3.     var docEl = doc.documentElement;
  4.     var gridEl = doc.querySelector('meta[name="grid"]');
  5.     var styleEl;
  6.     var flexible = lib.flexible || (lib.flexible = {});
  7.  
  8.     function makeGrid(params) {
  9.         var designWidth = parseFloat(params.designWidth);
  10.         var designUnit = parseFloat(params.designUnit);
  11.         var columnCount = parseFloat(params.columnCount);
  12.         var columnXUnit = parseFloat(params.columnXUnit);
  13.         var gutterXUnit = parseFloat(params.gutterXUnit);
  14.         var edgeXUnit = parseFloat(params.edgeXUnit);
  15.         var className = params.className || 'grid';
  16.  
  17.         if (!(params.designWidth && params.designUnit && params.columnCount && params.columnXUnit && params.gutterXUnit && params.edgeXUnit)) {
  18.             throw new Error('参数错误');
  19.         }
  20.  
  21.         lib.flexible.gridParams = params;
  22.  
  23.         var ratio = designUnit / designWidth * 10;
  24.         var columnWidth = columnXUnit * ratio;
  25.         var gutterWidth = gutterXUnit * ratio;
  26.         var edgeWidth = edgeXUnit * ratio;
  27.  
  28.         var cssText = [
  29.             '.' + className + ' {',
  30.                 'box-sizing:content-box;',
  31.                 'padding-left: ' + edgeWidth + 'rem;',
  32.                 'padding-right: ' + edgeWidth + 'rem;',
  33.                 'margin-left: -' + gutterWidth + 'rem;',
  34.             '}',
  35.  
  36.             '.' + className + ':before,',
  37.             '.' + className + ':after{',
  38.                 'content: " ";',
  39.                 'display: table;',
  40.             '}',
  41.  
  42.             '.' + className + ':after {',
  43.               'clear: both;',
  44.             '}',
  45.  
  46.             '.' + className + ' [class^="col-"] {',
  47.                 'margin-left: ' + gutterWidth + 'rem;',
  48.                 'float: left;',
  49.             '}'
  50.         ];
  51.  
  52.         for (var i = 1; i <= columnCount; i++) {
  53.             var width = columnWidth * i + gutterWidth * (i - 1);
  54.             cssText.push('.' + className + ' .col-' + i + ' {width: ' + width + 'rem;}');
  55.         }
  56.  
  57.         if (styleEl && styleEl.parentNode) {
  58.             styleEl.parentNode.removeChild(styleEl);
  59.         }
  60.         styleEl = doc.createElement('style');
  61.         styleEl.innerHTML = cssText.join('');
  62.         var el = doc.querySelector('head') || docEl.firstElementChild || docEl;
  63.         el.appendChild(styleEl);
  64.     }
  65.  
  66.     var gridMode = {
  67.         '750-12': {designWidth:750,designUnit:6,columnCount:12,columnXUnit:7,gutterXUnit:3,edgeXUnit:4},
  68.         '750-6': {designWidth:750,designUnit:6,columnCount:6,columnXUnit:17,gutterXUnit:3,edgeXUnit:4},
  69.         '640-12': {designWidth:640,designUnit:4,columnCount:12,columnXUnit:11,gutterXUnit:2,edgeXUnit:3},
  70.         '640-6': {designWidth:640,designUnit:4,columnCount:6,columnXUnit:24,gutterXUnit:2,edgeXUnit:3}
  71.     }
  72.     function makeGridMode(modeName) {
  73.         var mode = gridMode[modeName];
  74.         if (mode) {
  75.             makeGrid(mode);
  76.         } else {
  77.             throw new Error('不支持这个预设模式');
  78.         }
  79.     }
  80.  
  81.     if (gridEl) {
  82.         var content = gridEl.getAttribute('content');
  83.         if (content) {
  84.             var reg = /([^=]+)=([\d\.\-]+)/g;
  85.             var matched;
  86.             var params = {};
  87.             while (!!(matched = reg.exec(content))) {
  88.                 params[matched[1]] = matched[2];
  89.             }
  90.  
  91.             if (params.modeName){
  92.                 makeGridMode(params.modeName);
  93.             } else {
  94.                 makeGrid(params);
  95.             }
  96.         }
  97.     }
  98.  
  99.     flexible.makeGrid = makeGrid;
  100.     flexible.makeGridMode = makeGridMode;
  101.  
  102. })(window, window['lib'] || (window['lib'] = {}));
downloadmakegrid.js Source code - Download lib-flexible Source code
Related Source Codes/Software:
awesome-swift - A curated list of awesome Swift frameworks, librar... 2017-01-08
sh - Python process launching http:/... 2017-01-08
beats - 2017-01-08
victory - A collection of composable React components for bu... 2017-01-08
Amethyst - Automatic tiling window manager for macOS a la xmo... 2017-01-08
android-testing - A collection of samples demonstrating different fr... 2017-01-09
Twig - Twig, the flexible, fast, and secure template lang... 2017-01-09
elm-compiler - Compiler for Elm, a functional language for reliab... 2017-01-09
magictools - 2017-01-09
in-view - Get notified when a DOM element enters or exits th... 2017-01-09
gemoji - Emoji images and names. 2017-02-18
gruvbox - Retro groove color scheme for Vim 2017-02-18
office-ui-fabric-core - The front-end framework for building experiences f... 2017-02-18
ZipArchive - ZipArchive is a simple utility class for zipping a... 2017-02-18
spray - A suite of scala libraries for building and consum... 2017-02-18
angular-moment - Moment.JS directives for Angular.JS (timeago and m... 2017-02-18
YYModel - High performance model framework for iOS/OSX. 2017-02-18
PSTCollectionView - Open Source, 100% API compatible replacement of UI... 2017-02-18
subsampling-scale-image-view - Highly configurable, easily extendable view with p... 2017-02-18
Android-SpinKit - Android loading animations http... 2017-02-18

 Back to top