Nil Buşra Özer Kişisel Blog: Intro.js Kütüphanesi

Intro.js Kütüphanesi

Herkese merhabalar.

İki hafta aradan sonra sizlerle tekrardan beraberiz. Bu hafta sizlere intro.js isimli JavaScript kütüphanesinden bahsetmek istiyorum. Önceki yazımda, bu kütüphanenin genel özelliklerinden ve hangi amaçla kullanıldığından bahsetmiştim. Örneğin, bir hastane bilişim sistemi yapmış olalım ve bu bilişim sistemi o kadar kompleks olmuş olsun ki kullanıcı olan hasta, sitenin hangi kısmından tahlil sonucuna ulaşacağını bilememiş olsun. İşte kullanıcıyı bu zorluktan kurtaracak olan intro.js kütüphanesidir. Bir projenin en önemli özelliklerinden biri kullanıcının projeyi rahatlıkla kullanabilmesidir. Kullanıcıya bu kütüphane sayesinde, adım adım izleyeceği bir kullanım kılavuzu oluşturarak proje tanıtımımızı yapmak mümkün. Projemize bu kütüphaneyi nasıl ekleyeceğimize ve örneğimize geçmeden önce, sizlere bu kütüphanenin içerdiği bazı fonksiyonlardan bahsetmek istiyorum.

Fonksiyonlar

1) introJs(targetElm)] : IntroJs objesi üretir ve döndürdüğü değer, üretmiş olduğu objedir.

targetElm: Kılavuzda adım üretilecek element için tanımlı olması gereklidir. Genellikle dizgi olarak seçilir.

2) introJs.start() : Tanımlı olan element veya elementler için adım adım ilerleme özelliğini başlatır. Döndürdüğü değer introJs objesidir.

3) introJs.goToStep(step) : Kılavuzdaki istenen adıma gider. Aldığı parametre olan step, istenen adımdır. Döndürdüğü değer introJs objesidir.

introJs().goToStep(3).start(); //adım 3'ten başlatır

4) introJs.exit() : Kılavuzdan çıkılmasını sağlar. Döndürdüğü değer, introJs objesidir.

5) introJs.setOption(option,value) : Bu fonksiyon, intro.js objesine tek bir seçenek ekler. Döndürdüğü değer introJs objesidir. Örneğin, kılavuzda karşımıza çıkan tooltip'in sol veya sağ taraftan gelip gelmeyeceğini belirleyebiliriz. Aşağıdaki örnekte tooltip'in sol taraftan gelmesi seçeneğini belirlemiş oluyoruz.

option: Seçeneğin dizgi tipindeki anahtarıdır.
value: Seçeneğin dizgi ya da sayı olarak değeridir.

introJs().setOption("tooltipPosition", "left");

6) introJs.setOptions(options) : Bu fonksiyon, intro.js objesine birden fazla seçenek eklememizi sağlar.

introJs().setOptions({ skipLabel: "Exit", tooltipPosition: "left" });

Kütüphanemizin içerdiği fonksiyonları da gördükten sonra bu kütüphaneyi nasıl kullanacağımıza bakalım.

Intro.js Kütüphanesinin Kullanımı

Aşağıdaki 3 adımdan sonra artık bu kütüphaneyi kullanmaya hazırsınız.

1) Gerekli js ve css dosyalarını bu siteden indirebilirsiniz. Dosyaları indirdikten sonra, intro.js ve introjs.css dosyalarını sayfanıza ekleyin. Sağa ve sola hareket desteği için introjs-rtl.min.css'i kullanın.

2) HTML elementlerinize data-step ve data- intro' yu ekleyin.

3) introJs().start() fonksiyonunu çağırarak kılavuzun adım adım başlamasını sağlayabilirsiniz.

Aşağıda sizin için ASP.NET ortamında hazırlamış olduğum 4 adımdan oluşan bir kılavuz taslağı bulunmaktadır.

Aşağıda kütüphaneyi indirdikten sonra projemize eklenen dosyalar bulunmaktadır.

Yukarıda vermiş olduğum projenin kodları:

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
 <!DOCTYPE html>  
 <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <!-- Bootstrap -->  
   <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">  
   <title>Intro.js Örneği</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <!-- styles -->  
   <link href="../assets/css/bootstrap.min.css" rel="stylesheet">  
   <link href="../assets/css/demo.css" rel="stylesheet">  
   <!-- Add IntroJs styles -->  
   <link href="../../introjs.css" rel="stylesheet">  
   <link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">  
 </head>  
 <body>  
   <div class="container-narrow">  
     <div class="masthead">  
       <ul class="class="jumbotron" data-step="4" data-intro="Facebook girişi">  
         <li><a href="https://www.facebook.com/">Facebook</a></li>  
       </ul>  
       <h3 class="muted">Intro.js Kütüphanesi</h3>  
     </div>  
     <hr>  
     <div class="jumbotron">  
       <h1 data-step="1" data-intro="Bu bir tooltip!">Web Sitesinin Özelliklerini Intro.js ile Adım Adım Anlatmak</h1>  
       <a class="btn btn-large btn-info" href="javascript:void(0);" onclick="javascript:introJs().start();">Nasıl Yapılıyor?</a>  
     </div>  
     <hr>  
     <div class="row-fluid marketing">  
       <div class="span4" data-step="2" data-intro="İkinci adım:)" data-position='right'>  
         <h4>Birinci kısım</h4>  
         <p>Dilediğiniz açıklamayı yazın.</p>  
       </div>  
       <div class="span4" data-step="3" data-intro="Üçüncü adım:)" data-position='left'>  
         <h4>İkinci kısım</h4>  
         <p>Dilediğiniz açıklamayı yazın.</p>  
         <h4>Üçüncü kısım</h4>  
         <p>Dilediğiniz açıklamayı yazın.</p>  
       </div>  
     </div>  
     <hr>  
   </div>  
   <script type="text/javascript" src="../../intro.js"></script>  
 </body>  
 </html>

Bu haftalık anlatacaklarım bu kadar, bir sonraki yazımda sizlere Hammer.js kütüphanesinden bahsedeceğim.

Şimdilik görüşmek üzere, hoşçakalın...

KAYNAKLAR

Nil Buşra Özer Kişisel Blog

26 Ekim 2013 Cumartesi

Intro.js Kütüphanesi

2 yorum: