Mielenkiintoinen tekstitehoste jQueryn avulla.
Kuvan liukusäätimen erittäin omaperäinen muotoilu, joka muistuttaa tuuletinta. Animoitu diamuutos. Navigointi kuvien välillä tapahtuu nuolilla. Mukana on myös automaattinen vaihto, joka voidaan kytkeä päälle ja pois päältä yläreunassa olevasta Play / Pause -painikkeesta.
Animoitu ympyräkaavio, joka on luotu Raphaël JavaScript -kirjastolla.
Kevyt CSS3-pudotusvalikko sivustolle.
Animoitu jQuery-liukusäädin. Taustakuvat skaalataan automaattisesti, kun selainikkunan kokoa muutetaan. Jokaisen kuvan kohdalla avautuu lohko, jossa on kuvaus.
Animoitu jQuery-tehoste siirrettäessä kohdistinta näytöllä.
Toimiva ratkaisu, joka muistuttaa JavaScriptin hälytystä (). Voit lukea lisää Blackbirdin käytöstä esittelysivulta.
Joukko erilaisia Ajax-komponentteja avoimen lähdekoodin JFS-kehyksessä käyttöliittymäelementtien luomiseen. Komponenttijoukko sisältää yleisimmät käyttöliittymäelementit: komponentit taulukoiden ja kaavioiden kanssa työskentelyyn, välilehdet, ponnahdusikkunat, suodattimet, valikot, kalenterit, lomakkeiden kanssa työskentelevät komponentit ja monet muut Ajax-ratkaisut. Näet kaikki komponentit toiminnassa esittelysivulla. OpenFaces jaetaan kahdella eri lisenssillä: ilmaisilla ja kaupallisilla.
Kokoelma ammattimaisia widgetejä verkkokehittäjille. Wijmo-paketti sisältää seuraavat ilmaiset jQuery-ratkaisut: harmonikka, kalenterit, ponnahdusikkunat, laajennukset, tyyliset lomakkeet, erilaiset luettelot, valikot, edistymispalkit, välilehdet, työkaluvihjeet ja muut hyödylliset widgetit. Ilmaisten ratkaisujen lisäksi Wijmo-kehittäjät tarjoavat myös korkealaatuisia kaupallisia jQuery-käyttöliittymäkehityksiä. Arkiston lataamisen jälkeen näet kaikki mahdolliset widgetit toiminnassa, ne sijaitsevat wijmo-open / development-bundle / samples / -hakemistossa. Tämä setti säästää varmasti paljon aikaa verkkoprojektien kehittämisessä.
Hakukyselyn syöttämiseen tarvittavan kentän animoitu muotoilu. Vaikutus voidaan havaita napsauttamalla hiirellä syöttökentässä. Haun aloituspainike tulee näkyviin, kun olet kirjoittanut kyselyn näppäimistöltä.
Plugin skaalautuvan tekstin luomiseen selainikkunan koosta riippuen. Mitä suurempi selainikkuna on, sitä suurempi on tekstin koko. Huomaa, että tätä tehostetta ei tule käyttää kappaleiden normaalissa tekstissä. Se soveltuu vain suurten tarrojen näyttämiseen esimerkiksi mainossivustoilla. Esimerkki löytyy esittelysivulta. Kokeile muuttaa ikkunan kokoa nähdäksesi vaikutuksen.
Toimiva diaesitys. Diojen muodossa voivat olla: yksinkertaiset kuvat, kuvat kuvateksteillä, kuvia työkaluvihjeillä, videoleikkeitä. Voit navigoida käyttämällä nuolia, dian numerolinkkejä ja näppäimistön vasenta/oikeaa näppäintä. Diaesitys on tehty useissa versioissa: miniatyyreillä ja ilman. Näet kaikki vaihtoehdot napsauttamalla esittelysivun yläosassa olevia linkkejä Demo # 1 - Demo # 6.
Tällä laajennuksella voit lisätä zoomaustehosteen hiiren päällä olevaan kuvaan tai lisätä siihen peiton. Plugin on helppo muokata tarpeidesi mukaan.
Animoitu jQuery-galleria.
Uusi jQuery-liukusäädin. Useita hienoja animoituja tehosteita dioja vaihdettaessa.
Uusi Apple-tyylinen valikko. Näyttää tummemmalta kuin ennen, mutta ei vähemmän söpöltä.
Useita erilaisia hover-työkaluvihjeitä.
Kuvagalleria optimoitu katseluun mobiililaitteilla (puhelimilla tai tableteilla).
Kuvan alueen suurentamisen vaikutus hover-tilassa.
Toimiva ostoskori verkkokaupalle, jossa on integroidut maksutavat tavaroille PayPalin tai Google Checkoutin kautta. Käytetyt tekniikat: HTML, CSS, jQuery, AJAX, PHP, XML, XSL. Upota helposti web-sivulle ja muokkaa ostoskorisi ulkoasua.
Alkuperäinen navigointi kuvien pikkukuvien välillä. Näet tehosteen esittelysivun oikealla puolella napsauttamalla Ylös- ja Alas-painikkeita. Tämä jQuery-ratkaisu tarjoaa myös hover-tehosteen pikkukuvaan.
5. Lohkojen näytön vaihtaminen jQueryyn
Tämän jQuery-lisäosan "Switch Display Options" avulla voit toteuttaa sivulle kytkimen, jolla vierailija siirtyy tietojen taulukkonäytöstä lohkokuvaukselliseen kokonaisnäkymään. Täydellinen portfolion toteuttamiseen.
Kauniin portfolion toteuttaminen jQuerylla ja HTML5:llä. Salkkusiru toteutetussa suodattimessa. Portfolion eri teoksia näytetään valitusta kategoriasta riippuen.
jQyery pikkukuvagalleria. Toteutettu mahdollisuus katsella kompaktissa ikkunassa ja ikkunassa koko näytössä sekä mahdollisuus poistaa käytöstä / ottaa käyttöön automaattinen dian vaihto.
Plugin kuvien allekirjoittamiseen. Kun viet hiiren osoitinta animoidulla tehosteella, kuvan kuvaus tulee näkyviin. JQueryä käytetään animaation luomiseen.
Dian oikeassa yläkulmassa voit kytkeä automaattisen dianvaihdon päälle / pois päältä.
Animoitu valikko. Valikkokohdat esitetään kuvakkeiden ja kuvausten muodossa. hienoja tehosteita viemällä hiiri valikkokohdan päälle. Tehosteita on 8, nähdäksesi ne kaikki - seuraa esittelysivun linkkejä Esimerkki1-Esimerkki8.
Diaesitys alkuperäisen kuvan muutostehosteella.
jQuery-galleria kuvateksteillä. Useita dian siirtymätehosteita. Kuvien välillä liikkuminen tapahtuu joko nuolten avulla tai napsauttamalla pikkukuvaa.
Taustavaikutelma (liike tasojen läpi). Vedä esittelysivulla hiirtä näytön poikki nähdäksesi tehosteen toiminnassa.
Luodaan valokuvista tai HTML-lohkoista eräänlaisia "seiniä", joita voidaan vetää hiirellä näytön poikki kiinteän alueen sisällä.
Työkaluvinkkeillä on erittäin tärkeä rooli web-suunnittelussa. Niiden avulla voit lisätä merkittävästi käyttöliittymän käytettävyyttä. Tällä oppitunnilla teemme interaktiivisen kartan, jossa on vinkkejä, jotka tulevat näkyviin, kun hiiren osoitin on erityisen etiketin päällä.
Haluaisin tehdä interaktiivisen kuvan, jossa on tarrat, kun viet hiiren sen päälle, minkä vihjeiden päälle näytetään. Samalla rakenteen tulee olla helppokäyttöinen ja päivitettävä tieto. Uuden tarran lisääminen ei siis vaadi käyttäjältä suunnittelutaitoja. Sinun tarvitsee vain lisätä koodiin div-elementti työkaluvihjeen sisällöllä ja asettaa sille HTML5-tietoattribuutit paikantamista varten.
HTML5:ssä on loistava työkalu, mukautetut tietoattribuutit, joiden avulla voit tallentaa mielivaltaisen joukon metatietoja. Tämä attribuutti välttää rel- tai title-attribuuttien käytön erilaisissa Javascriptin tehtävissä.
Data-attribuutin syntaksi on:
Ja jQueryssä voit saada arvon seuraavasti:
Muutt testi = $ ("div"). Data ("foo");
Tällä oppitunnilla dataattribuuttia käytetään paikkamerkitsimen koordinaattien tallentamiseen.
CSS-koodi on melko yksinkertainen ja suoraviivainen:
/ * Suhteellinen sijainti * / #kääre (sijainti: suhteellinen; marginaali: 50px automaattinen 20px automaattinen; reunus: 1px kiinteä #fafafa; -moz-box-shadow: 0 3px 3px rgba (0,0,0, .5); - webkit-box-shadow: 0 3px 3px rgba (0,0,0, .5); box-shadow: 0 3px 3px rgba (0,0,0, .5);) / * Piilota työkaluvinkin alkuperäinen sisältö * /. pin (näyttö: ei mitään;) / * Tyylit työkaluvihjeelle ja tunnisteelle * / .tooltip-up, .tooltip-down (sijainti: absoluuttinen; tausta: url (nuoli ylös-alas.png); leveys: 36px; korkeus: 52px ;) .työkaluvinkki alas (tausta-sijainti: 0 -52px;) .työkaluvihje (näyttö: ei mitään; leveys: 200px; kohdistin: ohje; tekstivarjo: 0 1px 0 #ffff; sijainti: absoluuttinen; ylhäällä: 10px; vasen : 50 %; z-indeksi: 999; marginaali vasen: -115px; täyte: 15px; väri: # 222; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius : 5px; -moz-box-shadow: 0 3px 0 rgba (0,0,0, .7); -webkit-box-shadow: 0 3px 0 rgba (0,0,0, .7); box-shadow : 0 3px 0 rgba (0,0,0, .7); tausta: # fff1d3; tausta: -webkit-gradient (lineaarinen) , vasen ylhäällä, vasen alaosa, alkaen (# fff1d3), kohtaan (# ffdb90)); tausta: -webkit-linear-gradient (ylä, # fff1d3, # ffdb90); tausta: -moz-linear-gradient (ylä, # fff1d3, # ffdb90); tausta: -ms-linear-gradient (ylä, # fff1d3, # ffdb90); tausta: -o-lineaarinen gradientti (ylä, # fff1d3, # ffdb90); tausta: lineaarinen gradientti (yläosa, # fff1d3, # ffdb90); ) .tooltip :: after (sisältö: ""; sijainti: absoluuttinen; ylhäällä: -10px; vasen: 50%; margin-vasen: -10px; reunus-ala: 10px kiinteä # fff1d3; reunus-vasen: 10px kiinteä läpinäkyvä; reunus-oikea: 10px kiinteä läpinäkyvä;) .työkaluvinkki-alas .työkaluvihje (alhaalla: 12px; ylhäällä: automaattinen;) .tooltip-down .tooltip :: after (alhaalla: -10px; ylhäällä: automaattinen; border-bottom: 0; border-top: 10px solid # ffdb90;) .tooltip h2 (fontti: lihavoitu 1,3em "Trebuchet MS", Tahoma, Arial; marginaali: 0 0 10px;) .tooltip ul (marginaali: 0; täyte: 0; listatyyli : ei mitään;)
$ (dokumentti) .ready (funktio () (// Aseta säilön leveys ja korkeus kuvan mittoihin $ ("# wrapper"). css (("width": $ ("# wrapper img") . leveys () , "korkeus": $ ("# wrapper img"). korkeus ())) // Työkaluvihjeen suunta var tooltipDirection; for (i = 0; i<$(".pin").length; i++) { // Устанавливаем направление символа подсказки - вверх или вниз if ($(".pin").eq(i).hasClass("pin-down")) { tooltipDirection = "tooltip-down"; } else { tooltipDirection = "tooltip-up"; } // Добавляем подсказку $("#wrapper").append("
Tämä esimerkki toimii myös vanhemmissa selaimissa. Tietenkin tämä vaihtoehto menettää CSS3-gradientit ja varjot.
Selaimet luovat automaattisesti työkaluvihjeitä, kun verkkovastaavat kirjoittavat määritteeseen otsikko jotain tekstiä (yleensä attribuutti otsikko koskee tunnisteita
ja
, eli linkkeihin ja kuviin). Kun käyttäjät vievät hiiren tunnisteiden päälle, joilla on attribuutti otsikko, selain näyttää työkaluvihjeen. Juuri nämä työkaluvinkit ( työkaluvihje) muokkaamme.
Tämä artikkeli kattaa:
- miten liitännäinen korvataan tavallisten työkaluvihjeiden avulla
- qTip-työkaluvihjeiden määrittäminen
- kuinka näyttää Ajax-sisältö työkaluvihjeessä
Toivottavasti ei tarvitse selittää, että attribuutteja, kuten otsikko, alt, tarvitaan usein kipeästi. Loppujen lopuksi ne auttavat käyttäjiä navigoimaan paremmin suuressa tietomäärässä ja ovat lisäksi erittäin hyödyllisiä sivuston hakukoneoptimoinnissa. Ainoa ongelma työkaluvihjeissä on, että niitä ei voi muuttaa CSS-tyyleillä. Tämän ongelman ratkaisemiseksi käytämme mahdollisuuksia.
1. Luo HTML-perusrunkotiedosto, joka sisältää title-attribuutin.
Lista linkeistä:
2. Nyt sinun on ladattava qTip-laajennus arkistosta.
3. Yhdistä ladatut tiedostot:
// jQueryn standardikirjasto // Tähän tiedostoon kirjoitamme jQuery-komentosarjat
4. Jotta työkaluvihje toimisi, kirjoita vain scripts.js-tiedostoon:
$ (asiakirja) .ready (funktio () ($ ("a"). qtip ();));
Tämä rakenne tarkoittaa, että kaikissa linkeissä, joissa on title-attribuutti, käytetään qtip () -menetelmää.
1. Voit mukauttaa työkaluvihjeitä eri tavoilla. Muutetaan ensin paikka, josta työkaluvihjeet näytetään.
$ ("a"). qtip ((sijainti: (oma: "alhaalla keskellä", // Kohdistimen sijainti: "ylhäällä keskellä", // Näkymäportin työkaluvihjeen sijainti: $ (ikkuna) // Työkaluvihje älä nuolla näytön reunoja)));
2. Kun olet säätänyt sijaintia, voit käsitellä työkaluvihjenäytön värimaailmaa. Oletusarvoisesti jquery.qtip.min.css-tiedosto sisältää seuraavat värityylit:
Qtip-oletus (oletusarvoinen keltainen tyyli)
Qtip-bootstrap
Joihinkin näistä tyyleistä voidaan lisätä varjo: qtip-shadow. Lisäksi kukaan ei vaivaudu luomaan omaa tyyliä, joka sopii hyvin yleiseen, vaikka vakiotyyppejä on enemmän kuin tarpeeksi.
$ ("a"). qtip ((sijainti: (oma: "alhaalla keskellä", osoitteessa: "ylhäällä keskellä", näkymä: $ (ikkuna)), tyyli: (luokat: "qtip-green qtip-shadow")) );
1. Luodaan ensin HTML-runko:
#navigointi (tausta: rgb (132,136,206); / * Vanhat selaimet * / tausta: -moz-linear-gradient (ylä, rgba (132,136,206,1) 0%, rgba (72,79,181,1) 50%, rgba (132,6,13) , 1) 100 %; / * FF3.6 + * / tausta: -webkit-gradientti (lineaarinen, vasen ylhäällä, vasen alaosa, värin pysäytys (0%, rgba (132,136,206,1)), värin pysäytys (50) %, rgba (72,79,181,1)), color-stop (100%, rgba (132,136,206,1))); / * Chrome, Safari4 + * / tausta: -webkit-linear-gradient (ylä, rgba (132,136,206) , 1) 0%, rgba (72,79,181,1) 50%, rgba (132,136,206,1) 100%; / * Chrome10+, Safari5.1 + * / tausta: -o-lineaarinen gradientti (ylä, rgba) (132 136 206 , 1) 0%, rgba (72,79,181,1) 50%, rgba (132,136,206,1) 100%) / * Opera11.10 + * / tausta: -ms-lineaarinen gradientti (ylä, rgba () 132 136 206, 1) 0%, rgba (72,79,181,1) 50%, rgba (132,136,206,1) 100%; / * IE10 + * / suodatin: progid: DXImageTransform.Microsoft.gradient =ce (startColor488 , endColorstr = "# 8488ce", GradientType = 0); / * IE6-9 * / tausta: lineaarinen gradientti (ylä, rgba (132,136,206,1) 0%, rgba (72,79,181,1) 50%, rgba ( 132,136,206,1 ) sata%); / * W3C * / list-style-type: ei mitään; marginaali: 100px 20px 20px 20px; pehmuste: 0; ylivuoto piilotettu; -webkit-border-radius: 5px; -moz-border-radius: 5px; reunan säde: 5px; ) #navigointi li (marginaali: 0; täyttö: 0; näyttö: lohko; kelluva: vasen; reuna-oikea: 1px solid # 4449a8;) #navigointi a (väri: #ffff; reunus oikea: 1px solid # 8488ce; näyttö : lohko; täyte: 10px;) #navigointi a: hover (tausta: # 859900; reunus-oikea-väri: # a3bb00;)
Tuloksena pitäisi olla seuraava kuva:
3. Lisää scripts.js-tiedostoon:
$ ("# navigointi a"). qtip ((sijainti: (oma: "ylhäällä keskellä", at: "alhaalla keskellä", kuvaportti: $ (ikkuna)), näytä: (vaikutus: funktio (offset) ($ (tämä ) .slideDown (300);)), piilota: (vaikutus: funktio (offset) ($ (this) .slideUp (100);)), tyyli: (luokat: "qtip-green qtip-shadow"))) ;
Kun nyt viet hiiren osoittimen navigointivalikon päälle, työkaluvihje (title-attribuutti) tulee näkyviin.
Tavallisten tunnisteiden näyttämisen lisäksi voit näyttää työkaluvihjeessä muuta sisältöä, esimerkiksi otettua tiedostosta, piilotetusta säilöstä tai tietokannasta, lataamatta sivua uudelleen Ajax-tekniikalla.
Tämä linkki nappaa sisällön tiedostosta Ajaxin avulla
Attribuutin href = "tooltip.txt" arvo tarkoittaa, että hyperlinkki viittaa tavalliseen txt-tiedostoon.
$ (. infobox"). kukin (funktio () ($ (this) .qtip ((sisältö: (teksti: "Ladataan...", // Sisällön latautuessa tämä merkintä näytetään ajax: () url: $ (this) .attr ("href") // Mistä saada sisältö), otsikko: (// Lisää otsikkokentän työkaluvihjeen tekstiin: $ (this) .attr ("otsikko"), painike : true // Lisää painikkeen työkaluvihjeen sulkemiseen)), sijainti: (oma: "ylhäällä keskellä", at: "alhaalla keskellä", vaikutus: false, // Poistaa lähtevän tehostenäkymän: $ (ikkuna)), näytä : (tapahtuma: "napsauta", // Työkaluvihje tulee näkyviin, kun napsautat linkkiä, voit korvata sen sanalla 'hover', sitten työkaluvihje näytetään hover soolo: true // Sallii näyttää vain yhden työkaluvihjeen näyttö), hide: "unfocus", // Työkaluvihje sulkeutuu, kun napsautetaan toista sivutyylin elementtiä : (luokat: "qtip-green qtip-shadow")));)). bind ("napsauta", funktio (e) (e.preventDefault ())); // Kun napsautat linkkiä, selain ei lataa URL-osoitetta
Tämä Ajax-tekniikka toimii vain, kun palvelin on käynnissä. Jotta se toimisi paikallisessa tietokoneessa, sinun on asennettava esimerkiksi.
Kunnes unohdin, mitkä plussat ja miinukset ovat alumiinipattereissa ja millaisia pattereita kuluttajat yleensä valitsevat.
(Lataukset: 409)
Näin idean sähköisen kirjanpitäjän "Elba" verkkosivuilla. Siinä on mukava ja käyttäjäystävällinen käyttöliittymä, ja pidin todella työkaluvihjeistä, joita on kaikkialla.
Halusin vain ottaa tämän liiketoiminnan toteuttavan komentosarjakoodin sivuston lähdekoodista, mutta sellaista ei ollut. Siellä heillä on niin paljon erilaisia skriptejä koottu yhteen kasaan (en tiedä miten sitä ammattikielellä oikein kutsutaan), että minun oli vaikea saada sieltä jotain konkreettista.
Joten otin ja kirjoitin oman käsikirjoitukseni, joka tekee suunnilleen saman asian. Tiedän, että valmiita ratkaisuja on jo monia, mutta minulle on mielenkiintoisempaa kirjoittaa käsikirjoitus itse tyhjästä, jotta voin taas harjoitella jQueryn kanssa.
Voit nähdä esimerkin sekä Share42.com-sivustolla että sivustolla, jossa lähde sisältää vain sen, mitä komentosarjan toimintaan tarvitaan.
Skriptikoodi näyttää tältä:
(funktio ($) ($ (funktio () ($ ("span.jQtooltip"). Jokainen (funktio ()) (var el = $ (this); var title = el.attr ("nimi"); if (otsikko) && otsikko! = "") (el.attr ("nimi", "") .append ("
Tallenna se tiedostoon, jossa on .js-tunniste, esimerkiksi scripts.js, ja muodosta yhteys sivustoon ennen tunnistetta unohtamatta yhdistää jQuery-kehystä samanaikaisesti, jos sitä ei ole jo tehty. Nuo. seuraava koodi lisätään sivuston html-koodiin:
JQtooltip (sijainti: suhteellinen; kohdistin: ohje; reuna-ala: 1px katkoviiva;) .jQtooltip div (näyttö: ei mitään; sijainti: absoluuttinen; alaosa: -1px; vasen: -1px; z-indeksi: 1000; leveys: 190px; täyte: 8px 12px; tekstin tasaus: vasemmalle; kirjasinkoko: 12px; rivin korkeus: 16px; väri: # 000; laatikkovarjo: 0 1px 3px # C4C4C4; reunus: 1px kiinteä # DBB779; tausta: # FFF6BD; rajan säde: 2px;)
Nyt on vielä lisättävä tarvittava teksti tagiin jQtooltip-luokalla ja otsikkoattribuutilla, esim. kuten tämä:
teksti
Jos haluat tekstin sijaan neliön, lisää CSS-tiedostoon seuraavat tyylit:
JQtooltip.mini (näyttö: inline-block; pystytasaus: alhaalla; fontin koko: 11px; leveys: 14px; rivin korkeus: 13px; tekstin tasaus: keskellä; marginaali vasen: 2px; yläreuna: -2px; väri : # 9A4D18; reuna: 1px kiinteä # FAD28F; tausta: # FFF6BD; reunan säde: 2px;)
Ja html-koodi tässä tapauksessa on seuraava:
!
Halutessasi voit muuttaa CSS-koodin haluamaksesi. Eli, kuten näet, työkaluvihjeen suunnittelu voidaan tehdä millä tahansa tavalla, tätä varten sinun on vain ymmärrettävä CSS.
Siinä itse asiassa kaikki.
P.S. Minulla ei ole epäilystäkään siitä, etteikö käsikirjoitusta voisi tehdä lukutaitoisempaa, mutta periaatteessa olen tyytyväinen tapahtuneeseen.
Etsitkö, mihin sijoittaa verkkosivustosi Ukrainassa? Valitse aika-testattu hosting - X-HOST. Saat laadukkaan ja luotettavan isännöinnin kilpailukykyiseen hintaan.
