jQuery

jQuery Tab Menü Eklentisi ve Kullanımı 0

Merhabalar. Beğendiğim bir jQuery tab menüyü sizlerle paylaşıyorum.

https://2.bp.blogspot.com/-2CKGLF4STCk/UexAo-Hr-OI/AAAAAAAASHI/vi9LqEPt16Q/s1600/Tabulous.jpg

Tasarımcılar için kesinlikle öneriyorum yeni yaptığınız web sitelerinde böyle güzel tab menüler kullanırsanız web siteleri daha şık olacaktır. 🙂

tabulous.js

Demo / Download

Kurulumu ise alttaki gibi;

HTML head tagları arasına alttaki gibi ekliyoruz. Yanlız burada bilmeniz gereken bu eklenti 1.7.2 sürümünde denenmiş ve çalışıyor siz hangi sürümde deneyeceksiniz bilmiyorum çakışma ihtimali olabilir. Birde sizin kullandığınız bir sürüm var ise alttaki jquery.min.js’yi kaldırın.

<link href='tabulous.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="tabulous.js"></script>

Daha sonra jQuery tab menümüzü oluşturacağız. HTML’i artık tab nerede olacaksa oraya ekliyorsunuz.

<div id="tabs">
		<ul>
			<li><a href="#tabs-1" title="">Tab 1</a></li>
			<li><a href="#tabs-2" title="">Tab 2</a></li>
			<li><a href="#tabs-3" title="">Tab 3</a></li>
		</ul>

		<div id="tabs_container">

			<div id="tabs-1">
				<!--tab content-->
			</div>

			<div id="tabs-2">
				   <!--tab content-->

			</div>

			<div id="tabs-3">
				    <!--tab content-->
			</div>

		</div><!--End tabs container-->

</div><!--rooteto tab bitti-->

jQuery Fonskyionumuzu alttaki kod ile çalıştırıyoruz ve tab’ımız bundan sonra aktif hale geliyor.

$(document).ready(function ($) {

    $('#tabs').tabulous({);

});

jQuery tab menüler çok gördüm ancak en güzeli bu adamınki diyebilirim. Adamın sitesi 🙂 : tabulous.js

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.

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

1

En ilginç Zaman tüneli Kapakları