Kysymys:
Käytä käytettyjä jQuery-laajennuksia verkkosivustolta
user187
2013-03-20 23:51:19 UTC
view on stackexchange narkive permalink

Haluan tietää, mitä jQuery-laajennuksia Facebook käyttää erityiseen vierityspalkkiinsa, kuten vasemmalla olevat kaksi, ei normaalia oikealla:

enter image description here

( lähde)

Kuinka minun pitäisi yleensä mennä, kun haluaisin tietää, mitä jQuery-laajennus [verkkosivusto X] käyttää [käyttäytymiseen Y]?

Tiedän, että tätä [on kysytty SO: lla] (http://stackoverflow.com/q/7125185/1544337), mutta vastaukset eivät tarjoa perusideoita javascriptin kääntämiseksi.
Kolme vastused:
jg0
2013-03-21 21:23:39 UTC
view on stackexchange narkive permalink

Sekä Firefoxilla että Chromella on hyödyllisiä virheenkorjaustyökaluja, joiden avulla saat lisätietoja käyttäytymiseen liittyvistä komentosarjoista. Selitän enimmäkseen Chromessa, koska niiden virheenkorjaustyökalut ovat laajempia.

Aluksi voit yleensä käyttää Right Click->Inspect Element -tietoa saadaksesi tietoa elementistä. nopeasti. Tämä ei kuitenkaan vaikuta toimivan Facebookin tunnisteessa - tekemällä näin valitaan vierityspalkin takana oleva "Ticker News":

inspect fail

Koska emme näe elementtiä muokattu, meidän on tehtävä joitain arvauksia. Itse tunnisteissa ei näytä olevan mitään vierityspalkkeihin liittyvää. Kun olemme matkustaneet vanhemman luokse ja taittaneet <div class = "tickerActivityStories" > , voimme alkaa nähdä asiat selkeästi

Vie hiiri (ja kutsua vierityspalkkien "näytä" -koodia) voimme tarkkailla sivun DOM: ta ja huomata erot.

comparison

Joten näyttää siltä, ​​että <div class = "uiScrollableAreaTrack" > vastauksena vastaavasti aina kun hiiri tulee sisään / poistuu. Nimi on myös järkevä (tarkoittaa, että se on vierityspalkin kappaleet). Selvittämällä div huomaa, että vierityspalkkiin on jopa "tarttuja"!

gripper

Selvittää, mikä Javascript on mukana vierityspalkkeissa, napsauta <div class = "uiScrollableAreaGripper" ja avaa oikeassa ruudussa Tapahtumakuuntelijat -välilehti. Voidaan olettaa, että se reagoi kohdentamiseen, ja Focus -osiossa on muutama viittaus Javascript-tiedostoihin. Vie hiiri tiedostonimien päälle, ja Chrome näyttää Javascript-tiedostojen linkin.

listeners

Jos sinulla on onnea, tiedostoilla voi olla tunnistettava nimi (kuten typeahead.min.js tai vastaava, jonka voit Googlella). Valitettavasti useimmissa tapauksissa, myös meidän, etsimme todennäköisesti omaa koodia tai pienennettyä koodia. (Pienennetty koodi on erittäin yleinen tiedostokokojen pienentämiseksi, jotta sivut latautuvat nopeammin)

txwikinger
2013-03-21 18:29:36 UTC
view on stackexchange narkive permalink

Voit tutkia verkkosivustoa selaimesi profilointityökalun ja virheenkorjaustyökalun avulla. Webkit-selaimilla (kuten Google-kromilla) on ne sisäänrakennettuna. Firefoxilla on hyvä lisäosa nimeltä Firebug.

Profiilin avulla näet, mitä toimintoja kutsutaan kuinka usein, mikä voi antaa sinulle käsityksen, mistä etsiä. Sitten virheenkorjaimen avulla voit asettaa katkaisupisteet javascript-koodiin tarkan sijainnin kaventamiseksi

Nicolás Kuglien
2017-01-27 01:51:13 UTC
view on stackexchange narkive permalink

Käytin https://noraesae.github.io/perfect-scrollbar/, joka on hyvin samanlainen ja helppokäyttöinen



Tämä Q & A käännettiin automaattisesti englanniksi.Alkuperäinen sisältö on saatavilla stackexchange-palvelussa, jota kiitämme cc by-sa 3.0-lisenssistä, jolla sitä jaetaan.
Loading...