Сделайте свой собственный Bookmarklets с JQuery

Bookmarklets малые JavaScript-питанием по ссылке вида.Часто “ одного click” инструменты и функции, they’ повторно обычно используются для расширения функциональности браузера и взаимодействовать с веб-службами.Они могут делать такие вещи, как сообщение на ваш WordPress или Tumblr блог, представить любой выделенный текст в Google Search, или изменить текущую page’ с CSS … и many! Прочего

Потому что они работают на JavaScript (на стороне клиента язык программирования), букмарклеты (иногда называется “ favelets”) поддерживается всеми основными браузерами на всех платформах, без каких-либо дополнительных плагинов или программное обеспечение, необходимое.В большинстве случаев пользователь может просто перетащить закладку ссылку на свою панель инструментов и that’! ИТ

Make Your Own Bookmarklets with jQuery

В этой статье we’ пойдем путем, как сделать ваш own букмарклеты, используя jQuery JavaScript framework.

Как Started

Вы можете сделать искусственную URI с JavaScript по предваряя код с javascript:, вот так:

<a href="javascript: alert('Arbitrary JS code!');">Alert!</a>

Обратите внимание, что когда мы ставим его в href атрибут, мы заменили то, что, как правило, двойные кавычки (“) с одинарными кавычками (‘), поэтому href attribute’ S значение и наличие функции don’ Tполучить отрезали полпути.That’ не единственный способ обойти эту проблему, но it’ сделаю для now.

Мы можем принять эту концепцию, насколько мы хотим, добавив несколько строк JavaScript внутри этих кавычек, с каждой линией через точку с запятой (;), обрыве цепи без.Если ваша закладка won’ т необходимо любому обновлению позже, этот метод “ Все inclusiveness”, вероятно, будет хорошо.Для этого урока, we’ будете экстернализации кода JavaScript и хранить его в файл JS, который we’. LL хозяин где-то else.

Ссылка на внешнее управление Букмарклет:

<a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://foo.bar/baz.js';})();">Externalized Bookmarklet</a>

Это выглядит для document’ тело и добавляет <script> элементов к нему с src we’ ве определена, в этом случае, “ http://foo.bar/baz.js”.Имейте в виду, что если пользователь находится на пустой вкладке или место, в котором, по некоторым причинам, не имеет тела, ничего не произойдет, так как ничто не может быть добавлено to.

Вы можете разместить файл JS, что там, где удобно, но имейте в виду пропускную способность, если вы ожидаете . Ton из traffic.

Войти jQuery

Так как многие из вас могут быть знакомы с jQuery рамки, we’ будете использовать, чтобы строить наше bookmarklet.

. Лучший способ получить его в наших файлов JS является добавление его от Google’ S CDN, условно завернуты только включить его в случае необходимости:

(function(){

	// the minimum version of jQuery we want
	var v = "1.3.2";

	// check prior inclusion and version
	if (window.jQuery === undefined || window.jQuery.fn.jquery < v) {
		var done = false;
		var script = document.createElement("script");
		script.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + v + "/jquery.min.js";
		script.onload = script.onreadystatechange = function(){
			if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
				done = true;
				initMyBookmarklet();
			}
		};
		document.getElementsByTagName("head")[0].appendChild(script);
	} else {
		initMyBookmarklet();
	}
	
	function initMyBookmarklet() {
		(window.myBookmarklet = function() {
			// your JavaScript code goes here!
		})();
	}

})();

