Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / HT M L5 / HT M L5 i l e Z i ya retçi l eri n i ze D eğ i şti ri l eb i l i r İ çeri kl er Su n u n
HTML5 ile Ziyaretçilerinize Değiştirilebilir İçerikler Sunun Vatanay Özbeyli tarafından 06 Haziran 2013 tarihinde yazıldı. ~ Yorum Yok + Değiştir
Merhaba arkadaşlar. HTML5 ‘in getirdiği avantajlı yenilikleri konuşmaya devam ediyoruz. Bu makalemde ise “contenteditable” özelliği ile düzenlenebilir içerikler hazırlayacağız. HTML5 öncesinde Ajax ve form öğeleri desteğiyle benzeri içerikler hazırlamak mümkündü. Fakat bu işlem için bile kırk takla atmamız gerekiyordu. HTML5 desteği ile bu işlemi yapmak saniyeler sürüyor. Şimdi konuyu biraz genişletelim, sonrasında ise sizler için hazırladığım örnek ile devam edelim.
HTML5′in Contenteditable özelliğini tanıyalım Contenteditable’ı biraz açalım. En basit haliyle kullanım şekli : 1 <article>Bu düzenlenebilir bir makaledir.</article> Tanımlamasını True dışında, Inherit veya False olarak da düzenleyebiliyoruz. Inherit hiyerarşide daha üst bulunan elementlerdeki özelliği direkt olarak alırken False ise düzenlemeyi kapatıyor.
Değişiklik nasıl kayıt edilir? Kayıt etmek veriyi nereye depolayacağımıza göre değişmekte. Bir veritabanımız olmadığını varsayalım ve bu işlemi localStorage üzerinden halledelim. Bu teknik için ise jQuery yardımına ihtiyaç duyacağız. Öncelikle içeriğimizin altında Kaydet buttonu ekleyerek başlayalım. 1 <article id="adobewordpress">Yukarı çıktığımızda kapının eşiğine geçtim ve herkesin geçmesini bekledim. Erdal ve Zeynep peşi sıra geçti. Elif ise yavaş adımlarla geliyordu. Kısa bir süre göz göze geldik. Yüzünde küçük bir gülümseme yakaladım. Dudaklarından “Elveda.” sözcüğü döküldü. Çığlıklarımız arasında elindeki tabancayı kafasına götürdü ve tetiği çekti. 2 3 “Elveda Elif.” dedim içimden. Seni çok özleyeceğim.
</article> 4 <button id="kaydet">Değişikliği Kaydet</button> Böylece Değişikliği Kaydet buttonuna basıldığında kayıt işlemimiz başlayacak. Şimdi ise yazılım ile devam edelim. 1 var theContent = $('#adobewordpress'); 2 $('#kaydet').on('click', function(){ 3 var editedContent = theContent.html(); 4 localStorage.newContent = editedContent; 5 }); Bu kod localStorage üzerine güncel verileri içeren yeni bir anahtar oluşturacak. Firebug veya diğer web geliştirici araç sayesinde verilerin sağlıklı kayıt edilip edilmediğini kontrol edebilirsiniz. Firefox kullanıcıları DOM panelinden localStorage diye arama yaparlarsa verilere erişebilirler. Chrome ve Safari kullanıcıları ise Kaynaklar (Resources) alanına gitmeliler.
Şimdi içeriği güncellemek için aktif verileri alabiliriz. 1 if(localStorage.getItem('newContent')) { 2 theContent.html(localStorage.getItem('newContent')); 3 } Yukarıdaki newContent alanı eğer içerik güncellenmişse onu yayınlar. Eğer içerik alanı boşsa HTML5 içerisindeki varsayılan veriyi yayınlar. Bütün bu işlemlerimizi detaylıca test etmekte fayda var.
HTML CSS Result Edit on CodePen 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15.
<article id="adobewordpress" contenteditable="true"> Yukarı çıktığımızda kapının eşiğine geçtim ve herkesin geçmesini bekled “Elveda Elif.” dedim içimden. Seni çok özleyeceğim. <button id="kaydet" contenteditable="false">Değişikliği Kaydet </article>
<script> var theContent = $('#adobewordpress'); $('#kaydet').on('click', function(){ var editedContent = theContent.html(); localStorage.newContent = editedContent });
Kapanış Bu makalemde HTML5′in yeni özelliklerinden Contenteditable’ı tanıdık ve inceledik. Ayrıca jQuery ve localStorage sayesinde mükemmel bir interaktif içerik sunumu hazırladık. Bir sonraki makalemde görüşmek üzere, hoşça kalın.
Benzer Konular: HTML5 Nedir? HTML5 Müzik Oynatıcı CSS ve jQuery Yardımıyla Resimlere Caption HTML5 ve Google Map ile Yerinizi Bulun Responsive HTML5
Yazı Kategorisi : HTML5 , Tasarım Unsurları Anahtar Kelimeler : contenteditable , değiştir , düzenlebilir , editable , form , güncelle , html5 , olmadan , online , site , üzerinden