40+ Koristni nasveti za skripte s CSS, JavaScript in jQuery
Zanimiv element uporabniškega vmesnika, namigov (imenovan tudi infotips), da majhno polje pojavijo, ko kazalec miške se nahaja nad določenim besedilom ali sliko z informacijami glede elementa, ki se zadržuje nad. V zvezi z uporabniško izkušnjo lahko namigi zagotavljajo uporabnikom najhitrejši in najpreprostejši vir informacij ne da bi morali karkoli klikniti.
Čeprav je najenostavnejši način za dodajanje opisov v besedilo, je uporaba oznake HTML ali TITLE =””, ALT =””. Vendar pa obstaja nekaj res kul opisi orodij in stilov, ki jih lahko ustvarite z JavaScriptom in CSS-jem z uporabo skriptov v opisih orodij. Poglejmo.
CSS
Balloon.css - Balon je knjižnica CSS sestavljen z SasS in LESS , da prikažete interaktivno namig. Vsebino in položaj opisa orodja lahko konfigurirate prek podatkov- atribut. Prikaz orodja lahko prikažete levo, desno ali levo-desno. Lahko celo dodajte Emojis v vsebino. Balloon.css lahko namestite preko NPM in ga naložite s CDNJS.
Simptip - Narejeno z možnostjo SasS Znova konfigurirajte in znova prevedite kodo, da bo ustrezala vašim zahtevam. Položaj in vsebina opisa orodij je mogoče konfigurirati prek imena razreda in opis podatkov atribut. Simptip je na voljo kot Paket NPM, Preja in Bower.
Namig.css - Ena izmed priljubljenih knjižnic CSS za prikaz orodne vrstice, Hint.css uporabljajo številne priljubljene spletne strani, kot so Fiverr, Webflow in Tridiv. Za razliko od drugih dveh knjižnic CSS, Hint.css uporablja oznako Velikost in barvo lahko konfigurirate z imeni razredov z uporabo metodologije BEM. Hint.css je na voljo na NPM, Bower in CDNJS.
Microtip - Še ena odlična knjižnica CSS za ustvarjanje tooltip s “Dostopnost” v mislih, Microtip uporabe oznako in držite vsebino opisa orodij podatkov- nastavite velikost in položaj naslova.
Uporablja CSS spremenljivko, ki vam omogoča, da prilagodite tooltip s samo navaden ol 'CSS datoteko. Spremenljivke CSS so že podprte v številnih spletnih in mobilnih brskalnikih. Microtip je na voljo kot NPM, paket preje in UNPkg CDN.
Wenk - Samo 733 bajtov. Super lahka knjižnica napisano v supermoderni CSS z uporabo CSSNext, LESS in SCSS tako lahko prilagodite in prevedete sloge tako, kot želite. Wenk lahko prenesete iz NPM, Preje in naslednjih brezplačnih storitev CDN: rawgit.com in unpkg.com.
Tooltippy - Druga lahka knjižnica CSS velikosti približno 1 KB. Tooltippy vsebuje več vnaprej pripravljenih tem za styling orodja. Napisano je s predprocesorjem CSS z imenom Stylus. Oglejte si navodila, kako lahko razširite ali prilagodite te teme.
Elegantni namigi - Ta knjižnica ima nekaj vnaprej pripravljene teme lahko spremenite z navedenimi imeni razredov. Za razliko od drugih knjižnic, ki se zanašajo na HTML5 podatkov- ali oznako atribut, ElegantTips zahteva dodaten element, ki se doda v obliki opisa orodja. To vam omogoča dodajte dobesedno vse vsebine namigu, ki presega preprosto besedilo.
Tootik - Ne samo, da ta knjižnica CSS zagotavlja stylsheet v formatu CSS, LESS in SasS, ampak zagotavlja tudi enostaven grafični uporabniški vmesnik za prilagoditev opisa orodja. HTML, ki ga ustvari to orodje, lahko preprosto kopirate in prilepite. Tako preprosto je.
VanillaJS
TippyJS - Poganja ga Popper.js, TippyJS prihaja z številne možnosti za konfiguriranje opisa orodja. Lahko prilagodimo animacije, puščico z orodjem, širino, velikost, temo in še veliko več. Ponuja tudi funkcije za povratni klic, s katerimi lahko izvajajo funkcijo, ko je prikazana in skrita namig. S temi funkcijami je TippyJS ena od naših močnih JavaScript knjižnic na našem seznamu za ustvarjanje opisa orodij.
Namig za Darsain - Ta knjižnica nudi osnovno izvajanje opisa orodij. Kljub temu pa ponuja obsežne možnosti za konfiguriranje obnašanja tootipov in a niz imen razredov za spremembo videza opisa orodij. Tooltip deluje dobro v starejšem brskalniku, kot je IE9 in, če je potrebno, IE8 z nekaj prilagoditvami.
Bubb - Bubb je lahko primeren za napredne uporabnike JavaScripta. Uporaba njegovega obsežnih API-jev, poleg prikazovanja preprostega besedila, programsko lahko dodate pripomoček za bolj kompleksno HTML vsebino. To je precej kul; primeri lahko najdete v dokumentih.
Popper - Vsebuje tehnično abstrakcijo za ustvarjanje nečesa “pops”, kot namig, popover in drop-downs. TippyJS jo uporablja kot temelj knjižnice in ga uporabljajo velika imena na spletu, kot so Bootstrap, Microsoft in Atlassian.
YY Tooltip - Za razliko od drugih knjižnic, YY Tooltip ne zahteva, da dodate element ali atribute HTML. Deluje popolnoma z JavaScriptom, vsebina, položaj in barve pa so definirane v predmetu namesto v elementu HTML. Popolna je za uporabo v povezavi s celotno spletno aplikacijo JavaScript.
Position.js - Še ena odlična domača JavaScript knjižnica za ustvarjanje opisov orodij Position.js ponuja GUI za konfiguriranje funkcije in preprosto kopiranje in lepljenje ustvarjene kode. Position.js lahko uporabite skupaj z React.js ali Vue.js.
Namet Tooltip - Ta knjižnica ponuja 14 možnosti prikaza opisa orodja; na primer prav, levo, spodaj, levo središče, desno, spodaj, itd. Poleg tega je tudi dovolj pameten, da bi lahko prilagodite položaj nasvetov na podlagi razpoložljivega prostora okoli orodja. Oglejte si demo.
MouseTip - Ta knjižnica JavaScrtipt bo ustvarila opis orodja, ki se bo premaknil vzdolž položaja kazalke. Namig je konfiguriran z nestandardnim z miško- namesto uporabe HTML5 podatkov- atribut. Mousetip je na voljo kot modul NPM.
Internet - Precej podoben je MousetTip, opis orodja, ki ga je ustvarila ta knjižnica sledi položaju kazalca. Vse je konfigurirano s pomočjo predmeta JavaScript namesto HTML in atributi so zgrajeni tudi za sodobne brskalnike. Je lahek in hiter.
MTip - Knjižnica JavaScript za Tooltip s odlična združljivost brskalnika. To je združljiv z IE8, popolnoma prilagodljiv prek možnosti, in lahko dodate Tooltip za vsak element, tudi na img (element slike).
Bubblesee - lahka knjižnica JavaScript, ki zagotavlja preprosto funkcionalnost “opis orodja”. Knjižnica JavaScript je preprosta za uporabo brez zapletenih možnosti za prilagajanje izhoda. Datoteka Sass je na voljo, če želite spremeniti videz namigov. Oglejte si demo.
Tipfy - Zgrajena z moderno sintakso JavaScripta, ES6, Tipfy je velik samo 2 KB. Knjižnica ponuja dve različici datotek: tipfy.min.js z uporabo skripta moderna ES6 sintaksa, in tipfy.es5.min.js če potrebujete združljivost s starejšimi brskalniki. Uporablja podatkov- prilagodi opis orodja; na strani data-tipfy, na primer, se uporablja za nastavitev smeri orodja in uporabo text-tipfy-text atribut za dodajanje vsebine opisa orodja.
jQuery
Orodje za orodje - Ta knjižnica ponuja obsežne možnosti za prilagoditev skoraj vsega, kot je tema, animacija, podpora na dotik, vsebina, sprožilec odprtega in zaprtega, Prav tako omogoča poslušanje dogodkov po meri in povratne klice, ki omogočajo razvijalcem, da razširijo namig s funkcijami po meri. Tudi, če ste jQuery plugin, tooltip bi deloval v starejšem brskalniku, kot je IE6, odvisno od različice jQuery biti izkoriščen.
Protip - Še en obsežen jQuery plugin, Protip podpira 49 položajev, HTML za vsebino namigov, podporo za ikone, poizvedbe po meri, in še veliko več. Protip ponuja grafični vmesnik, ki vam omogoča enostavno prilagajanje opisa orodja.
PowerTip - Ta vtičnik jQuery prinaša tudi možnosti in API-je, ki razvijalcem ponujajo različne načine za izvajanje opisov orodij. Podpira navigacija s tipkovnico; pojavi se pojavno okno pri navigaciji elementov z Tab tipkovnico. PowereTip je kot modul NPM. Lahko se uporablja z RequireJS in Browserify.
Dostopna Aria Tooltip - Vtičnik jQuery z vgrajeno funkcijo za dostopnost je orodje zasnovan tako, da prikaže pogovorno okno z naslovom, večvrstičnim besedilom in gumbom za zapiranje. To je eno izmed naših na našem seznamu.
TipsJS - Preprost vtičnik jQuery, vendar prinaša precej značilne lastnosti. The vsebina opisa orodij je nastavljena z a opis podatkov atribut. Poleg tega lahko vsebino s posebnimi znaki ovijemo tudi pri oblikovanju vsebine, podobne oblikovanju Markdown. Lahko uporabimo * narediti vsebino krepko, ~ za poševno in ^ za naslov.
Dark Tooltip - Ta knjižnica ponuja nekaj resnično uporabnih funkcij za vklop orodja. Na primer, lahko dodamo a gumb za potrditev - Da in Ne, zatemni ozadje med prikazom orodja in dodajanje elementov HTML vsebino. Mislim, da bi si morali ogledati predstavitveno stran.
Aria Tooltip - Druga pripomoček z vgrajeno funkcijo za dostopnost, ta vtičnik jQuery je združljiv z WAI-ARIA 1.1. Odzivna je na način, ki ga lahko omogočajo različne konfiguracije za različne velikosti zaslona. Aria Tooltip je na voljo kot imenovani NPM modul t-aria-tooltip.
Toolbar.js - Medtem ko lahko drugi vtičnik jQuery prikazuje samo preprosto besedilno ali HTML vsebino v opisu orodja, je to Vtičnik jQuery ustvari orodno vrstico. Namig bo vseboval dve ali več povezav z ikono, ki običajno izvede dejanje kliknite, kot vsaka orodna vrstica. Oglejte si dokumentacijo in primere.
VueJS
V-opis orodja - V-Tooltip je komponenta Vue.js, ki jo poganja Popper.js pod pokrovom. Zagotavlja: a imenovana nova direktiva v-opis orodja ki se lahko doda kateremu koli elementu in ustvari namig. The v-opis orodja lahko vsebuje vsebino namigov ali Možnosti. Razen po meri v-opis orodja lahko dodate tudi namig z orodjem v-popover komponento. S to komponento lahko dodajte kompleksnejšo vsebino v namig s komponento Vue.js ali HTML.
Vue-Bulma Tooltip - Komponenta Vue.js za ustvarjanje opisa orodij, ki temelji na okvirih uporabniškega vmesnika Bulma. Ta knjižnica je del komponente Vue Bulma. Toda Komponenta tooltip je na voljo kot imenovani NPM modul vue-bulma-tooltip to lahko uporabite kot samostojne komponente.
Vue-Directive-Tooltip - Na splošno je podobna komponenti V-Tooltip, ki temelji na Popper.js in zagotavlja isto imenovano direktivo v-opis orodja. Vendar se zdi, da ne zagotavlja v-popover komponento.
Vue-Tippy - Ta knjižnica ovije Tippy.js v komponento Vue.js. Ima funkcijo Vue.js po meri v-tippy ki deluje kot atribut HTML; dodamo lahko vsebino za opis orodja ali možnosti za njegovo prilagoditev. Prav tako pomeni a komponenta po meri Vue.js v vsebini namigov z uporabo html možnost.
VueJS-Popover - Običajno Vue.js z ukazom po meri v-popover in dve komponenti po meri
Vue-Namig - Vue.js vtičnik, ki ovija Hint.css. Funkcije vtičnika v-hint-css za dodajanje opisa orodja. To prinaša enake možnosti kot Hint.css, tako jih lahko dodate kot predmet JavaScript ali modifikator Vue.js.
ReactJS
Reagirajte Joyride - Komponenta React za prikaz niza opisov orodij nove uporabnike seznanite z novo aplikacijo.
Reakcijski plovec - Ta knjižnica ovije Popper.js v komponento React z imenom Floater, tako da ima enake odlične funkcije kot Floater. Dodate lahko namig in popup, prav tako pa lahko igrate s to komponento skozi ta peskovnik.
React Autotip - Preprosta komponenta React z lastno funkcijo samodejnega pozicioniranja samodejno prilagodi položaj opisa orodja ko se spremeni razpoložljivi prostor okoli njega.
Reagirajte Tippy - Zgrajen na vrhu Tippy.js in Popover.js. Ta knjižnica uvaja a Namig komponento lahko vključite v aplikacijo React.
Reagirajte namig - Reaktni element, ki podaljša Hint.css. Komponente dodajo nekaj funkcij, ki niso na voljo v Hint.css, kot je samodejni položaj, zakasnitev in funkcija povratnega klica.
Več
Nasveti za orodje Ember - Komponenta Ember.js za ustvarjanje opisov orodij je zgrajena na vrhu Popper.js. Komponenta je zasnovana tudi z vidika dostopnosti in se nenehno izboljšuje v skladu s približno 508 skladnostmi na tem področju.
D3 Nasvet - vtičnik D3.js. D3.js je knjižnica JavaScript za vizualizacijo podatkov, kot so grafikoni, zemljevidi, diagrami itd. Ta vtičnik vam omogoča prikaz orodne vrstice na vrhu teh podatkov.
