İÇİNDEKİLER IX İÇİNDEKİLER 1 JQUERY MOBILE 1 Mobil Hayat 1 Mobil Cihazlar 2 Mobil telefonlar 2 Düşük Teknoloji Ürünü Mobil Cihazlar 2 Orta ve Üst Seviye Mobil Cihazlar 3 Akıllı telefonlar 3 Tabletler 4 jquery Mobile ı Tanıyalım 4 jquery Mobile Ne Değildir 6 jquery Mobile in Temel Özellikleri 7 Basitlik 7 Gelişmiş HTML ve CSS Desteği 7 Erişilebilirlik 8 Platform Desteği 8 Browser Desteği 10 A Sınıfı Mobil Tarayıcılar 11 B Sınıfı Mobil Tarayıcılar 11 C Sınıfı Mobil tarayıcılar 11 D Sınıfı Mobil tarayıcılar 12 F Sınıfı Mobil Tarayıcılar 12 Küçük Boyut 12 Tutarlılık 12 Tema Desteği 13 jquery Mobile ı Yükleme 13 2 JQM SAYFA YAPISI 15 Sayfayı Tam Oturtma 15 Ekran Çözünürlüğüne Göre Tasarım Değişimi 18 JQUERY_MOBILE_ICINDEKILER.indd IX 02.05.2012 18:54
X JQUERY MOBILE Aygıt Pozisyonuna Göre Tasarım Değişimi 21 Tarayıcıya Göre Sayfa Yönlendirmesi 23 Sayfalar 23 Internal Sayfalar 27 External Sayfalar 29 Sayfa Başlıkları 30 Ajax ile Sayfa ve Linklerde Çalışma 31 Ajax Kullanarak Link Verme 32 Ajax Kullanmadan Link Verme 33 Tek Sayfada Birçok Yere Link Verme 34 Back Buton Linkleri 34 Sayfa Geçişleri (Page Transitions) 35 Mesaj Kutuları (Dialogs) 37 Temalar (Themes) 38 3 SAYFA ELEMENTLERİ 41 Düğmeler (Buttons) 41 Link Butonları 41 Form Butonları 43 Image Butonları 43 Butonları Gruplama 44 Buton Simgeleri (Button Icons) 46 Özel Icon lar Hazırlama 48 Buton Temaları 49 Dinamik Butonlar 49 Buton Özellikleri 52 Buton Metotları 53 Buton Olayları 53 Araç Çubukları (Toolbars) 53 Header Bar 53 Back Buton 55 JQUERY_MOBILE_ICINDEKILER.indd X 02.05.2012 18:54
İÇİNDEKİLER XI Footer Bar 56 Navigation Bar 57 Çubukları Konumlandırma (Bar Positioning) 60 Listeler (Listviews) 63 Basit Listeler 63 Inset Listeler 64 Liste Bölmeleri (Listview Divider) 65 Bağlantılı Listeler 67 İç İçe Listeler 68 Numaralı Listeler 69 Bölünmüş Listeler (Split Button Lists) 70 Listelerde Resim 71 Listelerde Sayı Gösterimi 73 Liste İçeriğini Biçimleme 74 Listede Arama Yapma 75 Dinamik Listeler 77 Dinamik Liste Özellikleri 79 Dinamik Liste Metotları 80 Dinamik Liste Olayları 80 Form Elementleri 81 Text Inputs 81 Dinamik Text Inputs 83 Text Input Özellikleri 85 Text Input Metotları 85 Text Input Olayları 85 Flip Toogle Switches 85 Dinamik Switch Control 86 Radio Buttons 87 Checkboxes 89 Dinamik Radio Buttons ve Checkboxes 90 JQUERY_MOBILE_ICINDEKILER.indd XI 02.05.2012 18:54
XII JQUERY MOBILE Radio Butons ve Checkboxların Özellikleri 90 Radio Butons ve Checkbox Metotları 90 Radio Butons ve Checkboxların Olayları 90 Select Menus 91 Dinamik Select Menus 93 Select Menu Özellikleri 94 Select Menu Metotları 95 Select Menu Olayları 96 Sliders 96 Slider Özellikleri 97 Slider Metotları 98 Slider Olayları 98 MobiScroll Plugin 98 Form Bilgilerini Gönderme 100 Ajax Kullanarak Bilgi Gönderme 100 Ajax Kullanmadan Bilgi Gönderme 102 4 SAYFA İÇERİĞİ DÜZENİ 103 Izgaralar (Grids) 103 Katlanır İçerikler (Collapsible) 108 CSS Gradients 112 5 JQUERY MOBILE KÜTÜPHANESİNİ KONFİGÜRE ETME 117 Yapılandırma Ayarları 117 Özellikler 119 $.mobile.ns 119 $.mobile.autoinitializepage 120 $.mobile.subpageurlkey 120 $.mobile.activepageclass 120 $.mobile.activebtnclass 120 $.mobile.ajaxenabled 120 JQUERY_MOBILE_ICINDEKILER.indd XII 02.05.2012 18:54
İÇİNDEKİLER XIII $.mobile.ajaxformsenabled 120 $.mobile.ajaxlinksenabled 121 $.mobile.linkbindingenabled 121 $.mobile.hashlisteningenabled 121 $.mobile.defaultpagetransition 121 $.mobile.defaultdialogtransition 121 $.mobile.touchoverflowenabled 121 $.mobile.minscrollback 121 $.mobile.loadingmessage 121 $.mobile.loadingmessagetextvisible 122 $.mobile.loadingmessagetheme 122 $.mobile.pageloaderrormessage 122 $.mobile.pageloaderrormessagetheme 122 $.mobile.gradea 122 $.mobile.metaviewportcontent 123 $.mobile.nonhistoryselectors 123 $.mobile. xx.prototype.options.yy 124 Events 124 Touch events 124 tap 125 taphold 127 swipe 127 swipeleft 127 swiperight 127 Virtual Mouse Events 128 vclick 128 vmouseover 129 vmousemove 129 vmouseup 129 vmousedown 129 JQUERY_MOBILE_ICINDEKILER.indd XIII 02.05.2012 18:54
XIV JQUERY MOBILE vmousecancel 129 Orıentation Events 130 orientationchange 130 Scroll Events 134 Page Change Events 135 Page Load Events 138 pagebeforeload 138 pageload 140 pageloadfailed 141 Page Initialization Events 141 pagebeforecreate 142 pagecreate 142 pageinit 143 Page Transition Events 144 pagebeforeshow 145 pageshow 145 pagebeforehide 145 pagehide 145 Metotlar 147 $.mobile.loadpage( ) 148 $.mobile.changepage( ) 151 $.jqmdata( ) 153 $.jqmhasdata( ) 154 $.jqmremovedata( ) 154 $.mobile.showpageloadingmsg( ) 154 $.mobile.hidepageloadingmsg( ) 156 $.mobile.fixedtoolbars.show() 158 $.mobile.fixedtoolbars.hide( ) 158 $.mobile.path.parseurl() 159 $.mobile.path.makepathabsolute( ) 161 $.mobile.path.makeurlabsolute() 161 JQUERY_MOBILE_ICINDEKILER.indd XIV 02.05.2012 18:54
İÇİNDEKİLER XV $.mobile.path.issamedomaion() 162 $.mobile.path.isrelativeurl( ) 162 $.mobile.path.isabsoluteurl() 163 $.mobile.silentscroll( ) 164 $.mobile.activepage 167 $.mobile.firstpage 167 $.mobile.pagecontainer 167 6 TEMA OLUŞTURMA 169 Temaları Uygulama 169 Varsayılan Temalar 170 Temaların Öncelik Sırası 176 Özel Tema Oluşturma 176 ThemeRoller 179 Tema Örnekleri ve Global Ayarlar 180 Önizleme Penceresi ve Hızlı Renk Seçimi 181 Adobe Kuler ile Entegrasyon 182 Tema Import 182 Tema Download 183 7 ADOBE DREAMWEAVER İLE JQUERY MOBILE KÜTÜPHANESİ 185 Kütüphanenin Dahil Edilmesi 186 Katmanlarla Çalışma 187 Aygıtlara Göre Tasarım Değişimi 189 jquery Mobile Sayfa Elementleri 191 Sayfa ve Link İşlemleri 192 Page 194 ListView 195 Layout Grid 196 Collapsible Block 196 Text Input 197 JQUERY_MOBILE_ICINDEKILER.indd XV 02.05.2012 18:54
XVI JQUERY MOBILE Password Input 197 Text Area 198 Select Menu 198 Checkbox 199 Radio Button 199 Button 200 Slider 200 Flip Toogle Switch 201 Tasarımı Mobil Cihazlarda Çalıştırma (Emulating) 201 8 CD MARKET UYGULAMASI 207 CD Market Uygulaması 207 Açılış Ekranı 208 Albüm Detayı 212 Sepet Yapımı 215 Dinamik Sepet 219 EK1: ÖZ NİTELİKLER LİSTESİ 223 EK2: EMÜLATÖRLER & SİMÜLATÖRLER 229 EK3: UYUMLULUKLAR VE DESTEKLENEN FORMATLAR 233 CSS Uyumluluk 233 JavaScript Uyumluluk 234 Icons 234 Images 235 Doküman İndirme Uyumluluğu 235 EK4: PROTOTYPE ÖZELLİK TABLOSU 237 JQUERY_MOBILE_ICINDEKILER.indd XVI 02.05.2012 18:54