Jquery Mobil Ders-12 Tabs

Anasayfa

Jquery mobil serimize devam ediyoruz.Bu derste tabs sistemini işleyeceğiz.Tabs sistemi basılan butona ait içeriği gösteren bir sistem.Jquery mobilde bunu bize kolaylıkla yapma imkanı vermişler.Şimdi nasıl yapacağımıza bakalım.

İndir : http://ustaderslik.com/dosya/Jquery%20Mobil%20Ders-12%20Tabs.zip

Bir div oluşturup dive data-role="tabs" verelim.Bu şekilde bu divin tabs olacağını belirttik.Taps 2 kısımdan oluşur.Biri butonlar diğeri içerik.Butonları eklemek için geçen ders gösterdiğim navbarı kullanacağız.Buton sayısı kadar navbarın altına div koyup id atayacağız.Bu idleri navbardaki butonların hreflerine atayacağız.Bu şekilde artık tabs sistemimiz hazır.

Genek örnek :

<!DOCTYPE HTML>

<html lang="en-US">

<head>

	<meta charset="UTF-8">

	<title>UstaDerslik</title>

	<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />

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

	<script type="text/javascript" src="js/jquery.mobile-1.4.2.min.js"></script>

	<style type="text/css">

		.ana{width:960px;margin:auto;}

		.tab{background:#fff;border:1px solid #ddd;}

	</style>

</head>

<body>



<div class="ana">



<div data-role="tabs">

  <div data-role="navbar"  data-iconpos="left" class="ui-nodisc-icon ui-alt-icon" >

    <ul>

      <li><a href="#tab1" data-icon="gear" class="ui-btn-active" data-ajax="false">Buton-1</a></li>

      <li><a href="#tab2" data-icon="bars" data-ajax="false">Buton-2</a></li>

      <li><a href="#tab3" data-icon="mail" data-ajax="false">Buton-3</a></li>

      <li><a href="#tab4" data-icon="info" data-ajax="false">Buton-4</a></li>

      <li><a href="#tab5" data-icon="location" data-ajax="false">Buton-5</a></li>

    </ul>

  </div>

  

  <div class="tab">

	<div id="tab1" class="ui-content">	<h1>1- tab.</h1></div>

	<div id="tab2" class="ui-content">	<h1>2- tab.</h1></div>

	<div id="tab3" class="ui-content">	<h1>3- tab.</h1></div>

	<div id="tab4" class="ui-content">	<h1>4- tab.</h1></div>

	<div id="tab5" class="ui-content">	<h1>5- tab.</h1></div>

  </div>

  

</div>



</div>



</body>

</html>

Görüntüsü :

http://ustaderslik.com/resim/ders/sahgfhymjkj.png

Gördüğünüz gibi basılan butona ait içerik gözüküyor.İçeriklere istediğiniz şeyi koyabiliriz.

Jquery Mobil Ders-12 Tabs

Tüm Hakları Saklıdır. ©Arleone 2013-UstaDerslik