Tehke interaktiivseid pildimärgiseid qTipiga (jQuery plugin)

Reklaam

Pildid võivad olla üsna elutud ja igavad - kui need pole interaktiivsed ja fantastilised, see tähendab. Ja qTip teeb selle jQuery abil lihtsaks. Siit saate teada, kuidas saate lisada interaktiivseid silte, mis ilmuvad, kui kasutaja hõljub pildi osa kohal.

Miks sa seda teha tahaksid? Isiklikult kasutan seda tehnikat uuel e-kaubanduse saidil - nii saab kasutaja hõljutada kursorit selle elementidega stseen (nagu Ikea kataloog), kuvatakse toote pealkiri ja ostukorvi lisamise nupp dünaamiliselt. Seda saaks kasutada ka ülikoolilinnaku või linnakaardil, kus on palju veidralt kujundatud elemente, mida võiks kirjeldusega tõesti ilma kaarti risustamata teha. Väga lihtne näide oleks ka Facebooki sildid, kus inimese näo kohal hõljumine ütleb teile, kes nad on. Selle kasutamist piirab ainult teie kujutlusvõime.

Märkus. Eeldan, et siin on jQuery ja HTML-i kohta väga põhiteadmised - vähemalt veenduge, et olete lugenud valijad jQuery juhendaja - alustamine: põhitõed ja valijadEelmisel nädalal rääkisin sellest, kui oluline on jQuery iga kaasaegse veebiarendaja jaoks ja miks see on fantastiline. Sel nädalal arvan, et on aeg käes käsi mõne koodiga määrida ja saime teada, kuidas ...

Loe rohkem , meetodid JQuery (2. osa) sissejuhatus: meetodid ja funktsioonidSee on osa pidevast jQuery veebiprogrammeerimissarja tutvustamisest. 1. osa hõlmas jQuery põhitõdesid selle kaasamiseks oma projekti ja valijaid. 2. osas jätkame ... Loe rohkem ja anonüümsed funktsioonid JQuery (3. osa) sissejuhatus: lehe ootamine ja anonüümsed funktsioonidjQuery on vaieldamatult kaasaegse veebiarendaja jaoks oluline oskus ja loodan selles lühikeses miniseerias anda teile teadmisi, et saaksite seda oma veebiprojektides kasutama hakata. ... Loe rohkem .

qTip

qTip on jQuery jaoks mõeldud kõikehõlmav tööriistavihje ja siltide pistikprogramm, mis sisaldab erinevaid stiile. Me kasutame seda spetsiaalselt pildikaardi funktsioonidega, kuid see pole kindlasti veel kõik, mida see teha saab. Heitke pilk pistikprogrammi leht lisateabe saamiseks või alustamiseks lugege edasi.

Pildikaardi tegemine

Piltkaardid ise pole kindlasti uus asi - märgistuse elemendid on juba pikka aega saadaval ja juba tagasi peeti tegelikult heaks viisiks navigatsioonisüsteemi esitlemiseks - pildi klõpsatavad osad seovad erinevatega sektsioonid. Funktsiooni selle osa jaoks kasutatakse endiselt sama põhipiltide kaardikoodi, seega peame selle kõigepealt määratlema.

Piltide kaardi loomiseks võite kasutada mitmesuguseid tööriistu - Adobe Fireworks või Photoshop -, kuid lihtsaim ja tasuta lahendus on veebitööriist. nagu see. See pole kindlasti ainus veebitööriist ja ma ei toeta seda eriti, kuid tundus, et seda on piisavalt lihtne kasutada - kui leiate mõne parema, teatage sellest kommentaarides. Saate määratleda ristkülikukujulise, ümmarguse või isegi hulknurkse kuju.

Alustage pildi üleslaadimisega - sel juhul nimetan ma MakeUseOfi veebisaidi ekraanipildi. Võimalik, et peate oma tööriistast täieliku pildi vaatamiseks suurenema.

Peaks olema üsna ilmne, kuidas seda kasutada nagu tavalist maalimisprogrammi - ainus, mis meelde tuleb et polükuju joonistamisel peate sulgemiseks hoidma SHIFT-i viimases punktis, et sulgeda ja lõpetama. Siin määratlesin 4 kuju.

Kui olete valmis, kerige alla antud kood ja kopeerige see välja.

Looge uus põhiline HTML-dokument ja puhastage seda pisut, lisades pildisildi, et osutada oma algsele pildile. Lihtsaim viis selle testimiseks on a JSFiddle. Siin on minu proov, algseisundis (lõplik koodikomplekt antakse hiljem, ärge muretsege).

Pidage meeles, et andke pilt a kasutamise kaart atribuut, osutades #id kaardil, mis sisaldab koordinaate (usemap = ”# mymap”, näiteks).

Lisamine qTipis

Kui olete oma koodi JSFiddleisse kleepinud, näete, et külgribal on võimalus lisada jQuery. Veenduge, et see lubaksite. Saame siia lisada ka muid väliseid ressursse, nii et minge edasi ja lisage qTip-i allalaadimislehel loetletud CSS-i ja JS-i URL-id. Kopeerige ja kleepige lingid „kõik funktsioonid ja stiilid” JSFiddle'i - kuigi praktikas kasutaksite kohandatud funktsioonide või stiilide komplekti loomiseks selle all olevat konfiguratsioonivahendit.

QTipi täielik juhend võib olla leiti siit, kuid laseme edasi minna ja luua mõned lihtsad tekstipõhised tööriistavihjed. Järgmine Javascript sihib kõiki laaditavaid alaelemente (üksusi, mis määravad meie pildikaardi osad), öeldes, et qTip töötab nende kallal sisuga, mis on atribuudis alt.

$ (dokument). juba (funktsioon () { $ ("ala"). igaüks (funktsioon (register, element) { var link = $ (see); $ (link) .qtip ({ sisu: link.attr ("alt") }); }); });

Vaikekujundus on üsna kole - saate vaadata selle demo siin - aga see on okei, rakendame niimoodi hüpikutele kohandatud kujunduse (Olen osa koodist ära jätnud, näidates ainult qTip-i konkreetset jaotist).

$ (link) .qtip ({ sisu: link.attr ("alt"), stiil: { klassid: 'qtip-bootstrap qtip-shadow' } });

Olen lisanud ka BootStrap CSS faili välise failina, et inetuid standardseid brauseri fonte sortida. Ma tean, et see on väga suur ülepaisutamine. Ikka: palju parem!

Üks asi, mida ma nüüd märkan, on see, et parempoolse allserva vaikimisi positsioon pole tegelikult ideaalne. Selle kohandamiseks kasutagem positsiooniseadet:

$ (link) .qtip ({ sisu: link.attr ("alt"), stiil: { klassid: 'qtip-bootstrap qtip-shadow' }, positsioon: { sihtmärk: 'hiir', kohandage: { hiir: tõene // võib ära jätta (nt vaikekäitumine) } } }); });

Nüüd hõljutage kursorit ükskõik millise elemendi kohal ja nõuanne järgib teie hiirt. Sa saad vaadake valmis demo siin.

Võite teha ka hüpikrežiimi (nii et kõik muu on tuhmiks ja selle juurde naasmiseks peate klõpsama väljaspool) või isegi laadige mõnda sisu AJAX-i kaudu. Ma arvan, et see on päris ilus väike pistikprogramm, mis hingab üsna kasutamata HTML-i standardile uue elu - vaatame, mida saate tulla, ja tehke palun kommentaarides meile teada, kui olete midagi teinud seda.