Skip to content

Instantly share code, notes, and snippets.

@bati11
Created May 15, 2012
Embed
What would you like to do?
セレクトボックスを選択しやすくするjQueryのプラグイン
(function($) {
$.fn.selectErea = function(config){
config = $.extend({
selectEreaId: 'selectErea',
baseLayerId: 'baseLayer',
prefix: '__op_',
brClass: 'br',
groupClass: 'group',
headClass: 'head',
height: 'auto',
width: 'auto',
padding: '10px 0',
textAlign: 'left',
bgColor: '#D9E1FF',
whiteSpace: 'nowrap',
margin: '0px 10px',
borderRight: 'dashed 1px #000000',
showSpeed: '',
fadeSpeed: '0.1',
Opacity: 0.9
},config);
var target = this;
var selectEreaId = config.selectEreaId;
var baseLayerId = config.baseLayerId;
var clear = function(event){
event.data.selectBox.show();
$('#'+baseLayerId).remove();
$('#'+selectEreaId).remove();
$(document).unbind('clearEvent');
}
var select = function(event){
target[0].selectedIndex = this.id.substr(config.prefix.length);
}
var disp = function(event){
// セレクトエリアの位置決め
var offset = target.offset(),
left = offset.left,
top = offset.top - target.height() + 15;
// セレクトボックスを使用不可にする
target.hide();
/* 画面全体にセレクトエリアを削除するためのレイヤを作成 */
$('body').append('<div id="' + baseLayerId + '"></div>');
var bLayer = $('#'+baseLayerId);
bLayer
.css( {
height: $(document).height(),
width: $(document).width(),
position: 'absolute',
left: '0',
top: '0'
});
/* セレクトエリアを作成 */
$('body').append(event.data.layer);
var sErea = $('#'+selectEreaId);
sErea
.hide()
.css({position: 'absolute'})
.css({top: top,
left: left,
height: config.height,
width: config.width,
padding: config.padding,
textAlign: config.textAlign,
backgroundColor: config.bgColor});
$('table', sErea)
.css({whiteSpace: config.whiteSpace});
$('a', sErea)
.bind('click', {selectErea:self}, select)
.css({margin: '0px 10px'});
$('td.head', sErea)
.css({borderRight: 'dashed 1px #000000'});
sErea
.show(config.showSpeed)
.fadeTo(config.fadeSpeed, config.Opacity);
/* レイヤを削除するイベントの割り当て */
$(document).bind('clearEvent', {selectBox:target}, clear);
bLayer.click( function(){ $(document).trigger('clearEvent') });
$('a', sErea).click( function(){ $(document).trigger('clearEvent') });
}
var list = ['<div id="', selectEreaId, '" style="display:none" ><table>'];
$('option', target).each( function(index){
if( $(this).attr('class') == config.groupClass ){
list.push('<td class="');
list.push(config.headClass);
list.push('">');
} else {
list.push('<td>');
}
list.push('<a href="javascript:void(0);" id="');
list.push(config.prefix + index);
list.push('">');
list.push($(this).text());
list.push('</a></td>');
if( $(this).attr('class') == config.brClass ){
list.push('</tr><tr>');
}
});
list.push('</table></div>');
target.bind('mousedown', {layer:list.join('')}, disp);
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment