Jquery Mobile ile Mobile Site Oluşturma
Tanımlama
Hazırlayacağımız site/web app dizin yapısı aşağıdaki gibi olmasını istiyorum.|- index.html|- js|- css
|- images
Kurulum için önce Jquery sitesinden JQuery sürümlerinden JQuery mobile ile uyumlu olanı indiriyoruz. İndirilen jquery dosyasını js klasörüne kopyalıyoruz. Bu örnekte 1.11.0 kullanıldı.
Ayrıca JQuery Mobile sitesinden download ettiğimiz jquery mobile dosyaları dizine eklenmelidir. Ben custom download seçtim. Gelen sıkıştırılmış dosyayı css ler css klasörüne ve js ler js klasörüne olacak şekilde ayırıyoruz. Bu zip içinde images çıkmayacaktır. Aynı download sayfasından images zip dosyasını indirip css içine açıyoruz.
Ayrıca jquery mobile kodu çalıştığında hata almaması için mobileinit eventını tanımlıyoruz.
Sayfamızda Jquery UI için gerekli style ve kodları eklemek için <head> tag içine aşağıdaki kod eklenmelidir.
<title> Web Site Başlık</title>
<link href="css/jquery.mobile.custom.structure.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.mobile.custom.theme.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(document).bind('mobileinit',function(){
$.mobile.changePage.defaults.changeHash = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
</script>
<script src="js/jquery.mobile.custom.js" type="text/javascript"></script>
İlk Sayfamızı Ekleyelim
JQuery mobile içinde bir html içine bir çok sayfa ekleyebiliyoruz. data-role attribute page değerini alması div elementinin sayfa olarak kullanılacağını gösteriyor. İkinci satırdaki div elementinin data-role değeri header. Bu div içindekilerinin sayfanın başındaki header bölümüne yerleştirileceği anlamını taşıyor. Örnekte için h1 elementi ve içinde Başlık Metni metni var.
Altıncı satırdaki div elementi data-role
<div data-role="page" id="one">
<div data-role="header">
<h1>Başlık Metni</h1>
</div><!-- /header -->
<div data-role="content">
İçerik
</div>
<!-- /content -->
<div data-role="footer">
<h4>Alt Metin</h4>
</div>
<!-- /footer -->
</div>
<!-- /page -->
<a href="#" data-role="button" data-icon="star" data-theme="b">btncaption</a>
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
<label for="slider-0">Input slider:</label>
<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />
<a href="#link" data-role="button" data-icon="star" data-theme="b">ButtonCaption</a>
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="" />
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" />
</div>
<div data-role="fieldcontain">
<label for="number">Number:</label>
<input type="number" name="number" id="number" value="" />
</div>
<div data-role="fieldcontain">
<label for="number-pattern">Number + pattern:</label>
<input type="number" name="number" pattern="[0-9]*" id="number-pattern" value="" placeholder="Pattern attribute [0-9]* for a numeric keypad" />
</div>
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="email" name="email" id="email" value="" />
</div>
<div data-role="fieldcontain">
<label for="url">Url:</label>
<input type="url" name="url" id="url" value="" />
</div>
<div data-role="fieldcontain">
<label for="tel">Tel:</label>
<input type="tel" name="tel" id="tel" value="" />
</div>
<div data-role="fieldcontain">
<label for="time">Time:</label>
<input type="time" name="time" id="time" value="" />
</div>
<div data-role="fieldcontain">
<label for="date">Date:</label>
<input type="date" name="date" id="date" value="" />
</div>
<div data-role="fieldcontain">
<label for="month">Month:</label>
<input type="month" name="month" id="month" value="" />
</div>
<div data-role="fieldcontain">
<label for="week">Week:</label>
<input type="week" name="week" id="week" value="" />
</div>
<div data-role="fieldcontain">
<label for="datetime">Datetime:</label>
<input type="datetime" name="datetime" id="datetime" value="" />
</div>
<div data-role="fieldcontain">
<label for="datetime-l">Datetime local:</label>
<input type="datetime-local" name="datetime-l" id="datetime-l" value="" />
</div>
<div data-role="fieldcontain">
<label for="color">Color:</label>
<input type="color" name="color" id="color" value="" />
</div>
<label for="textarea-a">Textarea:</label>
<textarea name="textarea" id="textarea-a">
I'm a basic textarea. If this is pre-populated with content, the height will be automatically adjusted to fit without needing to scroll. That is a pretty handy usability feature.
</textarea>
<label for="search-basic">Search Input:</label>
<input type="search" name="search" id="search-basic" value="" />
- search input field containers
<div data-role="fieldcontain">
<label for="search-2">Search Input:</label>
<input type="search" name="search-2" id="search-2" value="" />
</div>
<label for="slider-fill">Input slider:</label>
<input type="range" name="slider-fill" id="slider-fill" value="60" min="0" max="100" data-highlight="true" />
<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider">
<option value="off">Hayır</option>
<option value="on">Evet</option>
</select>
- dikey radyo düğmeleri (radio buttons)
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal" >
<label><input type="checkbox" name="checkbox-0" /> I agree </label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
<fieldset data-role="controlgroup" data-type="horizontal">
<label for="select-choice-0" class="select">Shipping method:</label>
<select name="select-choice-0" id="select-choice-0">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
<div class="ui-body ui-body-b">
<form action="forms-sample-response.php" method="get" class="ui-body ui-body-a ui-corner-all">
<fieldset>
<div data-role="fieldcontain">
<label for="shipping" class="select">Shipping method:</label>
<select name="shipping" id="shipping">
<option value="Standard shipping">Standard: 7 day</option>
<option value="Rush shipping">Rush: 3 days</option>
<option value="Express shipping">Express: next day</option>
<option value="Overnight shipping">Overnight</option>
</select>
</div>
<button type="submit" data-theme="b" name="submit" value="submit-value">Submit</button>
</fieldset>
</form>
<div data-role="footer" class="ui-footer ui-bar-a" role="contentinfo">
<div data-role="navbar" class="ui-navbar ui-mini" role="navigation">
<ul class="ui-grid-b">
<li class="ui-block-a"><a href="#" data-icon="grid" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-theme="a" data-inline="true" class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-up-a"><span class="ui-btn-inner"><span class="ui-btn-text">Summary</span><span class="ui-icon ui-icon-grid ui-icon-shadow"> </span></span></a></li>
<li class="ui-block-b"><a href="#" data-icon="star" class="ui-btn-active ui-btn ui-btn-inline ui-btn-icon-top ui-btn-up-a" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-theme="a" data-inline="true"><span class="ui-btn-inner"><span class="ui-btn-text">Favs</span><span class="ui-icon ui-icon-star ui-icon-shadow"> </span></span></a></li>
<li class="ui-block-c"><a href="#" data-icon="gear" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-theme="a" data-inline="true" class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-up-a"><span class="ui-btn-inner"><span class="ui-btn-text">Setup</span><span class="ui-icon ui-icon-gear ui-icon-shadow"> </span></span></a></li>
</ul>
</div><!-- /navbar -->
</div>
