Permalink
Browse files

Folder structure + zepto compatibility

  • Loading branch information...
1 parent 14bc421 commit a6d35ab00806bf8c0dde5a69b2b5e841ce03757b @dioslaska dioslaska committed Apr 25, 2012
View
@@ -1,2 +1,7 @@
.hg/*
-.hgignore
+.hgignore
+.gitignore
+compiler.jar
+yuicompressor.jar
+minify.bat
+mobiscroll.full.*
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
View
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+
+ <title>Mobiscroll</title>
+
+ <script src="http://zeptojs.com/zepto.js"></script>
+
+ <script src="js/mobiscroll.zepto.js" type="text/javascript"></script>
+ <script src="js/mobiscroll.core.js" type="text/javascript"></script>
+ <script src="js/mobiscroll.datetime.js" type="text/javascript"></script>
+ <script src="js/mobiscroll.select.js" type="text/javascript"></script>
+ <script src="js/mobiscroll.ios.js" type="text/javascript"></script>
+ <script src="js/mobiscroll.android.js" type="text/javascript"></script>
+ <script src="js/mobiscroll.android-ics.js" type="text/javascript"></script>
+
+ <link href="css/mobiscroll.core.css" rel="stylesheet" type="text/css" />
+ <link href="css/mobiscroll.android.css" rel="stylesheet" type="text/css" />
+ <link href="css/mobiscroll.android-ics.css" rel="stylesheet" type="text/css" />
+ <link href="css/mobiscroll.ios.css" rel="stylesheet" type="text/css" />
+ <link href="css/mobiscroll.sense-ui.css" rel="stylesheet" type="text/css" />
+
+ <style type="text/css">
+ body {
+ font-family: arial, verdana, sans-serif;
+ font-size: 12px;
+ padding: 0;
+ margin: 0;
+ background: #F3F3F3;
+ }
+ .text-input {
+ width: 100%;
+ padding: 5px;
+ margin: 5px 0;
+ border: 1px solid #aaa;
+ box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
+ border-radius: 5px;
+ -webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
+ -webkit-border-radius: 5px;
+ }
+ .header {
+ border: 1px solid #333;
+ background: #111;
+ color: white;
+ font-weight: bold;
+ text-shadow: 0 -1px 1px black;
+ background-image: -webkit-gradient(linear,left top,left bottom,from(#3C3C3C),to(#111));
+ background-image: -webkit-linear-gradient(#3C3C3C,#111);
+ background-image: -moz-linear-gradient(#3C3C3C,#111);
+ background-image: -ms-linear-gradient(#3C3C3C,#111);
+ background-image: -o-linear-gradient(#3C3C3C,#111);
+ background-image: linear-gradient(#3C3C3C,#111);
+ }
+ .header h1 {
+ text-align: center;
+ font-size: 16px;
+ margin: .6em 0;
+ padding: 0;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+ .content {
+ padding: 15px;
+ background: #fff;
+ }
+ .fieldcontain {
+ padding-right: 12px;
+ }
+ .inline > div {
+ text-align: center;
+ }
+ #buttons {
+ text-align: left;
+ }
+ #buttons input {
+ margin: 0;
+ }
+ </style>
+
+ <script type="text/javascript">
+ $(function () {
+ var curr = new Date().getFullYear();
+ var opt = {
+ 'date': {
+ preset: 'date'
+ },
+ 'datetime': {
+ preset: 'datetime',
+ minDate: new Date(2012, 3, 10, 9, 22),
+ maxDate: new Date(2014, 7, 30, 15, 44),
+ stepMinute: 5
+ },
+ 'time': {
+ preset: 'time'
+ },
+ 'credit': {
+ dateOrder: 'mmyy',
+ dateFormat: 'mm/yy',
+ startYear: curr,
+ endYear: curr + 10,
+ width: 100
+ },
+ 'btn': {
+ showOnFocus: false
+ },
+ 'inline': {
+ display: 'inline'
+ }
+ }
+
+ $('select').scroller({ preset: 'select', inputClass: 'text-input' }).on('change', function() {
+ $('#test').val('').scroller('destroy').scroller($.extend(opt[$('#demo').val()], { theme: $('#theme').val(), mode: $('#mode').val() }));
+ $('#demo').val() == 'btn' ? $('#buttons').show() : $('#buttons').hide();
+ });
+
+ $('#demo').trigger('change');
+
+ $('#trigger').click(function() {
+ $('#test').scroller('show');
+ return false;
+ });
+
+ $('#clear').click(function() {
+ $('#test').val('');
+ return false;
+ });
+ });
+ </script>
+</head>
+
+<body>
+ <div class="page">
+ <div class="header">
+ <h1>Mobiscroll</h1>
+ </div>
+
+ <div class="content">
+ <form id="testform">
+ <div class="fieldcontain">
+ <label for="theme">Theme</label>
+ <select name="theme" id="theme">
+ <option value="default">Default</option>
+ <option value="android-ics">Android ICS</option>
+ <option value="android-ics light">Android ICS Light</option>
+ <option value="android">Android</option>
+ <option value="sense-ui">Sense UI</option>
+ <option value="ios">iOS</option>
+ </select>
+ </div>
+ <div class="fieldcontain">
+ <label for="mode">Mode</label>
+ <select name="mode" id="mode">
+ <option value="scroller">Scroller</option>
+ <option value="clickpick">Clickpick</option>
+ <option value="mixed">Mixed</option>
+ </select>
+ </div>
+ <div class="fieldcontain">
+ <label for="demo">Demo</label>
+ <select name="demo" id="demo">
+ <option value="date" selected>Date</option>
+ <option value="datetime">Datetime</option>
+ <option value="time">Time</option>
+ <option value="credit">Credit card expiration</option>
+ <option value="btn">Show/Clear buttons</option>
+ <option value="inline">Inline</option>
+ </select>
+ </div>
+ <div class="fieldcontain inline">
+ <label for="test">Click here to try</label>
+ <input type="text" name="test" id="test" class="text-input" />
+ <div id="buttons">
+ <input type="submit" value="Choose Date" id="trigger" />
+ <input type="submit" value="Clear" id="clear" />
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+</body>
+</html>
View
@@ -3,31 +3,27 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
- <meta name="description" content="Mobiscroll is a scroller style date/time picker optimized for touch devices such as iPhone, iPad, Android, to easily enter date and/or time. It's easily customizable and comes with very nice pre-defined themes: iOS, Android, Sense UI, Default."/>
- <meta name="keywords" content="jQuery, JavaScript, datepicker, timepicker, touchscreen, Webkit, android, iPhone, iPad, webapps, GalaxyTab, dropdown, mobile, wheel, senseui, wheel, barrel, scroller-style, clickpick"/>
<title>Mobiscroll</title>
- <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
-
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
- <script src="mobiscroll.core.js" type="text/javascript"></script>
- <script src="mobiscroll.datetime.js" type="text/javascript"></script>
- <script src="mobiscroll.select.js" type="text/javascript"></script>
- <script src="mobiscroll.jqm.js" type="text/javascript"></script>
- <script src="mobiscroll.ios.js" type="text/javascript"></script>
- <script src="mobiscroll.android.js" type="text/javascript"></script>
- <script src="mobiscroll.android-ics.js" type="text/javascript"></script>
+ <script src="js/mobiscroll.core.js" type="text/javascript"></script>
+ <script src="js/mobiscroll.datetime.js" type="text/javascript"></script>
+ <script src="js/mobiscroll.select.js" type="text/javascript"></script>
+ <script src="js/mobiscroll.jqm.js" type="text/javascript"></script>
+ <script src="js/mobiscroll.ios.js" type="text/javascript"></script>
+ <script src="js/mobiscroll.android.js" type="text/javascript"></script>
+ <script src="js/mobiscroll.android-ics.js" type="text/javascript"></script>
- <link href="mobiscroll.core.css" rel="stylesheet" type="text/css" />
- <link href="mobiscroll.jqm.css" rel="stylesheet" type="text/css" />
- <link href="mobiscroll.android.css" rel="stylesheet" type="text/css" />
- <link href="mobiscroll.android-ics.css" rel="stylesheet" type="text/css" />
- <link href="mobiscroll.ios.css" rel="stylesheet" type="text/css" />
- <link href="mobiscroll.sense-ui.css" rel="stylesheet" type="text/css" />
+ <link href="css/mobiscroll.core.css" rel="stylesheet" type="text/css" />
+ <link href="css/mobiscroll.jqm.css" rel="stylesheet" type="text/css" />
+ <link href="css/mobiscroll.android.css" rel="stylesheet" type="text/css" />
+ <link href="css/mobiscroll.android-ics.css" rel="stylesheet" type="text/css" />
+ <link href="css/mobiscroll.ios.css" rel="stylesheet" type="text/css" />
+ <link href="css/mobiscroll.sense-ui.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
@@ -37,30 +33,32 @@
.inline > div {
text-align: center;
}
+ #buttons {
+ text-align: left;
+ padding: 1em 0;
+ }
+ @media (min-width:450px) {
+ #buttons {
+ padding-left: 22%;
+ }
+ }
</style>
<script type="text/javascript">
$(function () {
var curr = new Date().getFullYear();
var opt = {
'date': {
- preset: 'date',
- display: 'modal',
- minDate: new Date(2011, 2, 10),
- maxDate: new Date(2013, 7, 30)
+ preset: 'date'
},
'datetime': {
preset: 'datetime',
- display: 'modal',
- //dateOrder: 'mmdd',
- //minDate: new Date(2011, 2, 10, 10),
minDate: new Date(2012, 3, 10, 9, 22),
- maxDate: new Date(2012, 7, 30, 15, 44),
+ maxDate: new Date(2014, 7, 30, 15, 44),
stepMinute: 5
},
'time': {
- preset: 'time',
- display: 'modal'
+ preset: 'time'
},
'credit': {
dateOrder: 'mmyy',
@@ -69,25 +67,36 @@
endYear: curr + 10,
width: 100
},
+ 'btn': {
+ showOnFocus: false
+ },
'inline': {
display: 'inline'
}
}
- $('select').scroller({ preset: 'select' }).change(function() {
- $('#test').scroller('destroy').scroller($.extend(opt[$('#demo').val()], { theme: $('#theme').val(), mode: $('#mode').val() }));
+ $('select').scroller({ preset: 'select' }).on('change', function() {
+ $('#test').val('').scroller('destroy').scroller($.extend(opt[$('#demo').val()], { theme: $('#theme').val(), mode: $('#mode').val() }));
+ $('#demo').val() == 'btn' ? $('#buttons').show() : $('#buttons').hide();
});
- $('#demo').change();
+ $('#demo').trigger('change');
- //$('#test').scroller();
+ $('#trigger').click(function() {
+ $('#test').scroller('show');
+ return false;
+ });
+ $('#clear').click(function() {
+ $('#test').val('');
+ return false;
+ });
});
</script>
</head>
<body>
- <div data-role="page" data-theme="b" id="jqm-home">
+ <div data-role="page" data-theme="b">
<div data-role="header" data-theme="a">
<h1>Mobiscroll</h1>
</div>
@@ -117,16 +126,21 @@ <h1>Mobiscroll</h1>
<div data-role="fieldcontain">
<label for="demo">Demo</label>
<select name="demo" id="demo" data-role="none">
- <option value="date">Date</option>
- <option value="datetime" selected>Datetime</option>
+ <option value="date" selected>Date</option>
+ <option value="datetime">Datetime</option>
<option value="time">Time</option>
<option value="credit">Credit card expiration</option>
+ <option value="btn">Show/Clear buttons</option>
<option value="inline">Inline</option>
</select>
</div>
<div data-role="fieldcontain" class="inline">
<label for="test">Click here to try</label>
- <input type="text" name="test" id="test" value="08/30/2012 04:32 PM" />
+ <input type="text" name="test" id="test" />
+ <div data-role="controlgroup" data-type="horizontal" id="buttons">
+ <a href="#" id="trigger" data-role="button" data-icon="grid">Choose Date</a>
+ <a href="#" id="clear" data-role="button" data-icon="delete">Clear</a>
+ </div>
</div>
</form>
</div>
File renamed without changes.
File renamed without changes.
Oops, something went wrong.

0 comments on commit a6d35ab

Please sign in to comment.