Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Android ICS skin, 'mixed' mode, showLabel, showValue options

  • Loading branch information...
commit da4a47604b6c6f4797e00576d38c413ad70280d9 1 parent c9e4c60
@dioslaska dioslaska authored
Showing with 210 additions and 59 deletions.
  1. +9 −34 demo.html
  2. +141 −0 mobiscroll.css
  3. +60 −25 mobiscroll.js
View
43 demo.html
@@ -5,13 +5,14 @@
<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.0/jquery.mobile-1.0.min.css" />
+ <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+ <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script src="mobiscroll.js" type="text/javascript"></script>
@@ -52,33 +53,13 @@
wheels: wheels
});
- $('#disable').click(function() {
- $('#date1').scroller('disable');
- return false;
- });
-
- $('#enable').click(function() {
- $('#date1').scroller('enable');
- return false;
- });
-
- $('#get').click(function() {
- alert($('#date1').scroller('getDate'));
- return false;
- });
-
- $('#set').click(function() {
- $('#date1').scroller('setDate', new Date(), true);
- return false;
- });
-
$('#theme, #mode').change(function() {
var t = $('#theme').val();
var m = $('#mode').val();
$('#date1').scroller('destroy').scroller({ theme: t, mode: m });
$('#date2').scroller('destroy').scroller({ preset: 'time', theme: t, mode: m });
$('#date3').scroller('destroy').scroller({ preset: 'datetime', theme: t, mode: m });
- $('#custom').scroller('option', { theme: t, mode: m });
+ $('#custom').scroller('destroy').scroller({ wheels: wheels, theme: t, mode: m });
});
});
</script>
@@ -96,6 +77,8 @@
<label for="theme">Theme</label>
<select name="theme" id="theme" data-native-menu="false">
<option value="default">Default</option>
+ <option value="android-ics">Android ICS (New)</option>
+ <option value="android-ics light">Android ICS Light (New)</option>
<option value="android">Android</option>
<option value="sense-ui">Sense UI</option>
<option value="ios">iOS</option>
@@ -107,6 +90,7 @@
<select name="mode" id="mode" data-native-menu="false">
<option value="scroller">Scroller</option>
<option value="clickpick">Clickpick</option>
+ <option value="mixed">Mixed (New)</option>
</select>
</div>
@@ -115,15 +99,6 @@
<input type="text" name="date1" id="date1" class="mobiscroll" />
</div>
- <div data-role="controlgroup" data-type="horizontal">
- <button id="disable" data-theme="a">Disable</button>
- <button id="enable" data-theme="a">Enable</button>
- </div>
- <div data-role="controlgroup" data-type="horizontal">
- <button id="get" data-theme="a">Get</button>
- <button id="set" data-theme="a">Set</button>
- </div>
-
<div data-role="fieldcontain">
<label for="date2">Time</label>
<input type="text" name="date2" id="date2" class="mobiscroll" readonly="readonly" value="11:23 AM" />
@@ -136,7 +111,7 @@
<div data-role="fieldcontain">
<label for="custom">Custom (Fruits :D)</label>
- <input type="text" name="custom" id="custom" class="mobiscroll" value="1 0 1" />
+ <input type="text" name="custom" id="custom" class="mobiscroll" value="1 2 3" />
</div>
</form>
</div>
View
141 mobiscroll.css
@@ -229,6 +229,16 @@
display: inline-block;
width: 50%;
}
+/* Hidden label */
+.dwhl {
+ padding-top: 10px;
+}
+.dwhl .dwl {
+ display: none;
+}
+.dwhl .dww {
+ top: 0;
+}
/* Android Skin */
.android {
padding: 0;
@@ -487,3 +497,134 @@
float: left;
text-align: left;
}
+/* Android ICS skin */
+.android-ics {
+ padding: 0;
+ color: #31b6e7;
+ background: #292829;
+ border-top: 1px solid #4a494a;
+}
+.android-ics .dwwc, .android-ics .dwwl, .android-ics .dww, .android-ics .dwb {
+ background: none;
+}
+.android-ics .dwc {
+ margin: 0;
+ padding: 30px 10px 1px 10px;
+}
+.android-ics .dwhl {
+ padding: 1px 10px;
+}
+.android-ics .dwv {
+ padding: 15px;
+ border-bottom: 2px solid #31b6e7;
+ font-size: 18px;
+}
+.android-ics .dwwl {
+ margin: 0 2px;
+}
+.android-ics .dww {
+ border: 0;
+}
+.android-ics .dww li {
+ color: #fff;
+ font-size: 18px;
+ text-shadow: none;
+}
+.android-ics .dwwo {
+ background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #282828),color-stop(0.52, rgba(40,40,40,0)),color-stop(0.48, rgba(40,40,40,0)),color-stop(1, #282828));
+ background: -moz-linear-gradient(#282828 0%,rgba(40,40,40,0) 52%, rgba(40,40,40,0) 48%, #282828 100%);
+ background: -ms-linear-gradient(#282828 0%,rgba(40,40,40,0) 52%, rgba(40,40,40,0) 48%, #282828 100%);
+ background: -o-linear-gradient(#282828 0%,rgba(40,40,40,0) 52%, rgba(40,40,40,0) 48%, #282828 100%);
+}
+.android-ics .dwwb {
+ background: #292829;
+ color: #292829;
+ font-size: 1px;
+ box-shadow: none;
+ -webkit-box-shadow: none;
+}
+.android-ics .dwwb:after {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-top: -8px;
+ margin-left: -8px;
+ color: #7e7e7e;
+ width: 0;
+ height: 0;
+ border-width: 8px;
+ border-style: solid;
+ content: '';
+}
+.android-ics .dwwbp:after {
+ border-color: transparent transparent #7e7e7e transparent;
+}
+.android-ics .dwwbm:after {
+ border-color: #7e7e7e transparent transparent transparent;
+}
+.android-ics .dwwl .dwb-a {
+ background: #292829;
+}
+.android-ics .dwwbp.dwb-a:after {
+ border-color: transparent transparent #319abd transparent;
+}
+.android-ics .dwwbm.dwb-a:after {
+ border-color: #319abd transparent transparent transparent;
+}
+.android-ics .dwwol {
+ width: 60%;
+ left: 20%;
+ height: 40px;
+ border-top: 2px solid #31b6e7;
+ border-bottom: 2px solid #31b6e7;
+ margin-top: -22px;
+ display: block;
+}
+.android-ics .dwbc {
+ border-top: 1px solid #424542;
+ padding: 0;
+}
+.android-ics .dwb {
+ padding: 0;
+ margin: 0;
+ font-weight: normal;
+ text-shadow: none;
+ box-shadow: none;
+ border-radius: 0;
+ -webkit-border-radius: 0;
+ -webkit-box-shadow: none;
+}
+.android-ics .dwb-a {
+ background: #29799c;
+}
+.android-ics .dwb-s .dwb {
+ border-right: 1px solid #424542;
+}
+.android-ics.light {
+ background: #f5f5f5;
+}
+.android-ics.light .dww li {
+ color: #000;
+}
+.android-ics.light .dwwo {
+ background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #f5f5f5),color-stop(0.52, rgba(245,245,245,0)),color-stop(0.48, rgba(245,245,245,0)),color-stop(1, #f5f5f5));
+ background: -moz-linear-gradient(#f5f5f5 0%,rgba(245,245,245,0) 52%, rgba(245,245,245,0) 48%, #f5f5f5 100%);
+ background: -ms-linear-gradient(#f5f5f5 0%,rgba(245,245,245,0) 52%, rgba(245,245,245,0) 48%, #f5f5f5 100%);
+ background: -o-linear-gradient(#f5f5f5 0%,rgba(245,245,245,0) 52%, rgba(245,245,245,0) 48%, #f5f5f5 100%);
+}
+.android-ics.light .dwwb {
+ background: #f5f5f5;
+ color: #f5f5f5;
+}
+.android-ics.light .dwbc {
+ border-top: 1px solid #dbdbdb;
+}
+.android-ics.light .dwb {
+ color: #000;
+}
+.android-ics.light .dwb-a {
+ color: #fff;
+}
+.android-ics.light .dwb-s .dwb {
+ border-right: 1px solid #dbdbdb;
+}
View
85 mobiscroll.js
@@ -1,5 +1,5 @@
/*!
- * jQuery MobiScroll v1.5.3
+ * jQuery MobiScroll v1.6
* http://mobiscroll.com
*
* Copyright 2010-2011, Acid Media
@@ -15,6 +15,7 @@
mOrd,
dOrd,
iv = {},
+ tv = {},
visible = false;
this.settings = s;
@@ -65,6 +66,12 @@
t.data('pos', val);
}
}, 100);
+ // Show +/- buttons
+ clearTimeout(tv[index]);
+ tv[index] = setTimeout(function() {
+ if (!t.hasClass('dwa'))
+ t.closest('.dwwl').find('.dwwb').fadeIn('fast');
+ }, time * 1000);
}
else {
t.data('pos', val)
@@ -533,11 +540,11 @@
// Create wheels containers
$('.dwc', dw).remove();
for (var i = 0; i < s.wheels.length; i++) {
- var dwc = $('<div class="dwc' + (s.mode == 'clickpick' ? ' dwpm' : '') + '"><div class="dwwc dwrc"><div class="clear" style="clear:both;"></div></div>').insertBefore($('.dwbc', dw));
+ var dwc = $('<div class="dwc' + (s.mode != 'scroller' ? ' dwpm' : '') + (s.showLabel ? '' : ' dwhl') + '"><div class="dwwc dwrc"><div class="clear" style="clear:both;"></div></div>').insertBefore($('.dwbc', dw));
// Create wheels
for (var label in s.wheels[i]) {
var to1 = $('.dwwc .clear', dwc);
- var w = $('<div class="dwwl dwrc">' + (s.mode == 'clickpick' ? '<div class="dwwb dwwbp">+</div><div class="dwwb dwwbm">&ndash;</div>' : '') + '<div class="dwl">' + label + '</div><div class="dww dwrc"><ul></ul><div class="dwwo"></div></div><div class="dwwol"></div></div>').insertBefore(to1);
+ var w = $('<div class="dwwl dwrc">' + (s.mode != 'scroller' ? '<div class="dwwb dwwbp">+</div><div class="dwwb dwwbm">&ndash;</div>' : '') + '<div class="dwl">' + label + '</div><div class="dww dwrc"><ul></ul><div class="dwwo"></div></div><div class="dwwol"></div></div>').insertBefore(to1);
// Create wheel values
for (var j in s.wheels[i][label]) {
$('<li class="val_' + j + '">' + s.wheels[i][label][j] + '</li>').data('val', j).appendTo($('ul', w));
@@ -554,7 +561,10 @@
that.scroll($(this), m - (x < 0 ? 0 : x) - 1);
});
// Set value text
- $('.dwv', dw).html(this.formatResult());
+ if (s.showValue)
+ $('.dwv', dw).html(this.formatResult()).show();
+ else
+ $('.dwv', dw).hide();
// Initial validate
that.validate(-1);
@@ -702,6 +712,8 @@
rows: 3,
disabled: false,
showOnFocus: true,
+ showValue: true,
+ showLabel: true,
wheels: null,
theme: '',
mode: 'scroller',
@@ -745,19 +757,23 @@
},
parseValue: function(val, inst) {
var w = inst.settings.wheels,
- ret = val.split(' '),
- def = [],
- total = 0;
+ val = val.split(' '),
+ ret = [],
+ j = 0;
for (var i = 0; i < w.length; i++) {
for (var l in w[i]) {
- total++;
- for (var v in w[i][l]) {
- def.push(v);
- break;
- }
+ if (w[i][l][val[j]] !== undefined)
+ ret.push(val[j])
+ else
+ // Select first value from wheel
+ for (var v in w[i][l]) {
+ ret.push(v);
+ break;
+ }
+ j++;
}
}
- return ret.length == total ? ret : def;
+ return ret;
},
validate: function() {
return true;
@@ -768,12 +784,28 @@
init: function (options) {
if (options === undefined) options = {};
var defs = {};
+ //options.mode = $.inArray(options.mode, ['scroller', 'clickpick', 'mixed']) == -1 ? 'scroller' : options.mode;
// Skin dependent defaults
- if (options.theme == 'ios') {
- defs.dateOrder = 'MMdyy';
- defs.rows = 5;
- defs.height = 30;
- defs.width = 55;
+ switch (options.theme) {
+ case 'ios':
+ defs.dateOrder = 'MMdyy';
+ defs.rows = 5;
+ defs.height = 30;
+ defs.width = 55;
+ defs.showValue = false;
+ defs.showLabel = false;
+ break;
+ case 'android':
+ defs.dateOrder = 'Mddyy';
+ break;
+ case 'android-ics':
+ case 'android-ics light':
+ defs.dateOrder = 'Mddyy';
+ defs.rows = 5;
+ defs.width = 70;
+ defs.showLabel = false;
+ defs.mode = 'mixed';
+ break;
}
// Mode dependent defaults
if (options.mode == 'clickpick') {
@@ -869,9 +901,9 @@
$(document).bind(END_EVENT, function (e) {
if (move) {
e.preventDefault();
- var time = new Date() - startTime;
-
- var val = pos + (stop - start) / h;
+ target.removeClass('dwa');
+ var time = new Date() - startTime,
+ val = pos + (stop - start) / h;
val = val > (m - 1 + 1) ? (m - 1 + 1) : val;
val = val < (m - l - 1) ? (m - l - 1) : val;
@@ -920,25 +952,28 @@
}).delegate('.dwwbp', START_EVENT, function (e) {
// + Button
e.preventDefault();
+ e.stopPropagation();
var t = $(this).closest('.dwwl').find('ul');
l = $('li:visible', t).length;
clearInterval(plustap);
- plustap = setInterval(function() { plus(t); }, 200);
+ plustap = setInterval(function() { plus(t); }, 300);
plus(t);
}).delegate('.dwwbm', START_EVENT, function (e) {
// - Button
e.preventDefault();
+ e.stopPropagation();
var t = $(this).closest('.dwwl').find('ul');
l = $('li:visible', t).length;
clearInterval(minustap);
- minustap = setInterval(function() { minus(t); }, 200);
+ minustap = setInterval(function() { minus(t); }, 300);
minus(t);
}).delegate('.dwwl', START_EVENT, function (e) {
// Scroll start
- if (!move && inst.settings.mode == 'scroller') {
+ if (!move && inst.settings.mode != 'clickpick') {
e.preventDefault();
move = true;
- target = $('ul', this);
+ target = $('ul', this).addClass('dwa');
+ $('.dwwb', this).fadeOut('fast');
pos = target.data('pos');
l = $('li:visible', target).length;
start = getY(e);
Please sign in to comment.
Something went wrong with that request. Please try again.