Bookmarklety sú malé JavaScript aplikácie vo forme odkazu. Často "jedno-klik" nástroje a funkcie, zvyčajne sú používané na rozšírenie funkčnosti prehliadača a komunikácie s webovými službami.
Bookmarklety sú malé JavaScript aplikácie vo forme odkazu. Často „jedno-klik“ nástroje a funkcie, zvyčajne sú používané na rozšírenie funkčnosti prehliadača a komunikácie s webovými službami. Môžu robiť veci ako poslať správu do vášho WordPress alebo Thumblr blog, odoslať akýkoľvek označený text do Google Search, alebo modifikovať CSS aktuálnej stránky … a mnoho ďalších vecí!
Vzhľadom k tomu, že bežia na JavaScripte (client-side scriptovací jazyk), bookmarklety (niekedy tiež nazývané „favelets“) sú podporované všetkými najpoužívanejšími prehliadačmi na všetkých platformách, bez dodatočných pluginov alebo inštalácie ďalšieho softvéru. Vo väčšine prípadov stačí ak užívateľ pretiahne bookmarklet odkaz na svoj toobar, a je to!
V tomto článku sa budeme zaoberať, ako vytvoriť svoj vlastný bookmarklet pomocou jQuery frameworku.
Môžete si urobiť falošnú URI s JavaScript inicializáciou kódu javascript: , takto:
Alert!
Všimnite si, že keď to dáme do href atribútu, nahradíme to čo povodne mali byť úvodzovky(") jednoduchým apostrofrom ('), takže hodnota href atribútu a JavaScript funkcie sa nebudú križovať. Toto nieje jediný spôsob, ako obísť tento problém, ale zatiaľ to bude stačiť.
Môžeme si vziať tento koncept ak chceme, pridávanie viac riadkov JavaScript kódu vo vnútri týchto úvodzoviek, pre každý oddelený riadok bodkočiarkou, bez zalomenia riadku.
Externalized Bookmarklet
Tento odkaz vyhľadá body dokumentu a pripojí <script> prvok, s src, ktorý sme definovali v tomto prípade http://foo.bar/baz.js . Majte na pamäti, že ak je užívateľ na prázdnej karte, alebo mieste, ktoré z nejakého dôvodu nemá body, nestane sa nič, pretože nieje k čomu pripojiť.
Môžete hostovať .js súbor všade, kde je to vhodné, ale majte na pamäti, pokiaľ očakávate tony trafficu.
Pretože mnohý z vás poznajú jQuery framework a tento server je zameraný práve jQuery, budeme ho používať k stavbe bookmarkletu.
Najjednoduchší spôsob, ako dostať dnu náš .js súbor je pridanie Google CDN, ale s trošku extra logikou:
if (typeof jQuery == 'undefined') {
var jQ = document.createElement('script');
jQ.type = 'text/javascript';
jQ.onload=runthis;
jQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
document.body.appendChild(jQ);
} else {
runthis();
}
function runthis() {
// váš JavaScript kód ide sem!
}
Čisté a jednoduché. Najprv skontroluje, či je už jQuery načítaný, pretože veľa stránok, ktoré navštívite ho už môžu používať, a nechceme, aby bol nadbytočný. Ak ešte nieje načítaný, urobí tak za pomoci Google a nastaví funkciu runthis() aby bežala po skončení načítavania. Ak je už jQuery načítaný, preskočí rovno k runthis().
V závislosti na druhu bookmarkletu na ktorom robíte, by bolo vhodné ak by sa dali sťahovať informácie z aktuálnej stránky. Dve najdôležitejšie veci sú document.location, ktorý vracia URL stránky, a document.title, ktorý vracia title stránky.
Dal by sa tiež vrátiť akýkoľvek text, ktorý má užívateľ označený, ale je to trochu zložitejšie:
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;
}
Nezachádzajme do podrobností, tento kód prvýkrát definuje prázdnu SelText premennú, a potom použitím niekoľkých rôznych funkcií sa pokúša ju naplniť označeným textom, jednotlivými metódami pre špecifické prehliadače. Nieje to tak jednoduché, alebo tak čisté ako by sme chceli ale je to funkčné.
Ďalšou možnosťou je použiť JavaScript input funkciu pre dotaz užívateľa pomocou pop-up:
var vasemeno = prompt("Ako sa volate?", "moje meno...");
Ak budete vkladať celý JavaScript do odkazu radšej ako do externého súboru, možno budete potrebovať lepší spôsob pre umiestnenie úvodzoviek (ako v, " citáte 'bez úvodzoviek'"), radšej ako zníženie úrovne na apostrof.
Použite na ich mieste &quot; (ako v, " citáte "bez úvodzoviek""):
<a href="javascript:var%20vasemeno=prompt("Ako%20sa%20volate?");alert%20("Hello,%20"+vasemeno+"!")">Ako sa voláte?</a>
V tomto príklade máme zakódované medzery ako %20, z čoho by mohli ťažiť staršie prehliadače, alebo tiež zabezpečí, že sa odkaz pri tranzite nerozpadne.
V JavaScripte, niekedy budete potrebovať escapovat úvodzovky. Môžete tak urobiť priradením im spätného lomítka (\):
alert("Toto je \"citát\" v úvodzovkách.");
Len tak pre zábavu, poďme si urobiť bookmarklet, ktorý skontroluje, či je na stránke označené slovo, ak je, vyhľadá ho na Wikipedii a výsledok zobrazí v jQuery animovanom iFrame.
Začneme kombináciou frameworku z „Vložte jQuery“ s funkciou označenia textu z „Informácie o grabovaní“:
if (typeof jQuery == 'undefined') {
var jQ = document.createElement('script');
jQ.type = 'text/javascript';
jQ.onload=runthis;
jQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
document.body.appendChild(jQ);
} else {
runthis();
}
function runthis() {
// váš JavaScript kód ide sem!
}
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;
}
Ďalej sa pozrieme na akýkoľvek vybraný text a uložíme ho do premennej, "s". Pokiaľ nieje nič vybrané, pokúsime sa užívateľovi niečo naznačiť:
var s = "";
s = getSelText();
if (s == "") {
var s = prompt("Nezabudol si na niečo?");
}
Po kontrole, že sme skutočne dostali hodnotu pre "s" pridáme nový obsah do body dokumentu. V ňom bude nasledujúce: kontajner DIV (wikiframe), pozadie (wikiframe_veil) a „Loading ...“ odstavec, iFrame a nejaké CSS, aby to vyzeralo pekne a odsadiť z hora.
if ((s != "") && (s != null)) {
$("body").append("\
\
\
Loading...
\
\
\
\
");
$("#wikiframe_veil").fadeIn(750);
}
Nastavili sme iFrame src atribút k vyhľadávacej stránke, plus „s“. CSS predvolene nastaví na display: none; takže .as.da.sdD1DwsASd
Akonáhle je všetko na stránke pridané, zobrazí sa wikiframe_veil pomocou fade in efektu.
Všimnite si spätné lomkou na konci každého riadku HTML. Tie umožňujú viac riadkov a robia všetko čitateľnejšie a ľahšie editovateľné.
Takmer hotovo. Ale musíme sa uistiť, že tieto prvky neboli už predtým pridané. Môžete to dosiahnuť tým, že vložíte vyššie uvedený kód do ($("#wikiframe").length == 0) podmienky, spolu s niektorým kódom pre odstránenie všetkého ak podmienka vráti false.
Výsledný .js súbor:
if (typeof jQuery == 'undefined') {
// http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS
var jQ = document.createElement('script');
jQ.type = 'text/javascript';
jQ.onload=runthis;
jQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
document.body.appendChild(jQ);
} else {
runthis();
}
function runthis() {
if ($("#wikiframe").length == 0) {
var s = "";
s = getSelText();
if (s == "") {
var s = prompt("Forget something?");
}
if ((s != "") && (s != null)) {
$("body").append("\
\
\
Loading...
\
\
\
\
");
$("#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);
});
}
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;
}
Všimnite si, že spraví fade out efekt a odstráni wikiframe obsah ak užívateľ opätovne klikne na bookmarklet potom, čo je načítaný a ak užívateľ klikne na wikiframe_veil.
Tu je HTML bookmarklet pre načítanie scriptu:
WikiFrame
A tu to máte. Ukážkový príklad toho, čo môžete robiť s bookmarklet a jQuery!
Tento príklad bol pre zábavu, ale rozhodne to mohlo byť lepšie.
Pre začiatok to nieje komprimované. Ak k vášmu skriptu bude pristupovať veľa, udržiavať dve verzie vášho kódu, môže byť dobrým nápadom: jedna normálna pracovná verzia a jedna komprimovaná minimalizovaná verzia. Poskytnutím komprimovanej verzie svojím užívateľom skrátite čas načítavania traffic pre vás. Pozrite sa nižšie pre odkazy na dobré JavaScript kompresory.
Kým bookmarklet technicky funguje v IE6, použitie statickej polohy znamená, že sa pripojí k spodnej časti stránky. Nie veľmi užívateľsky prívetivé! S obetovaním trochu času a pozornosti k vykresľovaním rozdielom, by mohol bookmarklet vyzerať rovnako (alebo aspoň porovnateľne) v rôznych prehliadačoch.
V našom príklade sme použili jQuery, ktoré je vynikajúcim nástrojom re rozvoj pokročilejších JavaScript aplikácií. Ale ak je váš bookmarklet jednoduchý a nepotrebuje veľa CSS manipulácií alebo animácií, pravdepodobne nebudete potrebovať niečo pokročilejšie. Čistý starý JavaScript by mohol stačiť. Pamatajte, že čím menej nútite užívateľov načítavať, tým rýchlejší a šťastnejší budú.
Netestovaný kód je rozbitý kód, to vám povie kde aký old-school programátor. Zatiaľ čo bookmarklet beží na akomkoľvek prehliadači ktorý podporuje JavaScript, jeho testovanie v toľkých prehliadačoch ako je len možné neuškodí.
http://www.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/
Zatiaľ žiadne komentáre
© 2009 Shaddow
hosting od VIPHosting
