Standardimplementierung

Zur Verdeutlichung wurden Callbacks eingebaut.

$(function() {
    $('.selectable').selectedText({
        start: function() {
            $('.selected').text('');
            $('.status').text('started selecting');
        },
        selecting: function(text) {
            $('.selected').text(text);
            $('.status').text('selecting');
        },
        stop: function(text) {
            $('.selected').text(text);
            $('.status').text('stopped selecting');
        }
    });
});

So sieht es aus:

Limit

Wir suchen in einem jeden Element nach einem Link, welchen wir als Handler an das Plugin zurück geben.

$(function() {
    $('.selectable').selectedText({
        min: 3,
        max: 20,
        start: function() {
            $('.selected').text('');
            $('.status').text('started selecting');
        },
        selecting: function(text) {
            $('.selected').text(text);
            $('.status').text('selecting');
        },
        stop: function(text) {
            $('.selected').text(text);
            $('.status').text('stopped selecting');
        }
    });
});

So sieht es aus:

Suche

Durch dieses Plugin lässt sich beispielsweise sehr einfach eine Text-Suchfunktion realisieren. Dabei geben wir den markierten Text einfach an unser Pop-Up für die Suche weiter. Hier ein einfaches Beispiel mit Google und Bing.

$(function() {
    $('.selectable').selectedText({
	min: 3,
	stop: function(text, e) {
	    $('#search').css({
		top: (e.pageY+10)+'px',
		left: (e.pageX+10)+'px'
	    }).show().children('input').val(text);
	}
    });
    var timeout;
    $('#search').mouseout(function() {
	timeout = setTimeout(function() {
	    $('#search').hide().children('input').val('');
	}, 500);
    }).mouseover(function() {
	clearTimeout(timeout);
    });
    $('#search ul li a').click(function() {
	var uri = $(this).attr('href'),
	    query = $('#search input').val();
	$('#search').hide().children('input').val('');
	window.open(uri+'?q='+query);
	return false;
    });
});

So sieht es aus: