BVB Source Codes

lib-flexible Show index.html Source code

Return Download lib-flexible: download index.html Source code - Download lib-flexible Source code - Type:.html
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta content="yes" name="apple-mobile-web-app-capable" />
  6.     <meta content="yes" name="apple-touch-fullscreen" />
  7.     <meta content="telephone=no,email=no" name="format-detection" />
  8.     <meta content="maximum-dpr=2" name="flexible" />
  9.     <meta content="modeName=750-12" name="grid" />
  10.     <script src="build/flexible_css.debug.js"></script>
  11.     <script src="build/flexible.debug.js"></script>
  12.     <script src="build/makegrid.debug.js"></script>
  13.     <title>lib.flexible - 移动端自适应方案</title>
  14.     <style type="text/css">
  15.     html {
  16.         width: 100%;
  17.     }
  18.  
  19.     .grid > div,.grid-thin > div,.grid-fat > div {
  20.         margin-bottom: 0.3rem;
  21.         text-align: center;
  22.         color: #fff;
  23.     }
  24.    
  25.     div[class^="col-"] > div {
  26.         margin-top: 0.04rem;
  27.     }
  28.  
  29.     .grid>div {
  30.         background-color: rgba(242,234,255,0.8);
  31.         background-color: rgba(96,125,255,0.85);
  32.     }
  33.     .grid-thin>div {
  34.         background-color: rgba(241,149,36,0.85);
  35.     }
  36.     .grid-fat>div {
  37.         background-color: rgba(228,80,66,0.85);
  38.         outline: 1px dashed #333;
  39.     }
  40.     .grid-fat-wrap .bg>div {
  41.         outline: 1px solid #fff;
  42.     }
  43.     .grid-thin-wrap, .grid-wrap, .grid-fat-wrap {
  44.         position: relative;
  45.         background-color: rgba(241,149,36, 0.2);
  46.         background-color: rgba(0,0,0, 0.05);
  47.         padding-top: 0.4rem;
  48.     }
  49.  
  50.     .grid-thin-wrap .bg,.grid-wrap .bg,.grid-fat-wrap .bg {
  51.         position: absolute;
  52.         z-index: -1;
  53.         top: 0;
  54.     }
  55.  
  56.     .grid-thin-wrap .bg > div[class^="col-"],
  57.     .grid-wrap .bg > div[class^="col-"],
  58.     .grid-fat-wrap .bg > div[class^="col-"]{
  59.         height: 14.7rem;
  60.     }
  61.  
  62.     .grid-thin-wrap .bg>div,
  63.     .grid-wrap .bg>div,
  64.     .grid-fat-wrap .bg>div{
  65.         background-color: rgba(0,0,0, 0.15);
  66.     }
  67.  
  68.     .global button{
  69.         width: 3.2rem;
  70.         padding: 0.1rem 0;
  71.         margin: 0.1rem;
  72.         font-size: inherit;
  73.     }
  74.  
  75.     .grid-config {
  76.         margin-bottom: 0.2rem;
  77.     }
  78.  
  79.     .grid-config label{
  80.         display: inline-block;
  81.         padding: 0.4rem 0;
  82.         width: 5rem;
  83.         text-align: right;
  84.         font-size: inherit;
  85.     }
  86.  
  87.     .grid-config input {
  88.         display: inline-block;
  89.         font-size: inherit;
  90.     }
  91.  
  92.     .grid-config button {
  93.         display: block;
  94.         width: 2rem;
  95.         padding: 0.1rem;
  96.         font-size: inherit;
  97.         margin: auto;
  98.     }
  99.  
  100.     [data-dpr="1"] .grid-config, [data-dpr="1"] .global{
  101.         font-size: 12px;
  102.     }
  103.     [data-dpr="2"] .grid-config, [data-dpr="2"] .global{
  104.         font-size: 24px;
  105.     }
  106.     [data-dpr="3"] .grid-config, [data-dpr="3"] .global{
  107.         font-size: 36px;
  108.     }
  109.     </style>
  110. </head>
  111. <body>
  112. <div class="global">
  113.     <button data-grid-mode="750-12">750/12列方案</button>
  114.     <button data-grid-mode="750-6">750/6列方案</button>
  115.     <button data-grid-mode="640-12">640/12列方案</button>
  116.     <button data-grid-mode="640-6">640/6列方案</button>
  117. </div>
  118. <div class="grid-config">
  119.     <div><label>设计稿宽度(单位为:px)</label><input name="designWidth" value="750"></div>
  120.     <div><label>最小单位(单位为:px)</label><input name="designUnit" value="6"></div>
  121.     <div><label>列数(单位为:列)</label><input name="columnCount" value="12"></div>
  122.     <div><label>列宽(单位为:a)</label><input name="columnXUnit" value="7"></div>
  123.     <div><label>列间距(单位为:a)</label><input name="gutterXUnit" value="3"></div>
  124.     <div><label>边距(单位为:a)</label><input name="edgeXUnit" value="4"></div>
  125.     <div><button id="render">渲染</button></div>
  126. </div>
  127. <div class="grid-wrap"></div>
  128. <script type="text/template" id="grid-html">
  129.     <div class="grid">
  130.         <div class="col-2"><div class="info"></div><div class="a"></div></div>
  131.         <div class="col-2"><div class="info"></div><div class="a"></div></div>
  132.         <div class="col-2"><div class="info"></div><div class="a"></div></div>
  133.         <div class="col-2"><div class="info"></div><div class="a"></div></div>
  134.         <div class="col-2"><div class="info"></div><div class="a"></div></div>
  135.         <div class="col-2"><div class="info"></div><div class="a"></div></div>
  136.     </div>
  137.     <div class="grid">
  138.         <div class="col-3"><div class="info"></div><div class="a"></div></div>
  139.         <div class="col-3"><div class="info"></div><div class="a"></div></div>
  140.         <div class="col-3"><div class="info"></div><div class="a"></div></div>
  141.         <div class="col-3"><div class="info"></div><div class="a"></div></div>
  142.     </div>
  143.  
  144.     <div class="grid">
  145.         <div class="col-4"><div class="info"></div><div class="a"></div></div>
  146.         <div class="col-4"><div class="info"></div><div class="a"></div></div>
  147.         <div class="col-4"><div class="info"></div><div class="a"></div></div>
  148.     </div>
  149.  
  150.     <div class="grid">
  151.         <div class="col-6"><div class="info"></div><div class="a"></div></div>
  152.         <div class="col-6"><div class="info"></div><div class="a"></div></div>
  153.     </div>
  154.  
  155.     <div class="grid">
  156.         <div class="col-12"><div class="info"></div><div class="a"></div></div>
  157.     </div>
  158.  
  159.     <div class="grid">
  160.         <div class="col-11"><div class="info"></div><div class="a"></div></div>
  161.         <div class="col-1"><div class="info"></div><div class="a"></div></div>
  162.     </div>
  163.  
  164.     <div class="grid">
  165.         <div class="col-10"><div class="info"></div><div class="a"></div></div>
  166.         <div class="col-2"><div class="info"></div><div class="a"></div></div>
  167.     </div>
  168.    
  169.     <div class="grid">
  170.         <div class="col-5"><div class="info"></div><div class="a"></div></div>
  171.         <div class="col-5"><div class="info"></div><div class="a"></div></div>
  172.         <div class="col-2"><div class="info"></div><div class="a"></div></div>
  173.     </div>
  174.     <div class="grid">
  175.         <div class="col-9"><div class="info"></div><div class="a"></div></div>
  176.         <div class="col-3"><div class="info"></div><div class="a"></div></div>
  177.     </div>
  178.     <div class="grid">
  179.         <div class="col-8"><div class="info"></div><div class="a"></div></div>
  180.         <div class="col-4"><div class="info"></div><div class="a"></div></div>
  181.     </div>
  182.     <div class="grid">
  183.         <div class="col-7"><div class="info"></div><div class="a"></div></div>
  184.         <div class="col-5"><div class="info"></div><div class="a"></div></div>
  185.     </div>
  186.     <div class="grid bg">
  187.         <div class="col-1"></div>
  188.         <div class="col-1"></div>
  189.         <div class="col-1"></div>
  190.         <div class="col-1"></div>
  191.         <div class="col-1"></div>
  192.         <div class="col-1"></div>
  193.         <div class="col-1"></div>
  194.         <div class="col-1"></div>
  195.         <div class="col-1"></div>
  196.         <div class="col-1"></div>
  197.         <div class="col-1"></div>
  198.         <div class="col-1"></div>
  199.     </div>
  200. </script>
  201. <script>
  202.     function fillHtml() {
  203.         var html = document.querySelector('#grid-html').innerHTML;
  204.         var wrap = document.querySelector('.grid-wrap');
  205.         wrap.innerHTML = html;
  206.         var params = lib.flexible.gridParams;
  207.  
  208.         for (var i = 1; i <= params.columnCount; i++) {
  209.            (function(j) {
  210.                Array.prototype.slice.call(wrap.querySelectorAll('.grid .col-' + j)).forEach(function(el) {
  211.                    var info = el.querySelector('.info');
  212.                    var a = el.querySelector('.a');
  213.                    if (info) {
  214.                        info.innerHTML = 'c' + j;
  215.                    }
  216.                    if (a) {
  217.                        a.innerHTML = (params.columnXUnit * j + params.gutterXUnit * (j - 1)) + 'a';
  218.                    }
  219.                });
  220.            })(i);
  221.        }
  222.    }
  223.  
  224.    document.querySelector('.global').addEventListener('click', function(e) {
  225.        var target = e.target;
  226.        if (target.tagName.toUpperCase() === 'BUTTON') {
  227.            var modeName = target.getAttribute('data-grid-mode');
  228.  
  229.            lib.flexible.makeGridMode(modeName);
  230.            var params = lib.flexible.gridParams;
  231.            for (var key in params) {
  232.                document.querySelector('.grid-config input[name="' + key+ '"]').value = params[key];
  233.            }
  234.            fillHtml();
  235.        }
  236.    });
  237.  
  238.    document.querySelector('#render').addEventListener('click', function() {
  239.        var designWidth = parseFloat(document.querySelector('.grid-config input[name="designWidth"]').value);
  240.        var designUnit = parseFloat(document.querySelector('.grid-config input[name="designUnit"]').value);
  241.        var columnCount = parseFloat(document.querySelector('.grid-config input[name="columnCount"]').value);
  242.        var columnXUnit = parseFloat(document.querySelector('.grid-config input[name="columnXUnit"]').value);
  243.        var gutterXUnit = parseFloat(document.querySelector('.grid-config input[name="gutterXUnit"]').value);
  244.        var edgeXUnit = parseFloat(document.querySelector('.grid-config input[name="edgeXUnit"]').value);
  245.  
  246.        lib.flexible.makeGrid({
  247.            designWidth: designWidth,
  248.            designUnit: designUnit,
  249.            columnCount: columnCount,
  250.            columnXUnit: columnXUnit,
  251.            gutterXUnit: gutterXUnit,
  252.            edgeXUnit: edgeXUnit
  253.        });
  254.        fillHtml();
  255.    }, false);
  256.  
  257.    fillHtml();
  258. </script>
  259. </body>
  260. </html>
  261.  
  262.  
downloadindex.html 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