jQuery dropdown event plugin
by ErikE
HTML
<h1>Flight 1</h1>
<select id="departureFlightsControl" data-infoselector="#info1">
<option value="default">No flight chosen</option>
<option value="20121113 17:37:00">November 13, 2012 (5:37pm) - $137.38</option>
<option value="20121119 05:11:00">November 19, 2012 (5:11am) - $121.05</option>
<option value="20121124 19:41:00">November 24, 2012 (7:41pm) - $182.44</option>
<option value="20121208 08:22:00">December 8, 2012 (8:22am) - $140.75</option>
</select>
<div id="info1">No flight chosen</div>
<h1>Flight 2</h1>
<select id="departureFlightsControl2" data-infoselector="#info2">
<option value="default">No flight chosen</option>
<option value="20121113 17:37:00">November 13, 2012 (5:37pm) - $137.38</option>
<option value="20121119 05:11:00">November 19, 2012 (5:11am) - $121.05</option>
<option value="20121124 19:41:00">November 24, 2012 (7:41pm) - $182.44</option>
<option value="20121208 08:22:00">December 8, 2012 (8:22am) - $140.75</option>
</select>
<div id="info2">No flight chosen</div>
JavaScript
(function($, undefined) {
function globalreset() {
console.log('global reset');
$('select').filter(function() {
var t = $(this);
return (t.hasData() && t.data('dropped'));
})
.data('dropped', false)
.trigger('rollup');
}
$.fn.dropdownevents = function() {
console.log('dropdownevents');
if (!$.fn.dropdownevents.initialized) {
$.fn.dropdownevents.initialized = true;
$(document).on('ready', function() {
$('body').on('click', globalreset, 'not(select)');
$('window').on({blur: globalreset, focus: globalreset});
});
}
this
.filter('select')
.data('dropped', false)
.on({
click: function() {
console.log('select click');
var t = $(this), d = !t.data('dropped');
t.data('dropped', d);
console.log(d);
if (d) {
t.trigger('dropdown');
} else {
t.trigger('rollup');
}
console.log('end select click');
},
blur: function() {
console.log('blur');
var t = $(this);
if (t.data('dropped')) {
t.data('dropped', false);
t.trigger('rollup');
}
console.log('end blur');
},
focus: function() {
console.log('focus');
var t = $(this);
if (t.data('dropped')) {
t.data('dropped', false);
t.trigger('rollup');
}
}
});
return this;
}
}(jQuery));
var f = $('select');
f
...