Çarşamba 25 Ocak 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. JavaScript
  3. Shave.js eklentisiyle dinamik kısaltılmış metin
 Shave.js eklentisiyle dinamik kısaltılmış metin
JavaScript

Shave.js eklentisiyle dinamik kısaltılmış metin

Yazar : Fatih 4 Ocak 2017 2 Comments

Çoğu blog sitelerinde bir yazı(post)nın önizleme metnini göstermek için “Devamını oku” özelliğini kullanılır. Bu metin yerden tasarruf etmek için okuyucuları okumaya, tıklamaya teşvik etmek için belirli bir noktada kesilir.

Bazen bu özelliği tek bir sayfa üzerine eklemek isteyebilirsiniz. İçeriğin dinamik olarak kesilmesi için JavaScript eklentisi olan Shave.js işinizi rahatlıkla görebilir.

Bu eklenti hakkında bir gerçekte gördüğüm en ilginç reklamlardan birini yapan Dollar Shave Club ekibi tarafından oluşturulmasıdır. Ekibin bir Github sayfasının olmasının yanısıra hem orjinal hem de fork repo‘larla dolu olduğununda altını çizelim.

webmaster-kitchen-shavejs-github

Bu özel eklenti Github’da oldukça yeni ve 1000+ yıldıza sahiptir. Bağımsız olduğu için tarayıcıda veya diğer kütüphaneler içeriğinde her şeye rağmen JavaScript üzerinde çalışabilir.

Shave() fonksiyonuyla yalnızca iki parametre alarak kod kurulumu da oldukça basittir. Bir element seçici(element selector) ve bu element için bir maksimum yükseklik(max height)tir.

İşte basit bir örnek:

Kısaltılmış(kesilmiş) metinden sonra özel karakterlerle geçiş yapabileceğiniz ekstra parametrelerde vardır. Shave(tıraş) efekti uygulamak istediğiniz birçok seçici(selector)de vardır.

Aslında Shave(tıraş) eklentisini sitesinde canlı bir demoyla görebilirsiniz.

webmaster-kitchen-shavejs-ornek

webmaster-kitchen-truncate-text-example

ShaveJS’i eğer kütüphanelerden birinde tercih edecekseniz. jQuery veya Zepto üzerinde çalışmak üzere yapılandırılmıştır. Sitenize girip kullanmaya başlamak için en kolay eklentilerden biridir ve ayrıca Vanilla JS üzerindede çalışır.

Eklentiyi kullanmaya başlamak için Github repo‘sundan bir kopyasını indirebilir veya Npm gibi bir repodan çekebilirsiniz. Ayrıca Github repo’sunda eklentiyle ilgili yönergeler ve dokümanlar bulabilirsiniz. Böylece eklentinin tamamını kopyalayabilir, yapıştırabilir ve Traş(Shaving) yapabilirsiniz.

Geri bildiriminizi aşağıdaki yorum bölümüne bırakmayı unutmayın. Umarım faydalı olmuştur. Herkese iyi çalışmalar diliyorum. Webmaster Mutfakta kalın. ?

İşin mutfağını öğrenmek herkesin hakkı! Webmaster Kitchen işin mutfağını öğrenin.  ?

Etiketler: Dinamik kısaltılmış metin yapma dollar shave club shaveJS eklentisi shaveJS nedir shaveJS plugin
Önceki Yazı
Sonraki Yazı

Fatih

author

2 Yorumlar

  • Enes Altuntas says:
    6 Ocak 2017 at 10:05

    Gerçekten çok işime yaradı bilgi için teşekkürler.

    Reply
    • Fatih Özel says:
      6 Ocak 2017 at 10:37

      Rica ederiz. İlginiz alakanız için asıl biz teşekkür ederiz.

      Reply

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.