Java, UX, HTML, CSS, WEB-design

Создайте свои собственные букмарклеты с помощью jQuery

Краткое описание по статье Создайте свои собственные букмарклеты с помощью jQuery

Название: Создайте свои собственные букмарклеты с помощью jQuery . Краткое описание: [ad_1] ⭐ Томми С . Дата публикации: 25.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Томми Сэйлор

  • 0 Комментарии

Создайте свои собственные букмарклеты с помощью jQuery

  • 11 минут чтения

  • Кодирование, jQuery

Краткое резюме ↬

Букмарклеты представляют собой небольшие приложения на основе JavaScript в виде ссылок. Зачастую инструменты и функции «одним щелчком мыши» обычно используются для расширения функциональных возможностей браузера и взаимодействия с веб-службами. Они могут делать такие вещи, как публиковать сообщения в вашем блоге WordPress или Tumblr, отправлять любой выделенный текст в поиск Google или изменять CSS текущей страницы… и много другие вещи!

Поскольку они работают на JavaScript (язык программирования на стороне клиента), букмарклеты (иногда называемые «фавелетами») поддерживаются всеми основными браузерами на всех платформах без каких-либо дополнительных подключаемых модулей или программного обеспечения. В большинстве случаев пользователь может просто перетащить ссылку букмарклета на свою панель инструментов, и все!

Создайте свои собственные букмарклеты с помощью jQuery

Еще после прыжка! Продолжить чтение ниже ↓

В этой статье мы рассмотрим, как Сделай свой собственный букмарклеты, использующие JavaScript-фреймворк jQuery.

Начиная

Вы можете создать фиктивный URI с помощью JavaScript, предварив код javascript:вот так:

<a href="https://www.smashingmagazine.com/2010/05/make-your-own-bookmarklets-with-jquery/javascript: alert("Arbitrary JS code!');">Alert!</a>

Обратите внимание, что когда мы помещаем его в href атрибут, мы заменили двойные кавычки («) одинарными кавычками (‘), поэтому href значение атрибута и функция JavaScript не обрываются на полпути. Это не единственный способ обойти эту проблему, но пока сойдет.

Мы можем развить эту концепцию настолько далеко, насколько захотим, добавив несколько строк JavaScript внутри этих кавычек, причем каждая строка будет разделена точкой с запятой (;) без разрыва строки. Если ваш букмарклет не будет нуждаться в дальнейшем обновлении, этот метод «все включено», вероятно, подойдет. В этом уроке мы вынесем код JavaScript и сохраним его в файле .JS, который мы разместим в другом месте.

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

<a href="https://www.smashingmagazine.com/2010/05/make-your-own-bookmarklets-with-jquery/javascript:(function(){document.body.appendChild(document.createElement("script')).src="https://foo.bar/baz.js";})();">Externalized Bookmarklet</a>

Это ищет тело документа и добавляет <script> элемент к нему с src мы определили, в данном случае, «https://foo.bar/baz.js». Имейте в виду, что если пользователь находится на пустой вкладке или месте, которое по какой-то причине не имеет тела, ничего не будет происходит, поскольку ничего нельзя добавить.

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

Введите jQuery

Поскольку многие из вас могут быть знакомы с инфраструктурой jQuery, мы будем использовать ее для создания нашего букмарклета.

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

(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 = "https://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!
        })();
    }

})();

(Сценарий добавлен из исходного кода jQuery, адаптированный Полом Айришем: https://pastie/462639)

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

Получение информации

В зависимости от типа букмарклета, который вы создаете, может оказаться целесообразным получить информацию с текущей страницы. Две самые важные вещи document.locationкоторый возвращает URL-адрес страницы, и document.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;
}

