Xoops Temanıza yükleniyor efekti.

Son güncelleme: 11.09.2008 16:28
  • Merhabalar..ister Xoops sitelerinden indirdiğiniz favori temanızı kullanın isterseniz bizim derslerimizden faydalanarak veya kendi çabanızla bir tema yapmış olun. Hazır CMS'leri kullanmanın en kötü yanı bütün sitelerin hemen hemen aynı olması, bu durumda sitenizi diğerlerinden ayıracak şeyler yapmalısınız.

    Zaman zaman temanızı özelleştirmeniz için bir takım ipuçlarını dersler bölümünden sizlerle paylaşacağım..bu dersteki konumuz sayfalarımıza yükleniyor pencerisi açtırmak ve yükleme bittiğinde pencereyi kapatmak..

    Bildiğiniz gibi bir html dökümanı head ve body olmak üzere 2 bölümden oluşuyor..head bölümü öntanımlamaları içerirken body bölümü sayfalarımızın içeriğini taşıyor..eğer sitenizde yüklenmesi ağır içerikler sunuyorsanız ve sayfalarınızın yüklenme süreleri çok uzun sürüyorsa aşağıdaki işlemleri yaparak hiç değilse kullanıcılarınızın sıkıntısını bir nebze önleyebilirsiniz

    şimdi theme.html dosyanızı bir metin editöründe açın..body bölümünün en başına yani taginden hemen sonra aşağıdaki kodları ekleyin

    <div id='waitDiv' style='position:absolute;left:2%;top:20%;visibility:hidden;text-align: center;'>
    <table cellpadding='6' style='border:2px solid #336699' bgcolor='#FFFFFF'>
    <tr>
    <td style='text-align:center' bgcolor='#FFFFFF'>
    <b>
    <big>Yükleniyor...</big>
    </b><br>
    <img src='<{$xoops_url}>/images/yukleniyor.gif'><br>
    Lütfen bekleyin...
    </td>
    </tr>
    </table>
    </div>
    <script type='text/javascript'> <!--

    var DHTML = (document.getElementById || document.all || document.layers);
    function ap_getObj(name) { if (document.getElementById) { return document.getElementById(name).style; } else if (document.all) { return document.all[name].style;
    } else if (document.layers) { return document.layers[name]; } } function ap_showWaitMessage(div,flag) { if (!DHTML) return; var x = ap_getObj(div); x.visibility = (flag) ? 'visible':'hidden'
    if(! document.getElementById) if(document.layers) x.left=280/2; return true; } ap_showWaitMessage('waitDiv', 1);

    //--> </script>

    gördüğünüz gibi kodun işleyişi çok basit..resim ve mesaj içeren alanları kendinize göre özelleştirebilirsiniz

    şimdi sayfanın yüklenmesi bittiğinde pencereyi kapatacak kodu taginden hemen önce bir yere girin..işte kod;

    <script type='text/javascript'>
    <!--
    ap_showWaitMessage('waitDiv', 0);
    //-->
    </script>

    işte bu kadar..

    bu javascript kodları ilk önce Gezginler sitesinde görülmüş ve nasıl yapıldığı TurkXOOPS forumlarında sorulmuştur..herkesin daha kolay ulaşabilmesi ve kullanabilmesi için dersler bölümüne de ekleme gereği gördüm..umarım yararlı olmuştur.



    Bora Canbula
#11.09.2008 16:28 0 0 0