Jquery mobil derslerimize devam ediyoruz.Bu derste sayfa yönlendirme işlemini anlatacağım.Jquery mobilde sayfa yönlendirme işlemleri ajaxla yapılır.Yani o sayfaya gitmez o sayfayı çeker.
İndir : http://ustaderslik.com/dosya/Jquery%20Mobil%20Ders-17%20Sayfa%20Yönlendirme.zip
Ajaxla çekilen sayfaları animasyonlu şekilde açtırabiliyoruz.Bunun için a tagımıza
data-transition="animasyon_ismi" vererek yapabiliyoruz.Animasyonlarımız ise şunlar :
fade,pop,flip,turn,flow,slidefade,slide,slideup,slidedown
<a href="deneme.html" data-transition="turn">Link</a>
En temel yapısı bu şekilde.
Eğer ajaxla değilde normal şekilde gitmesini istiyorsak linke
data-ajax="false" verirsek ajaxı kapatıp normal gitmesini sağlarız.
Ajaxlı işlemlerde geri dön yapabiliyoruz.Bunun için bir buton oluşturup
data-rel="back" verdiğimizde önceki sayfaya geri gönderebiliyoruz.
Not : Ajaxla çektiğimiz sayfalarda jquery ve mobil dosyalarını eklemek zorunda değiliz.Ajaxla çektiğimiz için o sayfalar normal gözükecektir.Ama o sayfaya direk geçiş yapılırsa bozuk gözükür.
Genel örnek :
İndex.html
<!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>
</head>
<body>
<div data-role="page">
<div role="main" class="ui-content">
<a href="deneme.html" data-role="button" data-inline="true" data-icon="carat-r" data-iconpos="right" data-transition="turn">Deneme sayfasına git ajax</a>
<a href="deneme.html" data-role="button" data-inline="true" data-icon="carat-r" data-iconpos="right" data-ajax="false">Deneme sayfasına git normal</a>
</div>
</div>
</body>
</html>
deneme.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Deneme Sayfası</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>
</head>
<body>
<div data-role="page" data-theme="b">
<div role="main" class="ui-content">
Deneme sayfasıdır... <br />
<a href="deneme.html" data-role="button" data-inline="true" data-icon="back" data-theme="a" data-rel="back" >Geri gön</a>
</div>
</div>
</body>
</html>
Görüntüsü :
UstaDerslik
