Kotisivu » Toolkit » Lisää hakusanan korostus mihin tahansa Web-sivuun Mark.js n avulla

    Lisää hakusanan korostus mihin tahansa Web-sivuun Mark.js n avulla

    Useimmissa selaimissa on CTRL + F -toiminto etsiä ja löytää mitä käyttäjä etsii. Mutta tämä ominaisuus sitä ei tueta mobiililaitteissa ja se ei toimi hyvin dynaamisen tekstin avulla.

    Onneksi siellä on Mark.js, ilmainen JavaScript-laajennus, joka lisää a korosta hakutoiminto mihin tahansa sivuun helposti.

    Oletuksena se toimii vanilja JS-plugin mutta voi myös ajaa jQueryn päälle. Se on täysin avoimen lähdekoodin projekti, joten voit käyttää sitä millä tahansa kaupallisella tai muulla sivustolla.

    Se toimii aivan kuten mikä tahansa selaimen hakutoiminto, paitsi että siinä on ylimääräisiä herkkuja. Voit lisätä omat mukautetut suodattimet ja etsi sanoja, jotka perustuvat säännöllisiä lausekkeita, tiettyjä synonyymejä, ja jopa dynaamiset sivuelementit kuten iframes.

    Aloita lataamalla vain Mark.js-tiedosto GitHubilta tai isännöi tiedostoa CDN: n kautta ajan säästämiseksi.

    Käytä tätä toimintoa liitetty syöttökenttään sivulla. Näin käyttäjät voivat syöttää hakutermejä ja saat välittömästi palautetta korostetun tekstin kautta.

    Tässä on a näytteenpätkä demo-sivulta:

     $ (". konteksti"). merkki (avainsana [, vaihtoehdot]); 

    .konteksti luokan tavoitteet missä tahansa toiminnassa etsi termejä. Voit käyttää oletus HTML elementti jos yrität etsiä koko sivun tai voit siirtyä useita elementtejä kuten eri välilehti-widgetit tai iframes.

    Sitten sisällä Mark () toimivat välitä avainsana, yhdessä vaihtoehtojen kanssa (jos haluat).

    Jos annat käyttäjien kirjoittaa avainsanan, voit päivitä toiminto automaattisesti uuden avainsanan jälkeen jokaisen painalluksen jälkeen. Tämän tapahtuman kohdentamiseen on jopa tietty toiminto.

    Mark.js toimii kaikkien tärkeimpien selainten kanssa, mukaan lukien Chrome, Firefox, Opera (v12 +) ja Internet Explorer (9+). On helppo asentaa, jos noudatat asiakirjoja ja käytät uusimpia tiedostoja.

    Mutta jos haluat nähdä Mark.js toimii kurkista viulu alla käyttämällä hyvin yksinkertaista jQuery-demoa etsimään muutamia kappaleita Lorem Ipsumista.