Nil Buşra Özer Kişisel Blog

Chronoline.js Kütüphanesi

Herkese merhabalar.

İki hafta aradan sonra sizlerle tekrardan beraberiz. Bu hafta sizlere chronoline.js isimli JavaScript kütüphanesinden bahsetmek istiyorum. Bu kütüphanenin oldukça kullanışlı bir kütüphane olduğunu düşünüyorum, neden diye soracak olursanız ne işe yaradığından bir bahsedelim. Planladığınız işlerinizi tarihe göre yatay bir zaman çubuğu üzerinde sıralamak istediğinizde size gelecek olan en iyi çözüm chronoline.js JavaScript kütüphanesidir. Tarihlerin ve bu tarihlere göre grafiksel olarak göstermek istediğiniz olayların listelerinden yola çıkarak, belirlediğiniz programlar, göstermek istediğiniz tarihsel olaylar vb. gibi durumları göstermek istediğinizde bu kütüphaneyi kullanmak oldukça işinizi kolaylaştıracaktır. Zaman çubuğunuza istediğiniz zaman özelliğini katabilirsiniz; dilediğiniz kadar gün sayısı olarak , hafta olarak, ay olarak, yıl olarak... Bu kütüphanenin kullanılabilmesi için raphael.js JavaScript kütüphanesine ihtiyaç vardır, çünkü bu kütüphane vektörel grafiklerin çizimini sağlayan fonksiyonları sayesinde zaman çubuğu çizelgesini oluşturmamızı sağlar. Bu kütüphane de sizlere anlatacağım kütüphanelerden biri, raphael.js kütüphanesinden önümüzdeki hafta detaylı bir şekilde bahsecedeğim. Tercihinize bağlı olarak jQuery kullanarak daha hoş tooltipler kullanabilirsiniz.

Chronoline.js kütüphanesini bu adresten indirip projenizde kullanabilirsiniz. Aşağıda sizlere bu kütüphaneyi kullanarak ASP.NET ortamında yaptığım, balık sezonunun aylara göre düzenlenmiş bir zaman çizelgesi örneğini açıklamak istiyorum.

Solution Explorer'a aşağıda gördüğünüz gibi Chronoline.js kütüphanesinin dosyalarını ekledim.

Şimdi ise sizlere projemde kullanmış olduğum kodları açıklamak istiyorum.

    var events = [
            { dates: [new Date(2013, 12, 18)], title: "Tekir Sezonu Basliyor", section: 0 },
            { dates: [new Date(2014, 5, 29)], title: "Hamsi Sezonu Basliyor", section: 2 },
    
            { dates: [new Date(2014, 7, 28)], title: "Uskumru Sezonu Basliyor", section: 1, description: "Dilediginiz aciklamayi yaziniz" },
            { dates: [new Date(2014, 10, 10)], title: "Cupra Sezonu Basliyor", section: 3 }
            ];

Yukarıda görmüş olduğunuz kod ile events listesi içerisine section sıralamamıza göre hangi tarihte sezonlarımızı başlatacağımızı belirlemiş olduk.

Section parametresi: Id'sine göre belirlenmiş olan "event" ile ilişkilendirilen parametredir.

   var sections = [
            { dates: [new Date(2013, 11, 15), new Date(2014, 7, 25)], title: "Tekir Sezonu", section: 0, attrs: { fill: "#99FF33" } },
            { dates: [new Date(2014, 7, 28), new Date(2014, 10, 23)], title: "Uskumru Sezonu", section: 1, attrs: { fill: "#d4e3fd" } },
            { dates: [new Date(2014, 5, 29), new Date(2014, 7, 27)], title: "Hamsi Sezonu", section: 2, attrs: { fill: "#9999CC" } },
            { dates: [new Date(2014, 10, 10), new Date(2014, 12, 10)], title: "Cupra Sezonu", section: 3, attrs: { fill: "#eaf0fa" } }
            ];