(Script добавления из исходного кода JQuery, в адаптирована Paul ирландский: http://pastie.org/462639)

Это начинается с определения v, минимальная версия JQuery, что наш код можно смело использовать.Используя это, он затем проверяет, есть ли JQuery должна быть загружена.Если так, то это добавляет ее на страницу с кросс-браузерная поддержка обработки событий для запуска initMyBookmarklet JQuery, когда будет готово.Если нет, то он прыгает прямо на initMyBookmarklet, который добавляет myBookmarklet в глобальном окна object.

Захват Information

В зависимости от того, какая закладка вы делаете, может быть, стоит взять информацию из текущей страницы.Два самых важных вещей document.location, который возвращает URL страницы, и document.title, которая возвращает страницы title.

Вы также можете вернуть любой текст, который пользователь может быть выбран, но это немного сложнее:

function getSelText() {
	var SelText = '';
	if (window.getSelection) {
		SelText = window.getSelection();
	} else if (document.getSelection) {
		SelText = document.getSelection();
	} else if (document.selection) {
		SelText = document.selection.createRange().text;
	}
	return SelText;
}

(С изменениями по http://www.codetoad.com/javascript_get_selected_text.asp)

Другим вариантом является использование JavaScript в input функция запроса пользователя с помощью всплывающего:

var yourname = prompt("What's your name?","my name...");

Работа с Characters

Если вы будете класть все ваши JavaScript в самой ссылке, а не внешний файл, вы можете быть лучше, чтобы гнездо двойные кавычки (как в "цитату" в рамках цитата ") не только понижение их всинглов.Используйте " на их место (как и в "цитату " пределах цитатой ""):

<a
href="javascript:var%20yourname=prompt(&quot;What%20is%20your%20name?&quot;);alert%20(&quot;Hello,%20"+yourname+"!&quot;)">What is your name?</a>

В этом примере мы также кодируются пространств в %20, которое может быть полезно для старых браузеров, или чтобы убедиться, что ссылка не развалится в пути somewhere.

В JavaScript, вы можете иногда нужно бежать кавычки.Вы можете сделать это, предваряя их обратную косую черту (\):

alert("This is a \"quote\" within a quote.");

Собираем все Together

Просто для удовольствия, давайте немного закладка, которая проверяет, есть ли выбранное слово на странице, и, если есть, поиски Wikipedia и показывает результаты в JQuery анимационный IFRAME.

Мы начнем путем объединения в рамках от "Enter JQuery" с функцией выделения текста из "Захват информации":

(function(){

	var v = "1.3.2";

	if (window.jQuery === undefined || window.jQuery.fn.jquery < v) {
		var done = false;
		var script = document.createElement("script");
		script.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + v + "/jquery.min.js";
		script.onload = script.onreadystatechange = function(){
			if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
				done = true;
				initMyBookmarklet();
			}
		};
		document.getElementsByTagName("head")[0].appendChild(script);
	} else {
		initMyBookmarklet();
	}
	
	function initMyBookmarklet() {
		(window.myBookmarklet = function() {
			function getSelText() {
				var s = '';
				if (window.getSelection) {
					s = window.getSelection();
				} else if (document.getSelection) {
					s = document.getSelection();
				} else if (document.selection) {
					s = document.selection.createRange().text;
				}
				return s;
			}
			// your JavaScript code goes here!
		})();
	}

})();

Следующее, мы будем искать любой выбранный текст и сохранить его в переменной, "S".Если ничего не выбрано, мы постараемся предложить пользователю что-то:

var s = "";
s = getSelText();
if (s == "") {
	var s = prompt("Forget something?");
}

После проверки, чтобы убедиться, что мы получили фактическое значение "S", мы будем добавлять новый контент для тела документа.В нем будет: контейнер DIV ("wikiframe"), фон вуаль ("wikiframe_veil") и "Loading ..."пункта, IFrame себя, и некоторые CSS, чтобы все выглядело симпатично и прикрепить все, что выше фактического page.

if ((s != "") && (s != null)) {
	$("body").append("\
	<div id='wikiframe'>\
		<div id='wikiframe_veil' style=''>\
			<p>Loading...</p>\
		</div>\
		<iframe src='http://en.wikipedia.org/w/index.php?&search="+s+"' onload=\"$('#wikiframe iframe').slideDown(500);\">Enable iFrames.</iframe>\
		<style type='text/css'>\
			#wikiframe_veil { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(255,255,255,.25); cursor: pointer; z-index: 900; }\
			#wikiframe_veil p { color: black; font: normal normal bold 20px/20px Helvetica, sans-serif; position: absolute; top: 50%; left: 50%; width: 10em; margin: -10px auto 0 -5em; text-align: center; }\
			#wikiframe iframe { display: none; position: fixed; top: 10%; left: 10%; width: 80%; height: 80%; z-index: 999; border: 10px solid rgba(0,0,0,.5); margin: -5px 0 0 -5px; }\
		</style>\
	</div>");
	$("#wikiframe_veil").fadeIn(750);
}

Мы устанавливаем Iframe в src атрибута для поиска URL Wikipedia плюс "с".Его CSS устанавливает его в display: none; по умолчанию, так что мы можем это сделать грандиозное входа, когда его загрузки страницычерез свои onload атрибут и JQuery animation.

После все, что добавляется на страницу, мы буд ...

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 23.05.2010 by Newsbot