demo-foundation4.html at 37c62f83c546

9:37c62f83c546
Anton Shestakov <engored@ya.ru>, Sun, 17 Nov 2013 14:59:57 +0900
Set classes via lensy defaults.
next change	10:c770f7dc8d69
previous change	3:cd531665699b
demo-foundation4.html

Permissions: -rw-r--r--
File Latest Revisions Annotate Diff Comparison
Other formats:
JSON Raw
Feeds:
Atom RSS
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lensy with Foundation 4 Styles</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/4.1.2/css/normalize.min.css">
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/4.1.2/css/foundation.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/4.1.2/js/vendor/custom.modernizr.min.js"></script>
    <script src="jquery.lensy.js"></script>
    <style id="page-niceties">
      #live-select,
      pre#css,
      pre#js {
        position: relative;
        font-family: monospace;
        font-size: 0.9em;
        line-height: 1.4em;
        padding: 12px;
        background-color: #eee;
        border: 1px solid #cccccc;
        margin-bottom: 16px;
      }
      #live-select:before,
      pre#css:before,
      pre#js:before {
        position: absolute;
        top: 6px;
        right: 6px;
        display: block;
        color: #ccc;
        font-size: .75em;
      }
      #live-select:before {
        content: 'Live clickable <select>';
      }
      pre#css:before {
        content: 'CSS';
      }
      pre#js:before {
        content: 'JS';
      }
    </style>
    <style id="lensy-css">
      .lensy-modal {
        display: block;
        visibility: visible;
        width: 40%;
        margin-left: -20%;
      }
      .lensy-widget {
        background-color: white;
        border: 1px solid #cccccc;
        -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
        font-size: 0.875em;
        margin: 0 0 1em 0;
        padding: 0.5em;
      }
      .lensy-widget .lensy-item {
        margin: 3px 3px 0;
      }
      .lensy-item {
        cursor: pointer;
        margin: 5px;
      }
    </style>
  </head>
  <body class="antialiased">
    <div class="row">
      <div class="small-12 columns">
        <h2>Lensy with Foundation 4 Styles</h2>
        <hr>
        <section>
          <form>
            <select multiple name="colors" style="width: 200px;">
              <option selected>#0e90d2</option>
              <option selected>#4bb1cf</option>
              <option>#5eb95e</option>
              <option>#faa732</option>
              <option>#dd514c</option>
            </select>
          </form>
          <script id="lensy-js">
            $(function() {
              $.extend($.fn.lensy.defaults, {
                modalClass: 'lensy-modal reveal-modal open',
                containerClass: 'inline-list',
                widgetClass: 'lensy-widget inline-list',
                closeButtonClass: 'button',
                itemActiveClass: 'th'
              });
              $('select').lensy({
                itemFn: function(value, text) {
                  var colorbox = $('<div>').css({width: '64px', height: '64px', background: text});
                  return $('<div>')
                    .text(text)
                    .prepend(colorbox);
                }
              });
            });
          </script>
          <script>
            $(function() {
              $('select').appendTo('#live-select').show();
              $('pre#css').text($('#lensy-css').text().trim().replace(/^ {6}/gm, '').replace(/}/g, '}\n'));
              $('pre#js').text($('#lensy-js').text().trim().replace(/^ {12}/gm, ''));
            });
          </script>
        </section>
        <div id="live-select"></div>
        <pre id="css" class="prettyprint lang-css"></pre>
        <pre id="js" class="prettyprint lang-js"></pre>
      </div>
    </div>
    <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
  </body>
</html>