JavaScript Kütüphane Split.js Web

Split.js Nedir?

Yazılım Kodu Kanalına Abone Olun

Herkese merhaba,

Bu yazıda Split.js kütüphanesinin ne olduğundan ve nasıl kullanılacağından bahsedeceğim.

Split.js, Öğelerin genişliğini veya yüksekliğini yönetmek için kullanılan bir kütüphanedir diyebiliriz.  Elle genişletilebilir, daraltılabilir div yapılarını bizlere sunan bir kütüphanedir. Kullanımı gayet kolaydır. IE9’da çalışır, Firefox/Chrome/Safari/Opera tarayıcılarında da desteklenir.

Aşağıdaki kod yardımıyla siz de bu kütüphaneyi rahatlıkla kullanabilirsiniz.

HTML Kodu

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Split.js Nedir?</title>
</head>
<body>
  <div class="split">
    <div id="split-0">İçerik 1 </div>
    <div id="split-1">İçerik 2</div>
</div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.2/split.min.js"></script>
</body>
</html>

JAVASCRIPT Kodu

Split(['#split-0', '#split-1'], {
    direction: 'vertical',
})

CSS Kodu

.gutter {
    background-color: #eee;
    background-repeat: no-repeat;
    background-position: 50%;
}

.gutter.gutter-vertical {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
    cursor: row-resize;
}


#split-0{
  height:200px;
  background-color:lightcyan;
}

#split-1{
  height:200px;
  background-color:black;
  color:white;
}


.split{
  height:400px;
}

1

Sitenizde kullanmak için linkini ziyaret ederek, kendinize göre revizeler yapabilirsiniz.

Kullanımı ile ilgili daha fazla detay için linkini ziyaret ederek detaylı kullanabilirsiniz.

Herkese çalışma hayatında ve yaşamında başarılar kolaylıklar.

26 Kez Okundu

Yazar hakkında

Yavuz Selim Kart

Yazılım ve veri tabanında bildiklerimi anlatmaya gayret ediyorum. Halen birçok programlama dili üzerinde araştırmalar yaparak kendimi geliştiriyorum. Bunlar haricinde Grafik Tasarım ve Wordpress konularına da ilgim bulunmakta. SEO ve Sosyal medya yönetimleri hakkında da bilgim mevcuttur. Kısaca çok çalışmayı seven azimli biriyim.

Sitedeki yazıları kopyalamak yasaktır.