[BYK]

Merhaba arkadaşlar,

Bazı sitelerde sıkça gördüğümüz "tıkla-değiştir" tipi sayfaların kolayca hazırlanmasına olanak sağlayan bir betik yazdım ve paylaşmak istedim. Ayrıca resimlerin de bu şekilde hızlıca güncellenebilmesine imkan veriyor.

Demolar
http://amplio-vita.net/JSLib/demos/quickEdit
http://amplio-vita.net/JSLib/demos/quickEdit_2
http://amplio-vita.net/JSLib/demos/quickEdit_3

Her klasörde inital ve final şeklinde iki html dosyası var. Initial o dosyanın orijinal hali, final ise betiğin entegre edilmiş hali.

Betiğin kullanımının kolay olması için oldukça uğraştık. Şu an tek yapmanız gereken hangi elemanların düzenlenebilir olduğunu CSS kurallarıyla (örn. #profile>ul>li) belirtip, bu elemanların düzenlenme özelliklerini yine CSS benzeri bir yazımla bildirmek. Gerisini kod hallediyor.

İlk demoda satır içi - inline özellik atama şekli var, elemanın içerisinde quickEdit şeklinde bir özellik yazarak veriyoruz özelliklerini.

İkinci demoda ek olarak hem resim değiştirme görülüyor hem de kurallar harici bir dosyadan(editableRules.txt) alınıyor.

Üçüncü örnek ikinci örneğin aynısı, tek farkı bu sefer kuralları head kısmında tanımlanan özel bir style etiketinden alması.

Kod tamamen ücretsiz ve hala geliştirildiği noktalar var, LÜTFEN yorum ve önerilerinizi paylaşın, kullanmaktan da çekinmeyin.

Not: İkinci ve üçüncü demolarda resmi değiştirmek için tıkladığınızda ne yollarsanız yollayın önceden belirlenmiş bir resim geliyor. Bunun sebebi kötü kullanımı engellemek. Aynı şekilde yazılar da sayfayı tekrar açtığınızda eski hallerinde görünecekler ama siz değiştirdiğinizde arkada bir php dosyasına gönderiliyor hem yeni resim hem de yazılar, yani kod kalıcı değişiklik için (Firebug ile takip edebilirsiniz )

Ayrıca http://code.google.com/p/av-jslib/wi...ckEditTutorial adresinde İngilizce bir "nasıl yapılır" yazısı bulunuyor.

[BYK]

Gerçekten kimse örneğin bir kişiye kendi profilini gösterirken profilini anında düzenleme imkanı vermekle ilgilenmiyor mu yoksa ben yeterince açık yazamadım mı yukarıdaki kod açıklamasını?

[erpci]

valla ben denedim güzel olmuş hakkaten eline sağlık. ilgi çekmesi için konu başlığına ajax falan yazsaydın keşkem bende başlıktan ne olduğunu anlamadan geldim

[BYK]

Teşekkür ederim

Bunu burada birinci ağızdan duyurmamın en önemli sebebi hem kullanımla ilgili sorusu olanlara direk cevap verebilmek hem de gelebilecek her türlü eleştiriyi direk alıp uygulamaya geçirebilmek

AJAX'ı da ekleyelim bakalım başlığa, teşekkürler

[alparslan]

Merhaba Gayet Başarılı Bi Betik Yazmışsınız benimde aklımda böyle bir şey vardı ama kullandığım dil asp olunca php ye göre daha zorlaşıyor acaba bunun asp taraflı betiği varmı elinizde ??

[karflake]

Elinize sağlık.

Grafikler tıklandıktan sonra, upload için açılan bölümün kapanması için, sağ üst köşede küçük bir çarpı yer alabilir.

[BYK]

Merhaba tekrar,

Öncelikle alparslan,
Betik JavaScript tabanlı, yaptığı şey oraya girilen yeni değeri sizin verdiğiniz ayarlar doğrultusunda sunucu taraflı bir dosyaya yollamak. Bu dosya ASP de olabilir PHP de, ASPX de, JSP de

Bunu sayfanıza koyduğunuzda action parametresine örneğin degistir.asp verirseniz değişilik bu dosyaya yollanacak. Burada gerekli yetki kontrolünü yapıp veritabanında veya kayıt dosyasında ilgili değişikliği yapmak sunucu taraflı dosyayı yazana kalıyor.

karflake,
Söylediğin aklımda, hatta ilk yaptığımda düşünmüştüm ancak çarpı işaretini tam sağ üst köşeye oturtma konusunda sıkıntı yaşayınca vazgeçip başlığa çift tıkalyınca kapatılmasını sağlamıştım. Tabi bunu birisine söylemediğiniz sürece bilemiyor insnalar

Teşekkürler görüş ve önerileriniz için. Söylediğim gibi bu sistemi kendi projelerinde kullanmak isteyen olursa yardımcı olabilirim.

[soul]

Gayet guzel gorunuyor ben de yakin donemde bir projede hemen hemen tum admin yonetimini sunun ile yaptim :

http://release.editinplace.org/latest/example.html

EIP olayi kesinlikle cok daha populer olacak, ozellikle CMS tarzi yazilimlarda ya da basit data degistirme noktasinda.

Bu arada genel olarak external bir JS kutuphanesi ile hilighting ve fade in/fade out aksiyonlari da eklenebilir. Bir de ben gene yukaridaki projede textarea gibi alanlara WYIWYG tarzi bir editor de ekledim, dolayisiyla adam tiklar tiklamaz alan WYIWYG editore donusuyor, bu tarz bir ozellikle de en azindan opsiyonel olarak kullanisli olabilir.

[BYK]

Highlight olayını CSS ile yapmayı düşündüm açıkçası. Hani arkasının sarı yapılması daha dikkat çekici oluyor haklısın.

Fade olayları için görsel efekt kütüphanemiz var hatta resmin üzerine gelinceki efekt için direk onu kullanıyoruz. Tabi onun tanıtımı ayrı. WYSIWYG düzenleyici için kesinlikle katılıyorum, sonraki hedefim o olacak.

Kullanım ve sayfaya entegreasyon konusunda ne düşünüyorsunuz peki? Sizce böyle harici dosya ya da sayfa içine style ile CSS benzeri bir yazımla tanımlamak yeterince pratik mi örneğin?

Not: Verdiğin bağlantı için ayrıca teşekkürler soul

[soul]

BYK tarafından gönderilen mesaj:

Kullanım ve sayfaya entegreasyon konusunda ne düşünüyorsunuz peki? Sizce böyle harici dosya ya da sayfa içine style ile CSS benzeri bir yazımla tanımlamak yeterince pratik mi örneğin?

Kullanim fena gozukmuyor, bazi yerlerde cok pratik olacaktir. Ama ek olarak eger desteklemiyorsa JQuery tarzinda bind edilebilir bir arabirim sunmasi daha kullanisli olacaktir, cunku implemente ederken sunucu tarafinda o sekilde bir yerde bind etmek daha pratik oluyor, aksi takdirde HTML de bir cok if then else koymak gerekebiliyor.

Bu sayede mesela eger admin ise direk tum ilgili inputler tek script blogu icerisinde set edilebilir.