Faydalı Araç İpuçları Eğitimleri ve jQuery Eklentileri

Araç ipucu, ortak bir grafik kullanıcı arabirimi öğesidir. Genellikle bir fare işaretçisi olan bir imleç ile birlikte kullanılır. Kullanıcı, tıklamadan imleci bir öğenin üzerine getirir ve bir araç ipucu görünebilir - üzerine gelinen öğe hakkında bilgi içeren küçük bir "vurgu kutusu".

Araç İpuçları için birkaç öğretici ve jQuery Eklentisi derledim.

1. TinyTips – Araç İpuçları için Hafif jQuery Eklentisi

TinyTips, bir sayfadaki hemen hemen her öğeye araç ipuçları ekleme yeteneği veren çok hafif bir jQuery eklentisidir. İyice belgelenmiş ve tasarımcı dostu.

2. jQuery Kullanarak Flickr Tarzı Fotoğraf Etiketleme

jQuery Photo Tagger, yaklaşık 1.000 satır kodla gelir. Bu nedenle, proje sayfasına göz atabilir veya çevrimiçi demoyu kendiniz deneyebilirsiniz. Hotspot oluşturmak için fareyi tıklarken CTRL tuşunu basılı tutmanız gerektiğini lütfen unutmayın.

Demo | İndirmek

3. TipTip Özel Araç İpucu jQuery Eklentisi, Sıfır Görüntülü

TipTip, yerel tarayıcı araç ipucunun yaptığı gibi title niteliğini kullanır. Bununla birlikte, TipTip kullanılırken başlık kopyalanacak ve ardından öğeden kaldırılacaktır, böylece tarayıcı araç ipucu görünmeyecektir.
TipTip, kendisine TipTip uygulanmış her öğe için bir açılır öğe kümesi oluşturmak yerine, toplamda yalnızca bir açılır öğe kümesi oluşturur. Bu, işleri hızlandırmaya yardımcı olur ve işlem süresini azaltır. Oluşturulan öğelerin tümü div öğeleridir ve gövde öğesinin sonuna eklenir.

4. CSS3 ile Yeni Görsel Açıklamalar Nasıl Oluşturulur

ZURB bize Yeni Görsel Açıklamaların Nasıl Oluşturulacağını öğretti. Çözüm teknik olarak çok karmaşık değildi. Notable ile zarif bozulma kavramını benimsediler: eski tarayıcılara net bir şekilde düşen yeni CSS tekniklerinden yararlanıyorlar.

Demo

5. Bağlantılarınızı Pluralink ile Açılır Liste Olarak Gösterin

Pluralink, metninizde birden çok bağlantı düzenlemek için harika bir javascript eklentisidir.

6. CSS ve jQuery ile Gri Tonlamalı Hover Etkisi

CSS ve jQuery ile Greyscale Hover Effect, CSS Sprite'larına ve birkaç satır jQuery'ye dayanır, ancak uygulanmadan önce biraz hazırlık gerektirir. Büyük ölçekli projeler için önerilmez ve muhtemelen portföy parçalarını görüntülemek için en iyisidir.

7. EverythingZoomer jQuery Plugin ile Yakından Bakın

Küçük bir alanınız var. Fareyle üzerine geliyorsun. Size daha yakından bakmanızı sağlayan bir alan açılır. Bu, bunu yapan bir jQuery eklentisidir. Size onu ne için kullanmanız gerektiğini veya ayrıntılı kullanım senaryoları anlatmayacağım. Kendi yaratıcılığınız orada size yardımcı olabilir.

Demo

8. JSON ve jQuery ile Zengin İçerikli Araç İpucu Oluşturun

Bu öğretici, bir JSON dizisinden alınan bilgilerle jQuery tarafından desteklenen araç ipuçlarının nasıl oluşturulacağını gösterecektir.

Demo

9. Varsayılan Araç İpucunuzu Güzel (mb) Araç İpucu ile Değiştirin

(mb)Araç ipucu, jQuery'deki web sayfanız için güzel bir ipucudur.

İndirmek

10. Captify Görüntüler Güzel Resim Altyazıları Üzerine Geldiğinde Görünüyor

Captify, rollover'da görünen basit, güzel resim başlıklarını görüntülemek için Brian Reavis tarafından yazılmış bir jQuery eklentisidir. Firefox, Chrome, Safari ve berbat Internet Explorer üzerinde test edilmiştir. Captify, bunun gibi altyazıları görüntülemek için başka bir jQuery eklentisi olan ImageCaptions'tan ilham aldı.

11. Görüntüleri imgPreview jQuery Eklentisi ile Önizleyin