Yukarıda tanımlamış olduğum section parametresine göre, bu kod parçasında balıkların sezon başlangıç ve bitiş tarihlerini ve grafikte gösterilecek olan sezon rengini belirlemiş olduk.

  $('#to-today').click(function () { timeAy.goToToday(); });

Yukarıda görmüş olduğunuz kod parçası, zaman çizelgesinde bulunduğumuz günün gösterilmesini sağlar.

Aşağıda, yapmış olduğum örneğin ekran görüntüsünü sizlerle paylaşmak istiyorum.

Projenin kodları:

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head runat="server">  
   <meta charset='utf-8' />  
   <meta http-equiv="X-UA-Compatible" content="chrome=1" />  
   <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css" />  
   <title>Chronoline.js Kütüphanesi Örnek</title>  
 </head>  
 <body>  
   <div id="main_content_wrap" class="outer">  
     <section id="main_content" class="inner">  
       <p>Balık Sezonunun Aylara Göre Gösterim Örneği</p>  
       <h2>Aylık zaman çizelgesi </h2>  
       <img border="0" src="pulpit.jpg" width="304" height="175">  
       <div id="target1" class="timeline-tgt">  
         <input id="to-today" type="button" value="Bugune git" style="margin-left: 910px" />  
       </div>  
     </section>  
   </div>  
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
   <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.0.1/jquery.qtip.min.css" />  
   <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.0.1/jquery.qtip.min.js"></script>  
   <script type="text/javascript" src="chronoline/raphael-min.js"></script>  
   <link rel="stylesheet" type="text/css" href="chronoline/chronoline.css" />  
   <script type="text/javascript" src="chronoline/chronoline.js"></script>  
   <script type="text/javascript">  
     $(document).ready(function () {  
       var events = [  
       { dates: [new Date(2013, 12, 18)], title: "Tekir Sezonu Basliyor", section: 0 },  
       { dates: [new Date(2014, 5, 29)], title: "Hamsi Sezonu Basliyor", section: 2 },  
       { dates: [new Date(2014, 7, 28)], title: "Uskumru Sezonu Basliyor", section: 1, description: "Dilediginiz aciklamayi yaziniz" },  
       { dates: [new Date(2014, 10, 10)], title: "Cupra Sezonu Basliyor", section: 3 }  
       ];  
       var sections = [  
       { dates: [new Date(2013, 11, 15), new Date(2014, 7, 25)], title: "Tekir Sezonu", section: 0, attrs: { fill: "#99FF33" } },  
       { dates: [new Date(2014, 7, 28), new Date(2014, 10, 23)], title: "Uskumru Sezonu", section: 1, attrs: { fill: "#d4e3fd" } },  
       { dates: [new Date(2014, 5, 29), new Date(2014, 7, 27)], title: "Hamsi Sezonu", section: 2, attrs: { fill: "#9999CC" } },  
       { dates: [new Date(2014, 10, 10), new Date(2014, 12, 10)], title: "Cupra Sezonu", section: 3, attrs: { fill: "#eaf0fa" } }  
       ];  
       var timeAy = new Chronoline(document.getElementById("target1"), events,  
        {  
          animated: true,  
          tooltips: true,  
          defaultStartDate: new Date(2013, 11, 18),  
          sections: sections,  
          sectionLabelAttrs: { 'fill': '#000099', 'font-weight': 'italic' },  
          markToday: 'labelBox',  
          draggable: true  
        });  
       $('#to-today').click(function () { timeAy.goToToday(); });  
     });  
   </script>  
 </body>  
 </html>

Bu haftalık anlatacaklarım bu kadar, bir sonraki yazımda sizlere Raphael.js kütüphanesinden bahsedeceğim. Şimdilik görüşmek üzere, hoşçakalın...

KAYNAKLAR

Nil Buşra Özer Kişisel Blog

17 Kasım 2013 Pazar

Hiç yorum yok:

Yorum Gönder