siftal
Version:
CSS Framework, not bad ;)
115 lines (83 loc) • 3.6 kB
HTML
<html lang="en" dir="ltr">
<head>
<title>Siftal</title>
<meta charset="utf-8">
<meta name="description" content="Siftal, a simple CSS framework with usefull tools for Ermile projects">
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0 maximum-scale=1.2, minimal-ui"/>
<link rel="shortcut icon" href="../dist/images/siftal/siftal.ico">
<link rel="icon" href="../dist/images/siftal/siftal.png" type="image/png">
<link rel="stylesheet" href="../dist/css/siftal.css">
<style>
body{background-color:#eee;}
</style>
</head>
<body class="ltr">
<div class="cn">
<div class="tbox">
<h2>ClockPicker</h2>
<p>Easily add time picker to your project</p>
</div>
<div class="cbox">
<h3>Examples</h3>
<div class="example">
<p><a href="http://weareoutman.github.io/clockpicker/">Read more info and example about clockpicker</a></p>
<h4>Simple</h4>
<div class="input clockpicker w300">
<input type="text" class="input" value="09:30">
</div>
<h4>Simple without default value</h4>
<div class="input clockpicker w300">
<input type="text" class="input" placeholder="choose clock" value="">
</div>
<h4>Simple with addon</h4>
<div class="input clockpicker w300">
<input type="text" value="09:30">
<label class="addon sf-filter"></label>
</div>
<h4>Place at right, align the arrow to top, without auto close</h4>
<div class="input clockpicker w300" data-placement="right" data-align="top" data-autoclose="false" data-donetext="Ok">
<input type="text" value="16:40">
</div>
<h4>Place at right, align the arrow to bottom</h4>
<div class="input clockpicker w300" data-placement="right" data-align="bottom">
<input type="text" placeholder="Choose Time">
</div>
<h4>Place at left, align the arrow to top</h4>
<div class="input clockpicker w300" data-placement="left" data-align="top">
<input type="text" value="16:40">
</div>
<h4>Place at right, align the arrow to bottom</h4>
<div class="input clockpicker w300" data-placement="left" data-align="bottom">
<input type="text" value="16:40">
</div>
<h4>Place at top, alighn the arrow to right</h4>
<div class="input clockpicker w300" data-placement="top" data-align="right">
<input type="text" value="16:40">
</div>
<h4>Place at top, alighn the arrow to left</h4>
<div class="input clockpicker w300" data-placement="top" data-align="left">
<input type="text" value="16:40">
</div>
<h4>Place at bottom, alighn the arrow to right</h4>
<div class="input clockpicker w300" data-placement="bottom" data-align="right">
<input type="text" value="16:40">
</div>
<h4>Place at bottom, alighn the arrow to left</h4>
<div class="input clockpicker w300" data-placement="bottom" data-align="left">
<input type="text" value="16:40">
</div>
<h4>Set options in javascript, instead of data-*</h4>
<div class="input clockpicker w300" data-placement="top" data-align="left">
<input type="text" class="input" value="20:00">
</div>
<h4>Callbacks</h4>
<div class="input clockpicker clockpicker-with-callbacks">
<input type="text" value="10:10">
</div>
</div>
</div>
</div>
<script src="../dist/js/siftal.min.js"></script>
</body>
</html>