Gelişen mobil teknolojiler, internet kullanımını üst seviyede tutarak sabit internet kullanımının neredeyse %50 sini ele geçirdi, mobil cihazlar gerek ekran gerek donanımsal sebeplerden dolayı web tabanlı uygulamaları bilgisayarlarda kullandığımız performansla kullanmamızı maalesef sağlayamıyor.

Günümüzde popüler web sitelerinin bir de mobile versiyonu bulunmaktadır, bunlara en güzel örnek http://m.facebook.com/ dur. JQuery Mobile kütüphanesi web sayfalarını mobile elementlerle tasarlamamıza yardımcı oluyor. Bu yazımda Jquery Mobile sayfa yapısını anlatacağım. Öncelikle buradaki linkten js ve css dosyasını buradaki linkten de jquery kütüphanesini indirelim ve sayfa yapısını inceleyelim. Yapacağımız çalışmayı test edebilmek için Opera Mobile Emulator ü tavsiye ediyorum.

Not: Jquery Mobile xHTML veya HTML5 ile kullanılabilir.

data-role

data-role="page" sayfamızı tanımlamamızı sağlar.

data-role="header" sayfamızın header ını oluşturmamızı sağlar.

data-role="content" sayfamızın gövdesini tanımlamamızı sağlar.

data-role="footer" sayfamızın footer ını oluşturmamızı sağlar.

Xhtml ile ilk sayfamızı oluşturalım;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery Mobile Sayfa Yapısı xHTML</title>
		<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
		<script src="jquery-1.8.2.min.js"></script>
		<script src="jquery.mobile-1.2.0.min.js"></script>
	</head>
	<body>
		<div data-role="page">
		
			<div data-role="header">
				<h1>Sayfa Başlığı (Header)</h1>
			</div>
			
			<div data-role="content">
					<p>Content</p>
					<p>burası içerik</p>
					<a href="http://www.yunusbassahan.com/" target="_blank">www.yunusbassahan.com</a>
			</div>
			
			<div data-role="footer">
				<h1>Sayfa Altı (Footer)</h1>
			</div>
		
		</div>
	</body>
</html>

Örneği incelemek için tıklayın

Şimdi de aynı sayfayı HTML5 ile oluşturalım.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery Mobile Sayfa Yapısı HTML5</title>
		<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
		<script src="jquery-1.8.2.min.js"></script>
		<script src="jquery.mobile-1.2.0.min.js"></script>
	</head>
	<body>
		<section data-role="page">
		
			<header data-role="header">
				<h1>Sayfa Başlığı (Header)</h1>
			</header>
			
			<div data-role="content">
					<p>Content</p>
					<p>burası içerik</p>
					<a href="http://www.yunusbassahan.com/" target="_blank">www.yunusbassahan.com</a>
			</div>
			
			<footer data-role="footer">
				<h1>Sayfa Altı (Footer)</h1>
			</footer>
		
		</section>
	</body>
</html>

Örneği incelemek için tıklayın

Bir de ekran görüntüsü ekleyelim;

Bir sonraki JQuery Mobile yazısında sayfalar arası geçiş ve tema konularını ele alacağız.

NOT: Yazıdaki örnek uygulamaları buradan indirebilirsiniz.