(Изменено с https://www.codetoad.com/javascript_get_selected_text.asp)

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

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

Работа с персонажами

Если вы будете помещать весь свой JavaScript в саму ссылку, а не во внешний файл, вам может понадобиться лучший способ вложения двойных кавычек (например, «кавычка внутри кавычки»), чем просто понижение их уровня до одинарных. Использовать &quot; на своем месте (например, «цитата &quot;в цитате&quot;»):

<a
href="https://www.smashingmagazine.com/2010/05/make-your-own-bookmarklets-with-jquery/javascript:var%20yourname=prompt(&quot;What%20is%20your%20name?&quot;);alert%20(&quot;Hello,%20"+yourname+"!&quot;)">What is your name?</a>

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

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

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

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

Ради интереса давайте сделаем небольшой букмарклет, который проверяет, есть ли выбранное слово на странице, и, если есть, выполняет поиск в Википедии и показывает результаты в iFrame, анимированном с помощью jQuery.

Мы начнем с объединения фреймворка из «Enter jQuery» с функцией выделения текста из «Grabbbing Information»:

(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 = "https://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("et something?");
}

Убедившись, что мы получили действительное значение для «s», мы добавим новое содержимое в тело документа. В нем будут: контейнер div («wikiframe»), фоновая завеса («wikiframe_veil») и абзац «Загрузка…», сам iFrame и немного CSS, чтобы все выглядело красиво и прикреплялось над фактической страницей.

if ((s != "") && (s != null)) {
    $("body").append("
    <div id='wikiframe'>
        <div id='wikiframe_veil' style=’>
            <p>Loading...</p>
        </div>
        <iframe src="https://en.wikipedia/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-адреса поиска Википедии плюс «s». Его CSS устанавливает его в display: none; по умолчанию, поэтому мы можем сделать его более величественным, когда его страница загружается через его onload атрибут и анимацию jQuery.

После того, как все это будет добавлено на страницу, мы растворимся в завесе фона.

Обратите внимание на обратную косую черту в конце каждой строки добавленного HTML. Это позволяет использовать несколько строк и упрощает редактирование.

Почти готово, но нам нужно убедиться, что эти элементы еще не существуют, прежде чем добавлять их. Мы можем добиться этого, поместив приведенный выше код внутрь ($(“#wikiframe”).length == 0) условный оператор, сопровождаемый некоторым кодом, чтобы удалить все это, если оператор возвращает отрицательное значение.

Конечный результат .JS файл:

(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 = "https://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;
            }
            if ($("#wikiframe").length == 0) {
                var s = "";
                s = getSelText();
                if (s == "") {
                    var s = prompt("et something?");
                }
                if ((s != "") && (s != null)) {
                    $("body").append("
                    <div id='wikiframe'>
                        <div id='wikiframe_veil' style=’>
                            <p>Loading...</p>
                        </div>
                        <iframe src="https://en.wikipedia/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);
                }
            } else {
                $("#wikiframe_veil").fadeOut(750);
                $("#wikiframe iframe").slideUp(500);
                setTimeout("$('#wikiframe').remove()", 750);
            }
            $("#wikiframe_veil").click(function(event){
                $("#wikiframe_veil").fadeOut(750);
                $("#wikiframe iframe").slideUp(500);
                setTimeout("$('#wikiframe').remove()", 750);
            });
        })();
    }

})();

Обратите внимание, что мы исчезаем и удаляем содержимое «викифрейма», если пользователь повторно щелкает букмарклет после его загрузки. а также если пользователь нажмет на его фоновую завесу.

Букмарклет HTML для загрузки этого скрипта:

<a href="https://www.smashingmagazine.com/2010/05/make-your-own-bookmarklets-with-jquery/javascript:(function(){if(window.myBookmarklet!==undefined){myBookmarklet();}else{document.body.appendChild(document.createElement("script')).src="https://iamnotagoodartist.com/stuff/wikiframe2.js?";}})();">WikiFrame</a>

Викифрейм

Видеть, что (window.myBookmarklet!==undefined) условно? Это гарантирует, что файл .JS добавляется только один раз и сразу переходит к запуску myBookmarklet() функцию, если она уже существует.

Сделать его лучше

Этот пример был забавным, но он определенно мог быть лучше.

Во-первых, он не сжат. Если к вашему сценарию будут обращаться часто, может быть хорошей идеей сохранить две версии вашего кода: одну обычную рабочую версию и одну сжатую минимизированную версию. Предоставление сжатого файла вашим пользователям сэкономит время загрузки для них и пропускную способность для вас. Проверьте ссылки на ресурсы ниже для некоторых хороших компрессоров JavaScript.

Хотя букмарклет технически работает в IE6, использование в нем статического позиционирования означает, что он просто добавляет себя к нижней части страницы. Не очень удобно! Потратив еще немного времени и внимания на различия в рендеринге в IE, можно было бы заставить букмарклет работать и Смотреть одинаковые (или, по крайней мере, сопоставимые) в разных браузерах.

В нашем примере мы использовали jQuery, который является отличным инструментом для разработки более сложных приложений JavaScript. Но если ваш букмарклет прост и не требует большого количества манипуляций с CSS или анимации, скорее всего, вам не нужно что-то настолько сложное. Простого старого JavaScript может быть достаточно. Помните, чем меньше вы заставляете пользователя загружаться, тем быстрее он будет работать и тем счастливее он будет.

Букмарклеты

О чем следует помнить и передовой опыт

Непроверенный код — это сломанный код, как скажут вам программисты старой школы. Хотя букмарклеты будут работать в любом браузере, поддерживающем JavaScript, тестирование их в как можно большем количестве браузеров не помешает. Особенно при работе с CSS целый ряд переменных может повлиять на работу вашего скрипта. По крайней мере, пригласите своих друзей и семью протестировать букмарклет на их компьютерах и в их браузерах.

Говоря о CSS, помните, что любой контент, который вы добавляете на страницу, будет зависеть от CSS этой страницы. Таким образом, было бы разумно применить сброс к вашим элементам, чтобы переопределить любые потенциально унаследованные поля, отступы или стили шрифта.

Поскольку букмарклеты по определению являются второстепенными, многие рекомендации для JavaScript, такие как ненавязчивость и изящная деградация, не так священны, как обычно. Однако по большей части здоровое понимание лучших практик для традиционного JavaScript и его фреймворков поможет вам:

  • Разработайте стиль кодирования и придерживайтесь его. Держите его последовательным и держите его аккуратным.
  • Успокойтесь в браузере. Не запускайте процессы, которые вам не нужны, и не создавайте ненужные глобальные переменные.
  • Используйте комментарии там, где это уместно. Они значительно облегчают возврат к коду позже.
  • Избегайте сокращений JavaScript. Используйте много точек с запятой, даже если ваш браузер позволит вам обойтись без них.

Дополнительные ресурсы

Полезные инструменты JavaScript

  • Инструмент проверки JavaScript JSLint.
  • Bookmarklet Builder Создан еще в 2004 году, но все еще полезен.
  • Список действительно полезных бесплатных инструментов для разработчиков JavaScript Предоставлено W3Avenue.
  • JS Bin Инструмент совместной отладки JavaScript с открытым исходным кодом.
  • Как динамически вставлять Javascript и CSS Хорошо написанное исследование добавления JavaScript и CSS и возможных подводных камней.
  • Run jQuery Code Bookmarklet Довольно классный скрипт, который проверяет и загружает jQuery внутри букмарклета. Также есть удобный генератор.
  • Google AJAX Libraries API Вы предпочитаете Prototype или MooTools jQuery? Загрузите свои предпочтения прямо из Google и сэкономьте пропускную способность.

JavaScript и CSS-компрессоры

  • Онлайн-инструмент сжатия Javascript Компрессор JavaScript с методами Minify и Packer.
  • Чистый CSS Форматировщик и оптимизатор CSS, основанный на csstidy, с приятным графическим интерфейсом и множеством опций.
  • Scriptalizer Объединяет и сжимает несколько файлов JavaScript и/или CSS.
  • JavaScript Unpacker and Beautifier Полезно для перевода сверхсжатого кода в нечто более понятное для человека (и наоборот).

Коллекции

  • мои закладки
  • Bookmarklets.com
  • Букмарклеты, фавелы и сниппеты через Smashing Magazine.
  • Quix «Ваши букмарклеты на стероидах».
  • Букмарклеты Джесси
  • Марклеты

Дальнейшее чтение:

  • Экономия времени, инструменты и полезные сервисы для веб-дизайнеров
  • Основные шаблоны плагинов jQuery
  • Полезные демонстрации функций jQuery для ваших проектов
Сокрушительная редакция
(аль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Создайте свои собственные букмарклеты с помощью jQuery

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»