無題
SAMPLEvar multi = (function() {
// Helper function to trigger an event on an element
var trigger_event = function( type, el ) {
var e = document.createEvent( 'HTMLEvents' );
e.initEvent( type, false, false );
el.dispatchEvent( e );
};
// Toggles the target option on the select
var toggle_option = function ( select, event ) {
var option = select.options[ event.target.getAttribute( 'multi-index' ) ];
if ( option.disabled ) {
return;
}
option.selected = !option.selected;
trigger_event( 'change', select );
};
// Refreshes an already constructed multi.js instance
var refresh_select = function( select, settings ) {
// Clear columns
select.wrapper.selected.innerHTML = '';
select.wrapper.non_selected.innerHTML = '';
var query = select.wrapper.search.value;
var setValue = "";
// Loop over select options and add to the non-selected and selected columns
for ( var i = 0; i < select.options.length; i++ ) {
var option = select.options[i];
var value = option.value;
var label = option.textContent || option.innerText;
var row = document.createElement( 'a' );
row.tabIndex = 0;
row.className = 'item';
row.innerHTML = label;
row.setAttribute( 'role', 'button' );
row.setAttribute( 'data-value', value );
row.setAttribute( 'multi-index', i );
if ( option.disabled ) {
row.className += ' disabled';
}
// Add row to selected column if option selected
if ( option.selected ) {
row.className += ' selected';
var clone = row.cloneNode( true );
select.wrapper.selected.appendChild( clone );
if (setValue.toLowerCase().indexOf( label.toLowerCase() ) < 0 ) {
setValue += label;
}
}
select.wrapper.non_selected.appendChild( row );
}
select.wrapper.search.value = setValue;
};
// Intializes and constructs an multi.js instance
var init = function( select, settings ) {
/**
* Set up settings (optional parameter) and its default values
*
* Default values:
* enable_search : true
* search_placeholder : 'Search...'
*/
settings = typeof settings !== 'undefined' ? settings : {};
settings['enable_search'] = typeof settings['enable_search'] !== 'undefined' ? settings['enable_search'] : true;
settings['search_placeholder'] = typeof settings['search_placeholder'] !== 'undefined' ? settings['search_placeholder'] : 'Search...';
// Check if already initalized
if ( select.dataset.multijs != null ) {
return;
}
// Make sure element is select and multiple is enabled
if ( select.nodeName != 'SELECT' || ! select.multiple ) {
return;
}
// Hide select
select.style.display = 'none';
select.setAttribute( 'data-multijs', true );
// Start constructing selector
var wrapper = document.createElement( 'div' );
wrapper.className = 'multi-wrapper';
// Add search bar
if ( settings.enable_search ) {
var search = document.createElement( 'input' );
search.className = 'search-input';
search.type = 'text';
search.setAttribute( 'placeholder', settings.search_placeholder );
search.addEventListener( 'input', function() {
refresh_select( select, settings );
});
wrapper.appendChild( search );
wrapper.search = search;
}
// Add columns for selected and non-selected
var non_selected = document.createElement( 'div' );
non_selected.className = 'non-selected-wrapper';
var selected = document.createElement( 'div' );
selected.className = 'selected-wrapper';
// Add click handler to toggle the selected status
wrapper.addEventListener( 'click', function ( event ) {
if ( event.target.getAttribute( 'multi-index' ) ) {
toggle_option( select, event );
}
});
// Add keyboard handler to toggle the selected status
wrapper.addEventListener( 'keypress', function ( event ) {
var is_action_key = event.keyCode === 32 || event.keyCode === 13;
var is_option = event.target.getAttribute( 'multi-index' );
if ( is_option && is_action_key ) {
// Prevent the default action to stop scrolling when space is pressed
event.preventDefault();
toggle_option( select, event );
}
});
wrapper.appendChild( non_selected );
wrapper.appendChild( selected );
wrapper.non_selected = non_selected;
wrapper.selected = selected;
select.wrapper = wrapper;
// Add multi.js wrapper after select element
select.parentNode.insertBefore( wrapper, select.nextSibling );
// Initialize selector with values from select element
refresh_select( select, settings );
// Refresh selector when select values change
select.addEventListener( 'change', function() {
refresh_select( select, settings );
});
};
return init;
}());
// Add jQuery wrapper if jQuery is present
if ( typeof jQuery !== 'undefined' ) {
(function($) {
$.fn.multi = function( settings ) {
settings = typeof settings !== 'undefined' ? settings : {};
return this.each( function() {
var $select = $(this);
multi( $select.get(0), settings );
});
}
})(jQuery);
}
|
その他の最新記事
QMA4
2008/5/16(金) 午前 11:42
富山を離れ早1ヶ月…
と言っても隣の県なんですけどね(*^ω^)ヾ
(#ﾟДﾟ)最近は気のあった仲間と以外別に出たくねぇし！！！
…ってなテンションまで落ち
...
すべて表示
（・ω・）
2007/6/17(日) 午前 3:01
(・ω・)ﾉｼ
最近暴走中のNAOKI参上でつ♪
知らない方々はSNSの日記を…見ない事をお勧めしますww
突然ですが、今後は絆のプレーががくんと減ります。
理由はSNSに書きましたんで、そちらをご確認くだ
...すべて表示
マジギレ…引退…そしてついに最悪な事を…...
2007/6/10(日) 午前 10:27
本日の日記はかなり過激な事を書いておりますので、気分を害されるかもしれません。
m(_ _)m申し訳ありません。
...すべて表示
