Jquery Mobil Ders-17 Sayfa Yönlendirme
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Mobil Ders-17 Sayfa Yönlendirme

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3289)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/sf4r4a54d.png



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol