Kotisivu » Toolkit » Lisää Margin Hover -teksti johonkin verkkosivustoon helposti Marginotesin kanssa

    Lisää Margin Hover -teksti johonkin verkkosivustoon helposti Marginotesin kanssa

    Inline-työkaluvihjeet ovat fantastisia, mutta joskus ne eivät vain sovi tiettyyn sisältöön. Useimmat sivustot jättävät tilaa marginaalit sivun runkoon ja tämä sopii täydellisesti työkalutyyppinen sisältö ilman työkaluvihjeitä.

    Tulla sisään Marginotes, ilmainen avoimen lähdekoodin jQuery-laajennus lisää marginaaleihin mukautettuja muistiinpanoja verkkosivusi. Voit vaihtaa näitä muistiinpanoja sivun linkkien tai tiettyjen elementtien, kuten kuvien, perusteella.

    Tämä laajennus on yllättävän helppo asentaa ja siihen kuuluu oletustyyli marginaalitiedot. Nämä näkyvät sivulle sisältöä ja ne kohdistuvat sivusi osion vieressä.

    Hover-muistiinpanot ovat lisätään manuaalisesti HTML-elementteihin, käyttää desc ominaisuus. En ole koskaan nähnyt tätä HTML5: ssä, joten en voi sanoa, onko se täysin yhteensopiva. Mutta se on otettu mukaan JavaScript, joka on kaikki mitä tarvitset.

    Voit myös muuta tätä ominaisuutta kun käytät marginotes () toiminto, joten voit vaihtaa sen jollekin data-laskeva jos haluat olla yhdenmukaisempia.

    Tässä on yksi jQuery-rivi tarvitaan, jotta tämä laajennus toimii:

     $ ( "Valitsin"). Marginotes () 

    Sinun pitäisi vaihtaa "valitsin" mihin tahansa kohdistettuihin elementteihin. Joten, jos he ovat sivusi rungon sisällä, voit käyttää sitä ".body span". Voisit myös kohde-ankkurilinkit tai tietyissä luokissa lisätään näihin elementteihin.

    Sisällä marginotes () toiminto, voit lisätä kaksi valinnaista parametria voit muuttaa marginaalin muistiinpanomuotoa:

    1. leveys - asettaa muistiinpanon leveyden (oletusarvo on 100px)
    2. ala - asettaa HTML-sisällön määritteen (oletusarvo on "Laskeva")

    Jos et halua käyttää jQueryä, voit kokeilla vanilja Marginotes plugin. Se toimii vanilja JS: llä, joten sinulla on nolla riippuvuudet saada kaikki samat ominaisuudet.

    Voit myös tarkistaa tämän live-esittely jos haluat nähdä sen toiminnassa. Tämä on ehdottomasti ainutlaatuinen lisäosa, ja se on erinomainen tapa lisää ylimääräistä sisältöä sivustoosi.