1:73d980e47217 · jquery-lensy

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/demo-bootstrap.html	Sun May 05 20:12:26 2013 +0900
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Lensy with Bootstrap Styles</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
+    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.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">
+      form {
+        margin-bottom: 0;
+      }
+      .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: 39px 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 {
+        padding: 15px;
+      }
+      .lensy-widget {
+        display: inline-block;
+      }
+      .lensy-item {
+        cursor: pointer;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <section>
+        <div class="page-header">
+          <h2>Lensy with Bootstrap Styles</h2>
+        </div>
+        <div class="example">
+          <form>
+            <select multiple name="colors">
+              <option>#0e90d2</option>
+              <option>#4bb1cf</option>
+              <option selected>#5eb95e</option>
+              <option selected>#faa732</option>
+              <option>#dd514c</option>
+            </select>
+          </form>
+          <script id="lensy-js">
+            $(function() {
+              $('select').lensy({
+                modalClass: 'lensy-modal modal',
+                containerClass: 'inline',
+                widgetClass: 'lensy-widget inline well well-small',
+                closeButtonClass: 'btn',
+                itemActiveClass: 'thumbnail',
+                itemFn: function(value) {
+                  var colorbox = $('<div>').css({width: '64px', height: '64px', background: value});
+                  return $('<div>')
+                    .text(value)
+                    .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>
+        </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>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/demo-foundation4.html	Sun May 05 20:12:26 2013 +0900
@@ -0,0 +1,118 @@
+<!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() {
+              $('select').lensy({
+                modalClass: 'lensy-modal reveal-modal open',
+                containerClass: 'inline-list',
+                widgetClass: 'lensy-widget inline-list',
+                closeButtonClass: 'button',
+                itemActiveClass: 'th',
+                itemFn: function(value) {
+                  var colorbox = $('<div>').css({width: '64px', height: '64px', background: value});
+                  return $('<div>')
+                    .text(value)
+                    .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>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/demo.html	Sun May 05 20:12:26 2013 +0900
@@ -0,0 +1,206 @@
+<!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 {
+        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) {
+                  var colorbox = $('<div>').css({width: '64px', height: '64px', background: value});
+                  return $('<div>')
+                    .text(value)
+                    .prepend(colorbox);
+                },
+                widgetItemFn: function(value) {
+                  // If you don't define this function,
+                  // itemFn will be used for widget items.
+                  return $('<span>')
+                    .css({background: value})
+                    .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>

child	2:612d0821dd74
parent	0:b09cdd220793

demo-bootstrap.html		file \| annotate \| diff \| comparison \| revisions
demo-foundation4.html		file \| annotate \| diff \| comparison \| revisions
demo.html		file \| annotate \| diff \| comparison \| revisions