r2796 - implemented callbacks events: open, close, select, change. Last demo has console logging.
Author: scottjehl
Date: Tue Jun 16 15:36:31 2009
New Revision: 2796
Modified:
branches/labs/selectmenu/index.html
branches/labs/selectmenu/ui.selectmenu.js
Log:
implemented callbacks events: open, close, select, change. Last demo has
console logging.
Modified: branches/labs/selectmenu/index.html
==============================================================================
--- branches/labs/selectmenu/index.html (original)
+++ branches/labs/selectmenu/index.html Tue Jun 16 15:36:31 2009
@@ -62,6 +62,23 @@
]
});
+ //sample with logging
+ $('select#speedE').selectmenu({
+ open: function(event,ui){
+ console.log('event: '+event.type+', value: '+ui.value);
+ },
+ close: function(event,ui){
+ console.log('event: '+event.type+', value: '+ui.value);
+ },
+ select: function(event,ui){
+ console.log('event: '+event.type+', value: '+ui.value);
+ },
+ change: function(event,ui){
+ console.log('event: '+event.type+', value: '+ui.value);
+ }
+ });
+
+
});
//format options
var addressFormatting = [
@@ -187,6 +204,19 @@
<option value="somefile">Some unknown file</option>
<option value="someotherfile">Some other unknown file</option>
</optgroup>
+ </select>
+ </fieldset>
+
+
+ <h2>Demo with events logged to console.</h2>
+ <fieldset>
+ <label for="speedE">Select a Speed:</label>
+ <select name="speedE" id="speedE">
+ <option value="Slower">Slower</option>
+ <option value="Slow">Slow</option>
+ <option value="Medium" selected="selected">Medium</option>
+ <option value="Fast">Fast</option>
+ <option value="Faster">Faster</option>
</select>
</fieldset>
Modified: branches/labs/selectmenu/ui.selectmenu.js
==============================================================================
--- branches/labs/selectmenu/ui.selectmenu.js (original)
+++ branches/labs/selectmenu/ui.selectmenu.js Tue Jun 16 15:36:31 2009
@@ -48,8 +48,8 @@
//click toggle for menu visibility
this.newelement
- .bind('mousedown', function(){
- self._toggle();
+ .bind('mousedown', function(event){
+ self._toggle(event);
//make sure a click won't open/close instantly
if(o.style == "popup"){
self._safemouseup = false;
@@ -66,7 +66,7 @@
case $.ui.keyCode.ENTER:
case $.ui.keyCode.SPACE:
ret = false;
- self._toggle();
+ self._toggle(event);
break;
case $.ui.keyCode.UP:
case $.ui.keyCode.LEFT:
@@ -97,8 +97,8 @@
//document click closes menu
$(document)
- .mousedown(function(){
- self.close();
+ .mousedown(function(event){
+ self.close(event);
});
//change event on original selectmenu
@@ -134,9 +134,12 @@
.addClass(selectOptionData[i].classes)
.data('optionClasses', selectOptionData[i].classes)
.mouseup(function(event){
- self.value($(this).data('index'));
if(self._safemouseup){
- self.close(true);
+ var changed = $(this).data('index') != self._selectedIndex();
+ self.value($(this).data('index'));
+ self.select(event);
+ if(changed){ self.change(event); }
+ self.close(event,true);
}
return false;
})
@@ -254,16 +257,16 @@
case $.ui.keyCode.ENTER:
case $.ui.keyCode.SPACE:
ret = false;
- self.close(true);
+ self.close(event,true);
$(event.target).parents('li:eq(0)').trigger('mouseup');
break;
case $.ui.keyCode.TAB:
ret = true;
- self.close();
+ self.close(event);
break;
case $.ui.keyCode.ESCAPE:
ret = false;
- self.close(true);
+ self.close(event,true);
break;
default:
ret = false;
@@ -296,7 +299,7 @@
//transfer disabled state
if(this.element.attr('disabled') == true){ this.disable(); }
- //update value
+ //update value
this.value(this._selectedIndex());
},
destroy: function() {
@@ -337,15 +340,10 @@
});
this._prevChar[0] = C;
},
- _closeOthers: function(){
- $('.'+ this.widgetBaseClass
+'.ui-state-active').not(this.newelement).each(function(){
- $(this).data('selectelement').selectmenu('close');
- })
- },
- open: function(){
+ open: function(event){
var self = this;
this._refreshPosition();
- this._closeOthers();
+ this._closeOthers(event);
this.newelement.addClass('ui-state-active');
this.list
.appendTo('body')
@@ -353,18 +351,43 @@
.find('li:not(.'+ self.widgetBaseClass +'-group):eq('+
this._selectedIndex() +') a').focus();
if(this.options.style == "dropdown"){
this.newelement.removeClass('ui-corner-all').addClass('ui-corner-top'); }
this._refreshPosition();
- return this.element;
+ var uiHash = {
+ value: this.value()
+ };
+ this._trigger("open", event, uiHash);
},
- close: function(retainFocus){
- this.newelement.removeClass('ui-state-active');
- this.list.removeClass(this.widgetBaseClass+'-open');
- if(this.options.style == "dropdown"){
this.newelement.removeClass('ui-corner-top').addClass('ui-corner-all'); }
- if(retainFocus){this.newelement.focus();}
- return this.element;
- },
- _toggle: function(retainFocus){
- if(this.list.is('.'+ this.widgetBaseClass +'-open')){
this.close(retainFocus); }
- else { this.open(); }
+ close: function(event, retainFocus){
+ if(this.newelement.is('.ui-state-active')){
+ this.newelement.removeClass('ui-state-active');
+ this.list.removeClass(this.widgetBaseClass+'-open');
+ if(this.options.style == "dropdown"){
this.newelement.removeClass('ui-corner-top').addClass('ui-corner-all'); }
+ if(retainFocus){this.newelement.focus();}
+ var uiHash = {
+ value: this.value()
+ };
+ this._trigger("close", event, uiHash);
+ }
+ },
+ change: function(event) {
+ var uiHash = {
+ value: this.value()
+ };
+ this._trigger("change", event, uiHash);
+ },
+ select: function(event) {
+ var uiHash = {
+ value: this.value()
+ };
+ this._trigger("select", event, uiHash);
+ },
+ _closeOthers: function(event){
+ $('.'+ this.widgetBaseClass
+'.ui-state-active').not(this.newelement).each(function(){
+ $(this).data('selectelement').selectmenu('close',event);
+ })
+ },
+ _toggle: function(event,retainFocus){
+ if(this.list.is('.'+ this.widgetBaseClass +'-open')){
this.close(event,retainFocus); }
+ else { this.open(event); }
},
_formatText: function(text){
var o = this.options;
@@ -409,15 +432,8 @@
numPerPage = (direction == 'up') ? -numPerPage : numPerPage;
this._moveFocus(numPerPage);
},
- _change: function(event, index) {
- var uiHash = {
- value: this.value()
- };
- this._trigger("change", event, uiHash);
- },
_setData: function(key, value) {
this.options[key] = value;
- this._refreshValue();
if (key == 'disabled') {
this.element
.add(this.newelement)
@@ -433,7 +449,6 @@
this.element[0].selectedIndex = newValue;
this._refreshValue();
this._refreshPosition();
- this._change(null, 0);
}
return this.element[0].selectedIndex;
},