j-Shortcuts

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Ten element może pomóc w tworzeniu skrócenia klawiatury. komponent is singleton.

Metody:

component.register(shortcut, callback(e), [prevent], [preparation(e)]) - rejestruje nowy skrót
component.exec('shortcut') - krótkie oceny

Krótkie:

enter
esc
tab
cmd, meta, win
shift, capslock
ctrl
alt
space
backspace, del, delete
left, up, right, down
F1, F2, F3, F4, F5, F6, F7, F8, F9, F10, F11, F12
lub przystosowane kody kluczowe {Number} lub znaky kluczy {String(1)}
ins
remove oznacza backspace lub delete
save
selectall
clone
undo
redo
Wsparcie .shortcut, czytaj dalej

Przykład:

// SETTER(true, ...) --> works in jComponent +v9.0.0

SETTER(true, 'shortcuts/register', 'cmd + enter', function(e) {
    console.log('PRESSED: CMD + ENTER');
});

SETTER(true, 'shortcuts/register', 'alt + p', function(e) {
    console.log('PRESSED: ALT + P');
});

SETTER(true, 'shortcuts/register', 'esc', function(e) {
    console.log('PRESSED: esc');
});

// +v3 supports multiple shortcuts at the one time:
SETTER(true, 'shortcuts/register', 'cmd+enter, ctrl+enter', function(e) {
    console.log('PRESSED: CMD + ENTER');
});

// NEW: you can make preparation for the shortcut
SETTER(true, 'shortcuts/register', 'cmd+enter, ctrl+enter', function(e) {
    console.log('PRESSED: CMD + ENTER');
}, function(e) {
	// You can enable/disable shortcut manually in the "preparation function"
	// but you need to "return {Boolean}", true will approve shortcut (it calls of the shortcut "callback")
	// otherwise "returning false" the shorcut will be skipped
	return e.target.tagName !== 'INPUT';
});

Nowa deklaracja inline:

<button class="exec shortcut" data-shortcut="F1" data-exec="METHO_TO_CALL">Help</button>

Klasa .shortcut wyemituje wydarzenie click
Właściwość e.shortcut będzie zawierać instancję wydarzenia z wydarzenia keydown

Nowe sesje krótkie:

// Open session for new shortcuts
// The methods disables all registered shortcuts while session is not end
SETTER('shortcuts/session', function(register) {
	register('esc', function() {

		// Cancels session
		SETTER('shortcuts/end');

	});
});

Użyj go z <ui-component name="shortcuts">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja MIT.

example.html

<ui-component name="shortcuts"></ui-component>

<div>PRESS ENTER or INSERT</div>

<script>
    var keyvalue = {};
    SETTER(true, 'shortcuts/register', 'ENTER', () => alert('ENTER'));
    SETTER(true, 'shortcuts/register', 'ins', () => alert('INSERT'));
</script>