demo.html at 1c231df1a171

5:1c231df1a171
Anton Shestakov <engored@ya.ru>, Wed, 15 May 2013 18:12:07 +0900
Filter input wrap: ability to reliably set width: 100% without box-sizing.
next change	10:c770f7dc8d69
previous change	3:cd531665699b
demo.html

Permissions: -rw-r--r--
File Latest Revisions Annotate Diff Comparison
Other formats:
JSON Raw
Feeds:
Atom RSS
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Lensy Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="jquery.lensy.js"></script>
    <style id="page-niceties">
      select {
        margin-bottom: 19px;
      }
      .container {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
      }
      .example {
        position: relative;
        margin: 15px 0;
        padding: 39px 19px 0;
        *padding-top: 19px;
        background-color: #fff;
        border: 1px solid #ddd;
        -webkit-border-radius: 4px;
           -moz-border-radius: 4px;
                border-radius: 4px;
      }
      .example:after,
      pre#css:after,
      pre#js:after {
        content: "Example";
        position: absolute;
        top: -1px;
        left: -1px;
        padding: 3px 7px;
        font-size: 12px;
        font-weight: bold;
        background-color: #f5f5f5;
        border: 1px solid #ddd;
        color: #9da0a4;
        -webkit-border-radius: 4px 0 4px 0;
           -moz-border-radius: 4px 0 4px 0;
                border-radius: 4px 0 4px 0;
      }
      pre#css,
      pre#js {
        position: relative;
        font-family: monospace;
        font-size: 13px;
        padding: 29px 8px 8px 8px;
        background-color: #f7f7f9;
        border: 1px solid #e1e1e8;
        -webkit-border-radius: 4px;
           -moz-border-radius: 4px;
                border-radius: 4px;
      }
      #live-select:after {
        content: 'Live clickable <select>';
      }
      pre#css:after {
        content: 'CSS';
      }
      pre#js:after {
        content: 'JS';
      }
    </style>
      
    <style id="lensy-css">
      .lensy-modal {
        color: #eee;
        background: rgba(0, 0, 0, 0.75);
        position: fixed;
        top: 100px;
        right: 30%;
        left: 30%;
        padding: 15px;
        border: 1px solid transparent;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
                border-radius: 5px;
      }
      .lensy-widget {
        list-style: none;
        border: 1px solid #cccccc;
        -webkit-border-radius: 4px;
           -moz-border-radius: 4px;
                border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
           -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        margin: 0 0 20px;
        padding: 0;
        min-height: 28px;
        position: relative;
        *zoom: 1;
      }
      .lensy-widget:before,
      .lensy-widget:after {
        display: table;
        line-height: 0;
        content: "";
      }
      .lensy-widget:after {
        clear: both;
      }
      .lensy-widget .lensy-item {
        margin: 5px 0 0 4px;
      }
      .lensy-widget .lensy-item span {
        color: white;
        padding: 0 2px;
        margin: 0;
        border: 1px solid transparent;
        -webkit-border-radius: 4px;
           -moz-border-radius: 4px;
                border-radius: 4px;
      }
      .lensy-filter-wrap {
        padding-right: 6px;
      }
      .lensy-filter {
        width: 100%;
      }
      .lensy-container {
        list-style: none;
        margin: 0;
        padding: 0;
        *zoom: 1;
      }
      .lensy-container:before,
      .lensy-container:after {
        display: table;
        line-height: 0;
        content: "";
      }
      .lensy-container:after {
        clear: both;
      }
      .lensy-item {
        float: left;
        cursor: pointer;
        margin-top: 5px;
        margin-right: 20px;
      }
      .lensy-item.active {
        box-shadow: 0px 0px 6px 1px white;
      }
      .lensy-button {
        cursor: pointer;
        color: white;
      }
      .lensy-button:hover {
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <section>
        <div class="page-header">
          <h2>Lensy Demo</h2>
        </div>
        <div class="example">
          <form>
            <select multiple name="colors">
              <option selected>#0e90d2</option>
              <option>#4bb1cf</option>
              <option>#5eb95e</option>
              <option>#faa732</option>
              <option selected>#dd514c</option>
            </select>
          </form>
          <script id="lensy-js">
            $(function() {
              $('select').lensy({
                itemFn: function(value, text) {
                  var colorbox = $('<div>').css({width: '64px', height: '64px', background: text});
                  return $('<div>')
                    .text(text)
                    .prepend(colorbox);
                },
                widgetItemFn: function(value, text) {
                  // If you don't define this function,
                  // itemFn will be used for widget items.
                  return $('<span>')
                    .css({background: text})
                    .text(value);
                }
              });
            });
          </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>
        </div>
        <div id="live-select" class="example"></div>
        <pre id="css" class="prettyprint lang-css"></pre>
        <pre id="js" class="prettyprint lang-js"></pre>
      </section>
    </div>
    <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
  </body>
</html>