GridTab ile Duyarlı Sekmeli Pencere Öğeleri Oluşturun

Kullanarak web siteleri oluşturmak her zaman daha kolay açık kaynak araçları tekerleği yeniden icat etmek yerine. Bu araçlar kitaplıklardan daha küçük eklentilere kadar çeşitlilik gösterir, ancak temelde her şey için bir çözüm bulabilirsiniz..

Olağanüstü jQuery GridTab eklentisi güzel bir örnek. Size izin verir özel bir ızgara ayarlamak, kesme noktalarını tanımlayın, ve duyarlı sekmeli bir widget oluşturmak herhangi bir web sitesine uygun.

Tasarımınıza uygun bir sekme özelliği oluşturmak için kendi CSS sınıflarınızı ekleyebilir veya var olanlarla çalışabilirsiniz. Bu eklenti ayrıca destekler Sonraki / önceki kontroller için navigasyon elemanları ve sekmeler arasında geçiş yapma.

Kurulum bir esinti ve sadece Bir bağımlılık olarak jQuery kütüphanesi. Kurulduktan sonra, GridTab’ı npm’den yakalayabilir veya doğrudan GitHub’dan indirebilirsiniz..

Bu sekmeli widget eklentisinin bir varsayılan tarz, yani bir var ayrı CSS stil sayfası JS eklenti dosyasının tepesinde. Ancak, HTTP isteklerini azaltmak için bu CSS’yi her zaman kendi adresinizle birleştirebilirsiniz..

Eklentiyi başlatmak için, sadece toplam ızgara boyutu ile birlikte isteğe bağlı herhangi bir parametre (tümü GitHub'da listelenmiştir).

İşte basit başlatma komut dosyası:

 $ (document) .ready (function () $ ('# gridtab-1'). gridtab (grid: 3);); 

Ayarlar dahil özel seçiciler, duyarlı stiller, kenarlık / dolgu / renk ayarları, ve elbette, bir geri çağırma işlevi.

Tüm bunların nasıl çalıştığını ve tarayıcınızda nasıl göründüğünü merak ediyor olabilirsiniz. Kontrol et “Demos” görmek için birkaç örnek, dahil olmak üzere ham kaynak kodu kopyalayabilirsin.

Çoğu kişi sekmeleri küçük profil widget'ları için özellikler olarak düşünür. ancak, portföy web siteleri ayrıca faydalanabilir sekmeli özelliklere sahip ızgaralar ve GridTab eklentisi bu etkinin yok edilmesi için en iyi kaynaktır.

Bilmeniz gereken her şey, dahil tam dokümantasyon, Ana GridTab sayfasında bulunabilir. Bu ayrıca GitHub deposuna bir bağlantı içerir, böylece kaynağa göz atabilir ve kendi yanıt veren sekmeli ızgaralarınızı özelleştirmeye başlayabilirsiniz.