Jquery Ui İle Tab Menü

jquery-ui-tab-menuE artık şu miskinliği atalım dedim.İki haftalık güzel mi güzel insanı amaçları uğruna yitmeye çalışan güzel bir etkinliğe katıldıktan sonra artık yeter dedim ve blogumu ilk açtığımda ki heyecan ile bloglayayim dedim.Bu etkinliği söylemeden geçmek ayıp gerçekten.Etkinliğin adı Linux Yaz Kampı tabikide Windows yaz kampı olacak değil. 😀 2 hafta boyunca Linux üzerinde Php geliştirdik.Cookies adlı bir grup kurup blog uygulaması yaptık. 😀 Onuda geçelim özgür yazılımın dadını tattık,egoların kırıldığını ve gönül vermeyi gördük.İlk hafta sıkılmadım değil ama sonrası geldi yani iyi ki de kalmışım diyorum.Hocalarımıza teşekkürlerimi sunar ve konumuza geçerim. 🙂 Bir müşterimin işinde kullandığım taslağı değiştirerek sağolsun onun izniyle ufak eklenti haline getirerek paylaşayim dedim.Jquery Ui kullanarak bootstrap tarzı bir tab menü oldu.Kurulumu oldukça basit yapılması gereken her şeyi açıklamalarda göstereceğim zaten.

Öncelikle sayfamıza “headerUiMenu.css” dosyamızı ve “ss-pika.css” font dosyamızı ekleyelim.
Sonrasında tab eklentisini kullanabilmek için jquery kütüphanelerimizi ekleyelim ve tab eklentimizi çalıştıralım.

    <link rel="stylesheet" type="text/css" href="themeCss/headerUiMenu.css">
    <link rel="stylesheet" type="text/css" href="themeFont/ss-pika.css">
    <script type="text/javascript" src="themeJs/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="themeJs/jquery.ui.core.js"></script>
    <script type="text/javascript" src="themeJs/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="themeJs/jquery.ui.tabs.js"></script>
    <script type="text/javascript">
	$(function() {
		$( "#tabs" ).tabs();
	});
    </script>

Menü için 9 farklı renk belirlediğimiz için sınıf isimlerinide o renk adlarını kullanmamız yeterli.
Örnek olarak beyaz bir tema istediğimizde “white” yazmamız yeterli olacaktır.

<div id="tabs" class="autoSize">
	<ul class="headerTabWrap white autoSize overflowHid">
		<a href="#" class="overflowHid"><span class="logo floatLeft">{ bulutuzer }</span></a>
		<li><a href="#tabs-1" class="ss-icon">layers</a></li>
		<li><a href="#tabs-2" class="ss-icon">wrench</a></li>
		<li><a href="#tabs-3" class="ss-icon">building</a></li>
		<li><a href="#tabs-4" class="ss-icon">usergroup</a></li>
		<li><a href="#tabs-5" class="ss-icon">userfile</a></li>
		<li><a href="#tabs-6" class="ss-icon">notice</a></li>
		<li><a href="#tabs-7" class="ss-icon">calendar</a></li>
		<li><a href="#tabs-8" class="ss-icon">bullseye</a></li>
	</ul>
	<div id="tabs-1">
		<ul class="headerTabConnect autoSize overflowHid">
			<li class="forum"><a href="#tabs-9"><span class="ss-icon">list</span>MENÜ</a></li>
			<li><a href="#tabs-10"><span class="ss-icon">coffee</span>PROJELER<span>+198</span></a></li>
			<li><a href="#tabs-11"><span class="ss-icon">mic</span>MÜZİKLERİM</a></li>
			<li class="gundem"><a href="#tabs-12"><span class="ss-icon">picture</span>RESİMLER</a></li>
		</ul>
	</div>
	<div id="tabs-2">
		<ul class="headerTabConnect autoSize overflowHid">
			<li class="gundem"><a href="#tabs-12"><span class="ss-icon">picture</span>RESİMLER</a></li>
			<li><a href="#tabs-11"><span class="ss-icon">mic</span>MÜZİKLERİM</a></li>
			<li><a href="#tabs-10"><span class="ss-icon">coffe</span>PROJELER<span>+198</span></a></li>
			<li class="forum"><a href="#tabs-9"><span class="ss-icon">list</span>MENÜ</a></li>
		</ul>
	</div>
	<div id="tabs-3">
		<ul class="headerTabConnect autoSize overflowHid">
			<li class="forum"><a href="#tabs-9"><span class="ss-icon">list</span>MENÜ</a></li>
			<li><a href="#tabs-10"><span class="ss-icon">coffee</span>PROJELER<span>+198</span></a></li>
			<li><a href="#tabs-11"><span class="ss-icon">mic</span>MÜZİKLERİM</a></li>
			<li class="gundem"><a href="#tabs-12"><span class="ss-icon">picture</span>RESİMLER</a></li>
		</ul>
	</div>
	<div id="tabs-4">
		<ul class="headerTabConnect autoSize overflowHid">
			<li class="gundem"><a href="#tabs-12"><span class="ss-icon">picture</span>RESİMLER</a></li>
			<li><a href="#tabs-11"><span class="ss-icon">mic</span>MÜZİKLERİM</a></li>
			<li><a href="#tabs-10"><span class="ss-icon">coffe</span>PROJELER<span>+198</span></a></li>
			<li class="forum"><a href="#tabs-9"><span class="ss-icon">list</span>MENÜ</a></li>
		</ul>
	</div>
</div>

Kurulum ve kullanım bu şekilde.Ayrı bir şekilde indirme ve demo linklerini paylaşacağım.Umarım işinize yarar ve kullandıkca anarsınız beni. 😀
Son olarak da bir konuyu açıklamak isterim.Eski konularımdan bazılarının yazılımını bitirmedim yada başlamadım.Onlarıda en yakın zamanda bitirim hemen anlatımı ile birlikte blogumda paylaşacağım.Miskinden selamlar. 🙂

Github : İndirme linki

Demo : Demo linki

Yayınlayan

Bulut Üzer

Web ortamında gelişmesine yardımcı olan Yusuf Doru sayesinde şuan web developer olarak ilerlemekte.Web ve mobil ortamlarda uygulama geliştirmeye çalışmak da.Ayrı yeten de kişisel blogunda web ve php ile ilgili çalışmalarını ve deneyimlerini paylaşmayı hedeflemekte.

“Jquery Ui İle Tab Menü” üzerine bir yorum

Bir Cevap Yazın

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