28 Temmuz 2010 Çarşamba

jquery menu backlink'i apycom.com


apycom.com adresini biliyorsunuzdur. 


jquery ile yapılmış çok enterasan menüler ihtiva eden bir site.. paralı ve bedava sürümleri mevcut bu menüleri henüz denemediyseniz mutlaka bir göz gezdirin derim. 

apycom dan bedava bir jquery menü edindiğiniz takdirde , menüyü ilave edeceğiniz sitede apycom.com a bağlantı vermeniz şartı var. Bu bağlantı eğer verilmemişse script zaten kendi bağlantısını sayfanın sol üst köşesine yerleştiriveriyor.

Bu sonradan eklenmiş bağlantıdan kurtulmak için javascript dosyasından bulup silmeniz yeterli aslında. Ama burda konu başka bir yere dallanıyor. Javascript i açıp bir göz gezdirdiğinizde dosyanın bir kısmının paketlenmiş olduğunu görüyorsunuz.


Burada dikkatimizi çekecek şey ise (p,a,c,k,e,d) ifadesi. Aslında gayet sevimli bir paketleme yapılmış insanın yüzüne ilk bakışta bir tebessüm oturuveriyor. Tebessümünüzü unutup yaptığınız işe odaklanırsanız ufak bir araştırma yapıp bu paketleme sistemini kodlayan şahs-ı muhterem in Dean Edwards olduğunu öğreniyorsunuz.

Dean Edwards kendi hazırladığı bu yöntem ile paketleme yapan bir site de hazırlamış durumda. Yani javascript dosyalarınız var ise bu adreste bu yöntem ile paketleyebilirsiniz.

Peki bu kadar bilgi edindik bunlar bizim ne işimize yarar. Dean Edwards sayfayı tasarlarken paketi açmak için kullanılacak geri dönüş fonksiyonlarını da kodlamış aslında. Fakat sayfanın alt tarafındaki bölüme birşey yapıştırma imkanımız pek yok fark ettiyseniz.

İşte sayfanın bu kısmına biraz motivasyon gerekiyor kullanabilmemiz için.

Öncelikle Firefox un kendisini daha sonra Firebug eklentisini ediniyoruz.

(Firebug web geliştiricileri için hata ayıklama ve optimizasyon eklentisidir. Bunun yanında CSS ve html kodlarında düzenlemeler de yapabilirsiniz.)

Hazırsanız şimdi paketleyiciyi açıyoruz. Ardından sayfa üzerinde çalışabileceğimiz şekilde Firebug ı aktif ediyoruz.


Şimdi yapmamız gereken Firebug da bulunan teftiş et butonuna tıklamak ve ardından sayfanın altındaki aktif olmayan kutucuğu işaretlemek.


Bu işlemden sonra Firebug da görüntülenen html kodu üzerinde aşağıdaki satır seçilmiş olacaktır.




Bu satırda yer alan readonly ifadesine çift tıklıyoruz. ve ardından siliyoruz.

Mutlu son a bir kaç adım uzaktayız. Kutucuk için yaptığımız işlemi bu sefer Decode butonu için benzer şekilde yineleyeceğiz. 

Teftiş et i tıklıyoruz. Decode butonunu seçiyoruz. Bu seferki kod şöyle ;


+ işareti ile genişletiyoruz.


decode-script" disabled="" şeklinde devam eden satırda disabled üzerine çift tıklayıp silin.


Buraya kadar olan kısım size firebug kullanmayı az çok anlatmak içindi aslında. 

Şimdi sayfanın üst kısmına iyi kötü birşeyler yazıp paketleyin. Daha sonra alt kısımda oluşan kodu , elinizdeki paketlenmiş kod ile değiştirip Decode butonuna tıklayarak kodunuzu açın.


Bundan sonraki adım çözülmüş koddan gereksiz gördüğümüz kısımları silmek olacak.

Çözmüş olduğunuz kodu aldığınız dosyaya paketlenmiş kodu silip onun olduğu yere aynen yapıştırın. Çalışıp çalışmadığını kontrol edin.

Bağlantının hala orada olması çalıştığının ifadesidir aslında.

Şimdi elinizdeki kodda ;

jQuery(function(){

ifadesinden sonraki karmaşayı komple

$('#menu').addClass('js..
gibi okunaklı ifadenin başına kadar siliyoruz ve işlem tamam. Geri kalan kod ile js dosyasının işlevsel ve sorunsuz çalışması gerek.

Kolay Gelsin.



Hiç yorum yok:

Yorum Gönder