Soru:
Web sitesinden kullanılan jQuery eklentilerini alın
user187
2013-03-20 23:51:19 UTC
view on stackexchange narkive permalink

Facebook'un özel kaydırma çubukları için hangi jQuery eklentilerini kullandığını öğrenmek istiyorum, soldaki iki gibi, sağdaki normal olanı değil:

enter image description here

( kaynak)

Genel olarak, [web sitesi X] 'in [Y davranışı] için hangi jQuery eklentisini kullandığını öğrenmek istediğimde nasıl gitmeliyim?

Bunun [SO'da sorulduğunu] biliyorum (http://stackoverflow.com/q/7125185/1544337), ancak yanıtlar javascript'i tersine çevirmek için temel fikirler sağlamıyor.
üç yanıtlar:
#1
+8
jg0
2013-03-21 21:23:39 UTC
view on stackexchange narkive permalink

Hem Firefox hem de Chrome, bir davranışla ilgili komut dosyaları hakkında daha fazla bilgi edinmenize yardımcı olacak yararlı hata ayıklama araçlarına sahiptir. Varsayılan hata ayıklama araçları daha kapsamlı olduğundan çoğunlukla Chrome'da açıklayacağım

Başlangıç ​​olarak, bir öğe hakkında bilgi edinmek için genellikle Sağ Tıklama->Inspect Öğesini kullanabilirsiniz hızlı bir şekilde. Ancak bu, Facebook'un ticker'ında işe yaramıyor gibi görünüyor - bunu yapmak, kaydırma çubuğunun arkasındaki "Ticker News" u şu şekilde seçecektir:

inspect fail

Çünkü öğenin varlığını göremiyoruz değiştirildi, bazı tahminlerde bulunmamız gerekecek. Kayan yazıların kendileri, kaydırma çubuklarıyla ilgili hiçbir şeye sahip görünmüyor. Ebeveyne gidip <div class = "tickerActivityStories" > 'i katladıktan sonra, her şeyi net bir şekilde görmeye başlayabiliriz

Fareyle üzerine gelip (ve kaydırma çubuklarının "görünme" kodunu çağırarak) sayfanın DOM'unu gözlemleyebilir ve farklılıkları not edebiliriz.

comparison

Dolayısıyla, buna göre yanıt verirken <div class = "uiScrollableAreaTrack" > fare her girdiğinde / çıktığında. İsim de mantıklıdır (bunun kaydırma çubuğunun izleri olduğu anlamına gelir). Bu div 'i açarak, kaydırma çubuğu için bir "kıskaç" olduğunu bile fark edeceğiz!

gripper

Javascript'in ne olduğunu öğrenmek için kaydırma çubuklarıyla ilgilidir, <div class = "uiScrollableAreaGripper" öğesini tıklayın ve sağ bölmede Olay Dinleyicileri sekmesini açın. Odaklanmaya yanıt verdiğini varsayabiliriz ve Odak bölümünde, Javascript dosyalarına birkaç referans olduğunu fark edeceksiniz. Dosya adlarının üzerine gelin, Chrome size Javascript dosyalarının bağlantısını gösterecektir.

listeners

Şansınız varsa, dosyaların tanınabilir bir adı olabilir ( typeahead.min.js veya google'dan alabileceğiniz benzeri gibi). Maalesef bizimki de dahil olmak üzere çoğu durumda özel koda veya küçültülmüş koda bakıyoruz. (Küçültülmüş kod, sayfaların daha hızlı yüklenmesi için dosya boyutlarını küçültmek için son derece yaygındır)

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

Web sitesini incelemek için tarayıcınızda bir profil oluşturucu ve hata ayıklama aracı kullanabilirsiniz. Webkit tarayıcıları (Google chromium gibi) bunlara sahiptir. Firefox'un firebug adında iyi bir eklentisi vardır.

Profil oluşturucu ile hangi işlevlerin ne sıklıkta çağrıldığını görebilirsiniz, bu da size nereye bakmanız gerektiği konusunda fikir verebilir. Ardından, hata ayıklayıcıyla, tam konumu daraltmak için javascript kodunda kesme noktaları belirleyebilirsiniz

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

Çok benzer ve kullanımı kolay https://noraesae.github.io/perfect-scrollbar/ kullandım



Bu Soru-Cevap, otomatik olarak İngilizce dilinden çevrilmiştir.Orijinal içerik, dağıtıldığı cc by-sa 3.0 lisansı için teşekkür ettiğimiz stackexchange'ta mevcuttur.
Loading...