Jquery Mobil Ders-7 Page - Header - Main - Footer
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-7 Page - Header - Main - Footer

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(1871)
RAPOR ET
Jquery mobil derslerimize devam ediyoruz.Bu derste page,header,main ve footerı işleyeceğiz.Bunlar sitemizin temel iskeletini oluşturan öğeler.

İndir : http://ustaderslik.com/dosya/page-main-header-footer.zip

1-Page


Page tüm sitemizi kapsar.Dive data-role="page" vermemiz yeterlidir.Şimdilik pek işe yaramıyor ama ajaxlı sayfa geçişleri veya dialog pencerelerinde işe yarayacak.
<div data-role="page"></div>


2-Header


Header sayfanın başlığını temsil eder.Dive data-role="header" vermemiz yeterlidir.Div içine başlığı h tagları içinde yazarsanız kendi otomatik ortalanır.Headerın sürekli yukarda sabit kalmasını isterseniz.Headera data-position="fixed" vermezi yeterlidir.
<div data-role="header" data-position="fixed">
<h1>Başlık<h1>
</div>


3-Main


Main kısmı sitemizin tüm içeriğini barındıran kısım.Dive role="main" vermemiz yeterlidir.Pek bir işlevi yoktur.
<div role="main" class="ui-content"></div>

Verdiğimiz class daha düzgün bir görünüm kazanmasını sağlıyor.

4-Footer


Footer sitemizin en alt kısmını temsil eder.Dive data-role="footer" vermemiz yeterlidir.Başlıktaki gibi yazının tam ortalanmasını istiyorsak h tagları içinde yazmamız gerek.Sürekli alta sabit kalmasını istiyorsanız footera data-position="fixed" vermemiz gerek.
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>


Genel ö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>
</head>
<body>

<div data-role="page">

<div data-role="header" data-position="fixed">
<button data-inline="true" data-icon="back">Geri Dön</button>
<h1>Burası başlık</h1>
</div>

<div role="main" class="ui-content">
Burası İçerik...
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>

<div data-role="footer" data-theme="b" data-position="fixed">
<h1>Burası footer...</h1>
</div>

</div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/8h74se84d1.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