Rakkoc.Com Recep Akkoç / Rakkocun Yazıtları

21Şub/120

Mobile JQuery’e giris

Merhaba arkadaslar Mobile JQuery hakkında kendi calismalarimla baslayarak sizinle bildiklerimi ve ogrendiklerimi paylasmak istedim.

MobileJQuery Nedir

Mobile JQuery; JQuery Javascript framework'unun mobil cihazlara entegre edilmis halidir. Sadece javascript kodlari acisindan degil; ona gore duzenlenmis css ler butonlar ve imagelarida icerisinde barindirir.

Kendim ilk testlerimi yapmak icin http://restorant.rakkoc.com adresini kullaniyordum. kendi projem olan restorant uygulamasini bu framework uzerinde gelistiriyorum.

Nasil Kullanilir

Ben bu yazimi yazarken aktif olan 1.0.1 versionunu kendi siteme upload ettim ve burdan indire bilirsiniz.

illa bu dosyaya ihtiyaciniz yok; Jquery'nin kendi serverlarindan da bu islemleri gerceklestirme yoluna gide bilirsiniz bunun icin asagidaki kodu head taginizin arasina ekleyiniz.

Copy-and-Paste Snippet for CDN-hosted files (recommended):

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

Bu kodlari ekledikten sonra mobile jquery'nin baslangicini yapiyor oluyoruz.

Örnek sayfa yaratma

örnek olarak bir sayfa yaratacak olursak; İstediginiz bir metin editorune asagidaki ornek sayfa kodunu yapistirip kaydedin. Tarayiciniz ile acin ve artik sizde bir mobil web sayfasi gelistiricisiniz 🙂

<!DOCTYPE html>
<html>
	<head>
	<title>My Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>My Title</h1>
	</div><!-- /header -->

	<div data-role="content">
		<p>Hello world</p>
	</div><!-- /content -->

</div><!-- /page -->

</body>
</html>

suan mobil jqueryli ilk sayfamizi yapmis bulunmaktayiz 🙂

Bu yazıyı beğendiniz mi?

RSS Kaynağımıza abone olun!

Yorumlar (0) Geri izlemeler (1)

Leave a comment