Wookmark jQuery Pinterest Tarzı Eklenti 0

Wookmark jQuery eklentisi divlerin üst üste binmesini engelleyerek Pinterest tarzında bir site yapabilirsiniz. Divler sayfanın büyüklüğüne göre yer değiştirebilir ve büyüdüğündede yerini değiştirebilir hale geliyor. Bu jQuery’i kullanmak çok kolay.

jQurey 1.6.2 kullanarak test edilmiş Demo adresindede 1.6.2 var ve çalışır durumda. Daha eski bir jQuery kütüphanesi kullanıyorsanız çakışma ihtimali olabilir dikkat edin.

https://1.bp.blogspot.com/-mvNuHeQqKyk/UPXSSJIb-SI/AAAAAAAAPC4/mU-8GKsWsVg/s1600/jquery-plugin-example.jpg

The Wookmark jQuery plugin

Eklentiyi kullanmak için öncelikle github’dan indirin. Wookmark jQuery Plugin indir

Daha sonra head tagları arasında alttaki kodu ekleyin.

<script type="text/javascript" src="jquery.wookmark.js"></script>

Alttaki kod ilede çalıştırıyoruz. #myContent yerine kendi div’inizin ID‘sini yazmanız gerekiyor.

<script type="text/javascript">$('#myContent li').wookmark({offset: 2});</script>

Eklenti sayfasına giderek detaylarıda oradan görebilirsiniz.

jQuery Eklentisi WordPress Arşiv Listesi 0

WordPress’in bir çok eklentisi var aralarından güzellerini buldukça sizlerle paylaşıyorum. Bu seferki eklentim jQuery ile yapılmış WordPress arşiv eklentisi. Bu eklenti bileşen olarak geliyor yani yan menünüzde güzel bir şekilde listeletebilirsiniz.

https://2.bp.blogspot.com/-zWwMfw67YiY/UVCUrudhZDI/AAAAAAAAQjg/OZNLrm1BClY/s1600/jQuery+Archive+List+Widget+(1).png

Kurulumu kolay bir eklenti. Yönetim panelinden eklentiyi arayabilir veya buradan indirdikten sonra ftp plugins klasörüne yükleyerek yapabilirsiniz. Eklentiyi aktifleştirdikten sonra bileşenler kısmına tıklayın ve bileşen olarak web sitenize ekleyin.

jQuery Archive List Widget

jQuery Şifre Güvenlik Kontrolü Aşamaları 0

Merhaba arkadaşlar jQuery nimetlerinden bir tanesini daha sizlerle paylaşıyorum. Müşterileriniz şifre oluştururken bu jQuery eklentisini kullanabilirsiniz çünkü herkez şifresinin çok zor olduğunu sanır ama bu eklenti ile çoğu kişinin bildiği yalan olacak 🙂

https://1.bp.blogspot.com/-aDkPDMoY2fE/UU6yDDY4yEI/AAAAAAAAQfw/U-Q9mq67wJw/s1600/jquery+pass.jpg

Complexify adında bir eklenti sıkıştırılmış hali 3kb yani çok ufak ve kullanımlık.

jQuery Complexify

Kullanımı şu şekilde örnek HTML kodumuz aşağıdaki gibi;

<!-- js dosyamız -->
<script src='../assets/s/jquery.complexify.js'></script>
<!-- /js dosyamız -->
<div id="demo">
        <input type="password" id="password" placeholder="Password">
        <div id="progressbar"><div id="progress"></div></div>
        <div id="status">
            <div id="complexity">0%</div>
            <div id="complexityLabel">Complexity</div>
        </div>
</div>

İnput’un ID’sine password yazdık. Şimdi bu html kodun altına script tagları ile eklentimizi çalıştırıyoruz.

Dikkat etmeniz gereken nokta input’a verdiğimiz ID’de password yazmıştık jQuery fonksiyonundada #password yazdık.

<script type="text/javascript">
        $(function () {
            $("#password").complexify({}, function (valid, complexity) {
                if (!valid) {
                    $('#progress').css({'width':complexity + '%'}).removeClass('progressbarValid').addClass('progressbarInvalid');
                } else {
                    $('#progress').css({'width':complexity + '%'}).removeClass('progressbarInvalid').addClass('progressbarValid');
                }
                $('#complexity').html(Math.round(complexity) + '%');
            });
        });
</script>

Most Popular Topics

Editor Picks