Peter Higgins, Dojo Zoomer'ı yarattı. 3 panele ayrılmıştır. Sol paneldeki görüntünün üzerine gelindiğinde, sağ panel görüntünün kırpılan kısmını dinamik olarak görüntüler, böylece ana görüntünün sizi ilgilendiren kısmına açıkça odaklanabilirsiniz.

12. GPL altında jQuery Javascript Görüntü Büyütücü

JQZoom, popüler jQuery javascript çerçevesinin üstüne yerleştirilmiş bir javascript görüntü büyütecidir.jQzoom, istediğinizi büyütmek için harika ve kullanımı gerçekten kolay bir komut dosyasıdır.

13. jQuery ve CSS ile Basit Şeffaf Araç İpuçları

CSS araç ipuçları, modern web tasarımında çok popülerdir ve yaygın inanışın aksine, özellikle çok popüler javascript çerçevelerinden biriyle bunları oluşturmak gerçekten kolaydır.

Demo

14. Magic Toolbox – Javascript ve Flash Image Zoom Tools

Magic Toolbox, 2 harika javascript görüntü yakınlaştırma aracı yarattı (Magic Zoom ve Magic Magnify). Magic Zoom bir JavaScript yakınlaştırma aracıdır. Görüntüleri inanılmaz ayrıntılarla göstermenin en iyi yolu.

15. Prototip 2 – Kolaylıkla Güzel Araç İpuçları Oluşturun

Prototip, Prototype javascript çerçevesini kullanarak hem basit hem de karmaşık araç ipuçlarını kolayca oluşturmanıza olanak tanır.

Demo

16. jQuery Kullanarak En Kolay Araç İpucu ve Görüntü Önizleme

En Kolay Araç İpucu ve Görüntü Önizleme, bağlantı veya bir küçük resmin üzerine geldiğinizde görünen araç ipucu benzeri baloncuk açılır pencerelerinden biridir.

Demo

17. jQuery ile Coda Stili Popup Bubble Araç İpuçları

Coda, Mac için yeni web geliştirme araçlarından biridir ve tasarımcılar ve geliştiriciler arasında popülerdir.

18. Tıklanabilir Görüntü Bölgesini Etiketle Açılır Araç İpucunu Gösteriyor

Taggify, blog yazarlarının ve yayıncıların, belirli görüntünün gereksinimlerine bağlı görüntü araç ipuçları ekleyerek sitelerini geliştirmelerine olanak tanıyan bir web widget'ıdır.
Demo

19. Javascript ve CSS ile Göze Çarpmayan Balon İpuçları

Kabarcık Araç İpuçları, herhangi bir web sayfasına balon şeklinde süslü araç ipuçları eklemenin (biraz CSS ve javascript aracılığıyla) kolay bir yoludur.

Demo

20. Prototip ve Scriptaculous için Fade In ve Out Araç İpuçları

CoolTips, hafif, göze batmayan bir JavaScript web tarayıcısı araç ipuçları değiştirme tekniğidir.
CoolTips, geleneksel web tarayıcı araç ipuçlarını değiştirmek için kullanılır. Araç ipuçları, başlık özelliğinin içeriğini alır, bu nedenle tamamen göze batmaz. CoolTips, Prototype JS ve script.aculo.us çerçevelerine dayalı bir OO sınıfıdır.

21. Tatlı Başlıklar Şeffaf ve Solan İpuçları

Sweet Titles Fading Tooptips, NICE Titles'ın bir kopyası değil, Dunstan'ın gözden geçirilmiş girişimini geliştirmeye de çalışmıyor. Ve kesinlikle Dynamic Drive'ın olay işleyici istilasına uğramış komut dosyalarından birinden kopyalanmamıştır.

Demo

22. Prototip Çoğu Özellik Prototip için Araç İpuçları

Prototip, Prototype javascript çerçevesini kullanarak hem basit hem de karmaşık araç ipuçlarını kolayca oluşturmanıza olanak tanır. Ayrıca Scriptaculous kullanıyorsanız, bunlara bazı güzel efektler bile ekleyebilirsiniz.

Demo

23. BoxOver DHTML/Javascript Hafif Araç İpuçları

BoxOver, bir web sitesinde araç ipuçlarını göstermek için javascript / DHTML kullanır. Ancak araç ipuçlarının uygulanması DHTML veya javascript bilgisi gerektirmez. Bir etiketin "başlık" özelliği aracılığıyla ayarlayarak ihtiyaçlarınıza göre özelleştirmek için ayarlanabilecek pek çok ince ayar vardır.