Combobox Plugin for jQuery, version 0.5.0 の呼び出し部分の改良
|
|
日時: 2013/03/19 14:18
名前: lightbox
|
https://github.com/dellsala/Combo-Box-jQuery-Plugin
拡張子:
/*!
* Combobox Plugin for jQuery, version 0.5.0
*
* Copyright 2012, Dell Sala
* http://dellsala.com/
* https://github.com/dellsala/Combo-Box-jQuery-Plugin
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* Date: 2012-01-15
*
* modify : lightbox : 2013-03-19
*/
(function () {
jQuery.fn.extend( {combobox: function (selectOptions) {
return this.each(function () {
var newCombobox = new Combobox(this, selectOptions);
$(this).data("combobox", newCombobox );
});
}, comboget: function(){ return $(this).data("combobox") }
});
var Combobox = function (textInputElement, selectOptions) {
this.textInputElement = jQuery(textInputElement);
this.textInputElement.wrap(
'<span class="combobox" style="position:relative; '+
'display:-moz-inline-box; display:inline-block;"/>'
);
this.selector = new ComboboxSelector(this);
this.setSelectOptions(selectOptions);
var inputHeight = this.textInputElement.outerHeight();
var buttonLeftPosition = this.textInputElement.outerWidth() + 0;
var showSelectorButton = jQuery(
'<a href="#" class="combobox_button" '+
'style="position:absolute; height:'+inputHeight+'px; width:'+
inputHeight+'px; top:0; left:'+buttonLeftPosition+'px;"><div class="combobox_arrow"></div></a>'
);
this.textInputElement.css('margin', '0 '+showSelectorButton.outerWidth()+'px 0 0');
showSelectorButton.insertAfter(this.textInputElement);
var thisSelector = this.selector;
var thisCombobox = this;
showSelectorButton.click(function (e) {
jQuery('html').trigger('click');
thisSelector.buildSelectOptionList();
thisSelector.show();
thisCombobox.focus();
return false;
});
this.bindKeypress();
};
Combobox.prototype = {
setSelectOptions : function (selectOptions) {
this.selector.setSelectOptions(selectOptions);
this.selector.buildSelectOptionList(this.getValue());
},
bindKeypress : function () {
var thisCombobox = this;
this.textInputElement.keyup(function (event) {
if (event.keyCode == Combobox.keys.TAB
|| event.keyCode == Combobox.keys.SHIFT)
{
return;
}
if (event.keyCode != Combobox.keys.DOWNARROW
&& event.keyCode != Combobox.keys.UPARROW
&& event.keyCode != Combobox.keys.ESCAPE
&& event.keyCode != Combobox.keys.ENTER)
{
thisCombobox.selector.buildSelectOptionList(thisCombobox.getValue());
}
if (event.keyCode === Combobox.keys.ENTER)
{
return;
}
thisCombobox.selector.show()
});
},
setValue : function (value) {
var oldValue = this.textInputElement.val();
this.textInputElement.val(value);
if (oldValue != value) {
this.textInputElement.trigger('change');
}
},
getValue : function () {
return this.textInputElement.val();
},
focus : function () {
this.textInputElement.trigger('focus');
}
};
Combobox.keys = {
UPARROW : 38,
DOWNARROW : 40,
ENTER : 13,
ESCAPE : 27,
TAB : 9,
SHIFT : 16
};
var ComboboxSelector = function (combobox) {
this.combobox = combobox;
this.optionCount = 0;
this.selectedIndex = -1;
this.allSelectOptions = [];
var selectorTop = combobox.textInputElement.outerHeight();
var selectorWidth = combobox.textInputElement.outerWidth();
this.selectorElement = jQuery(
'<div class="combobox_selector" '+
'style="display:none; width:'+selectorWidth+
'px; position:absolute; left: 0; top: '+selectorTop+'px;"'+
'></div>'
).insertAfter(this.combobox.textInputElement);
var thisSelector = this;
this.keypressHandler = function (e) {
if (e.keyCode == Combobox.keys.DOWNARROW) {
thisSelector.selectNext();
} else if (e.keyCode == Combobox.keys.UPARROW) {
thisSelector.selectPrevious();
} else if (e.keyCode == Combobox.keys.ESCAPE) {
thisSelector.hide();
thisSelector.combobox.focus();
} else if (e.keyCode == Combobox.keys.ENTER) {
if(thisSelector.selectedIndex !== -1){
e.preventDefault();
}
thisSelector.combobox.setValue(thisSelector.getSelectedValue());
thisSelector.combobox.focus();
thisSelector.hide();
} else if(e.keyCode == Combobox.keys.TAB){
thisSelector.hide();
}
}
};
ComboboxSelector.prototype = {
setSelectOptions : function (selectOptions) {
this.allSelectOptions = selectOptions;
},
buildSelectOptionList : function (startingLetters) {
if (! startingLetters) {
startingLetters = "";
}
this.unselect();
this.selectorElement.empty();
var selectOptions = [];
this.selectedIndex = -1;
var i;
for (i=0; i < this.allSelectOptions.length; i++) {
if (! startingLetters.length
|| this.allSelectOptions[i].toLowerCase().indexOf(startingLetters.toLowerCase()) === 0)
{
selectOptions.push(this.allSelectOptions[i]);
}
}
this.optionCount = selectOptions.length;
var ulElement = jQuery('<ul></ul>').appendTo(this.selectorElement);
for (i = 0; i < selectOptions.length; i++) {
ulElement.append('<li>'+selectOptions[i]+'</li>');
}
var thisSelector = this;
this.selectorElement.find('li').click(function (e) {
thisSelector.hide();
thisSelector.combobox.setValue(this.innerHTML);
thisSelector.combobox.focus();
});
this.selectorElement.mouseover(function (e) {
thisSelector.unselect();
});
this.htmlClickHandler = function () {
thisSelector.hide();
};
},
show : function () {
if (this.selectorElement.find('li').length < 1
|| this.selectorElement.is(':visible'))
{
return false;
}
jQuery('html').keydown(this.keypressHandler);
this.selectorElement.slideDown('fast');
jQuery('html').click(this.htmlClickHandler);
return true;
},
hide : function () {
jQuery('html').unbind('keydown', this.keypressHandler);
jQuery('html').unbind('click', this.htmlClickHandler);
this.selectorElement.unbind('click');
this.unselect();
this.selectorElement.hide();
},
selectNext : function () {
var newSelectedIndex = this.selectedIndex + 1;
if (newSelectedIndex > this.optionCount - 1) {
newSelectedIndex = this.optionCount - 1;
}
this.select(newSelectedIndex);
},
selectPrevious : function () {
var newSelectedIndex = this.selectedIndex - 1;
if (newSelectedIndex < 0) {
newSelectedIndex = 0;
}
this.select(newSelectedIndex);
},
select : function (index) {
this.unselect();
this.selectorElement.find('li:eq('+index+')').addClass('selected');
this.selectedIndex = index;
},
unselect : function () {
this.selectorElement.find('li').removeClass('selected');
this.selectedIndex = -1;
},
getSelectedValue : function () {
if(this.selectedIndex !== -1){
return this.selectorElement.find('li').get(this.selectedIndex).innerHTML;
} else {
return this.combobox.textInputElement.val();
}
}
};
})();
|
|
呼出し部分変更後の実装 ( No.1 ) |
|
日時: 2013/03/19 13:43
名前: lightbox
|
日時: 2013/03/19 13:43 名前: lightbox
拡張子:
<script type="text/javascript">
jQuery(function () {
jQuery('#input1').combobox([
'Foo',
'Bar',
'Bartender',
'Hello',
'Master',
'Monster',
'Monorail',
'Octopus has eight legs',
'Octagon',
'Often',
'World',
'wacko',
'woo'
]);
jQuery('#input2').combobox([
'Yo',
'Mo',
'Jo'
]);
jQuery('#option_changer').click(function (e) {
$("#input1").comboget().setSelectOptions([
'A',
'O',
'B'
]);
});
jQuery('#option_changer2').click(function (e) {
$("#input2").comboget().setSelectOptions([
'Apples',
'Oranges',
'Bananas'
]);
});
});
</script>
<div>
<h1>jQuery.combobox Demo</h1>
<p>
by <a href="http://dellsala.com/">Dell Sala</a><br>
<a href="https://github.com/dellsala/Combo-Box-jQuery-Plugin">Get it from github</a>
</p>
</div>
<div>
<textarea id="input1"></textarea>
<label for="input2">Field2:</label> <input id="input2" type="text" value="Hello"><br>
<br>
<br>
<input id="option_changer" type="button" value="Change Field 1 Options">
<input id="option_changer2" type="button" value="Change Field 1 Options">
</div>
|
|
|
|