1:73d980e47217
Anton Shestakov <engored@ya.ru>, Sun, 05 May 2013 20:12:26 +0900
3 separate demo pages: minimal css, Bootstrap and Foundation 4.

next change 3:cd531665699b

demo-foundation4.html

Permissions: -rw-r--r--

Other formats: Feeds:
<!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>