{"id":79,"date":"2012-08-30T21:46:32","date_gmt":"2012-08-30T18:46:32","guid":{"rendered":"http:\/\/phpax.wordpress.com\/?p=79"},"modified":"2020-05-12T23:08:24","modified_gmt":"2020-05-12T20:08:24","slug":"jquery-mobile-hizli-baslangic","status":"publish","type":"post","link":"https:\/\/guvensahin.com\/tr\/jquery-mobile-hizli-baslangic\/","title":{"rendered":"Jquery Mobile H\u0131zl\u0131 Ba\u015flang\u0131\u00e7"},"content":{"rendered":"

Bu yaz\u0131da Jquery Mobile<\/a> kullanarak, mobil uygulama geli\u015ftirmeye h\u0131zl\u0131ca ba\u015flang\u0131\u00e7 yapaca\u011f\u0131z. \u0130lk olarak Jquery Mobile’dan bahsetmemiz gerek. K\u0131saca tan\u0131mlamam\u0131z gerekirse kendisi Jquery<\/a> ve Jquery UI<\/a> \u00fczerine in\u015fa edilmi\u015f bir mobil web framework’t\u00fcr. Temelinde, ak\u0131ll\u0131 telefonlar ve tabletlerin taray\u0131c\u0131lar\u0131nda \u00e7al\u0131\u015fmas\u0131 i\u00e7in tasarlanan, HTML5<\/a>‘den sonuna kadar yararlanan, mobil cihazlar i\u00e7in dizayn edilmi\u015f bir javascript(web) framework’t\u00fcr.<\/p>\n

Jquery Mobile bir framework olarak olduk\u00e7a hafiftir ve kullan\u0131m\u0131 \u00e7ok kolayd\u0131r. Kullan\u0131ma ba\u015flamak i\u00e7in \u00e7ok temel d\u00fczeyde web bilginiz olmas\u0131 yeterlidir (HTML, CSS, Javascript) .<\/p>\n

<\/p>\n

Jquery Mobile’\u0131n resmi d\u00f6k\u00fcmantasyonuna buradan<\/a>, \u00f6zelliklerine \u015furadan<\/a>, destekledi\u011fi platformlara da buradan<\/a> bakabilirsiniz.<\/p>\n

Ba\u015fl\u0131yoruz<\/h2>\n

Bu yaz\u0131da temel i\u015fleyi\u015fi g\u00f6rebilmeniz i\u00e7in sizlerle \u00e7ok basit bir uygulama geli\u015ftirece\u011fiz. Hemen i\u015fe koyulal\u0131m. \u0130lk olarak bilgisayar\u0131m\u0131zda herhangi bir text edit\u00f6r\u00fc a\u00e7al\u0131m ve i\u00e7erisine a\u015fa\u011f\u0131daki kodlar\u0131 yap\u0131\u015ft\u0131ral\u0131m.<\/p>\n

\r\n \r\n \r\n    \r\n\r\n    PHPAX Jquery Mobile Demo<\/title>\r\n\r\n    <!-- META --> \r\n    <meta charset=\"utf-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> \r\n\r\n    <!-- CSS -->\r\n    <link rel=\"stylesheet\" href=\"http:\/\/code.jquery.com\/mobile\/1.1.1\/jquery.mobile-1.1.1.min.css\" \/>\r\n\r\n    <!-- JAVASCRIPT -->\r\n    <script src=\"http:\/\/code.jquery.com\/jquery-1.7.1.min.js\"><\/script>\r\n    <script src=\"http:\/\/code.jquery.com\/mobile\/1.1.1\/jquery.mobile-1.1.1.min.js\"><\/script>\r\n<\/head> \r\n<body> \r\n\r\n<div data-role=\"page\">\r\n\r\n    <div data-role=\"header\">\r\n        <h1>Ba\u015fl\u0131k<\/h1>\r\n    <\/div><!-- \/header -->\r\n\r\n    <div data-role=\"content\">    \r\n        <p>Merhaba D\u00fcnya !<\/p>        \r\n    <\/div><!-- \/content -->\r\n\r\n<\/div><!-- \/page -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<p>Bu kodlar\u0131 html uzant\u0131s\u0131yla kaydetti\u011finizde a\u015fa\u011f\u0131daki gibi bir ekran g\u00f6r\u00fcnt\u00fcs\u00fcyle kar\u015f\u0131la\u015facaks\u0131n\u0131z. Yada <a href=\"https:\/\/guvensahin.com\/tr\/wp-content\/uploads\/2015\/03\/jm_ornek.html\" target=\"_blank\" rel=\"noopener noreferrer\">buradan<\/a> \u00f6rnek sayfaya bakabilirsiniz.<\/p>\n<p><a href=\"https:\/\/guvensahin.com\/tr\/wp-content\/uploads\/2012\/08\/adsc4b1z3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-91\" title=\"Ads\u0131z\" src=\"https:\/\/guvensahin.com\/tr\/wp-content\/uploads\/2012\/08\/adsc4b1z3.png\" alt=\"\" width=\"374\" height=\"566\" srcset=\"https:\/\/guvensahin.com\/tr\/wp-content\/uploads\/2012\/08\/adsc4b1z3.png 374w, https:\/\/guvensahin.com\/tr\/wp-content\/uploads\/2012\/08\/adsc4b1z3-198x300.png 198w\" sizes=\"auto, (max-width: 374px) 100vw, 374px\" \/><\/a><\/p>\n<p>Resimde g\u00f6rm\u00fc\u015f oldu\u011funuz \u00fczere ben testlerimi kendi taray\u0131c\u0131m\u0131n ekran boyutu k\u00fc\u00e7\u00fclterek yap\u0131yorum. Test etmek i\u00e7in HTML5 ve Javascript destekleyen herhangi bir taray\u0131c\u0131 yeterlidir.<\/p>\n<p>Ama daha sa\u011fl\u0131kl\u0131 testler i\u00e7in <a href=\"http:\/\/www.opera.com\/developer\/tools\/mobile\/\">Opera Mobile Emulator<\/a>‘u bilgisayar\u0131n\u0131zda bulundurman\u0131z\u0131 tavsiye ederim. Program\u0131 \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda sizden i\u00e7erisindeki belirli telefon ve tablet modelleri aras\u0131ndan se\u00e7im yapman\u0131z\u0131 isteyecektir. Ard\u0131ndan se\u00e7ti\u011finiz cihaz\u0131n ebatlar\u0131nda ve ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fcnde \u00e7al\u0131\u015fan bir <a href=\"http:\/\/www.opera.com\/mobile\/\" target=\"_blank\" rel=\"noopener noreferrer\">opera mini<\/a> a\u00e7\u0131lacakt\u0131r. Opera mini’nin adres sat\u0131r\u0131na dosyan\u0131z\u0131n bulundu\u011fu yeri yap\u0131\u015ft\u0131rman\u0131z ve ilgili adrese gitmeniz yeterli.<\/p>\n<h2>Kodlar\u0131m\u0131z\u0131 inceleyelim<\/h2>\n<p>Kodlar\u0131m\u0131za d\u00f6necek olursak yukar\u0131da da g\u00f6rm\u00fc\u015f oldu\u011funuz gibi sayfan\u0131n tipi(Doctype) HTML5’dir. Jquery Mobile kullan\u0131rken sayfalar\u0131m\u0131z HTML5’in s\u00f6z dizimine g\u00f6re yaz\u0131lacakt\u0131r.<\/p>\n<p>Sayfaya farkedece\u011finiz \u00fczere 3 dosya import ettik. Bunlar Jquery’nin <strong>js<\/strong> dosyas\u0131 ile Jquery Mobile’a ait <strong>js<\/strong> ve <strong>css<\/strong> dosyalar\u0131.<\/p>\n<p>Sayfalar standart olarak \u00fc\u00e7e ayr\u0131l\u0131yor. Bunlar tahmin edebilece\u011finiz gibi header, content ve footer.<\/p>\n<p>Jquery Mobile da geli\u015ftirme yaparken ekledi\u011finiz her elementin bir <strong>data-role<\/strong> \u00f6zelli\u011fi bulunuyor. Bu ifade bize elementin “ne oldu\u011funu\/ne yapt\u0131\u011f\u0131n\u0131” belirtiyor. \u00d6rne\u011fin a\u015fa\u011f\u0131daki kodu sayfam\u0131z\u0131n content b\u00f6l\u00fcm\u00fcne yazd\u0131\u011f\u0131m\u0131zda sayfaya bir buton ekler.<\/p>\n<pre lang=\"html\"><a href=\"#\" data-role=\"button\">Button<\/a><\/pre>\n<p>Jquery Mobile, standart html elementlerine stil olarak mobil kullan\u0131ma uygun d\u00fczenlemeler yapar. Bir liste ekledi\u011finizde ve data-rol \u00f6zelli\u011fini <strong>listview<\/strong> yapt\u0131\u011f\u0131n\u0131zda otomatik olarak taray\u0131c\u0131n\u0131z\u0131n yorumlad\u0131\u011f\u0131 liste olmaktan \u00e7\u0131kar stil’i (css) de\u011fi\u015fir. Bundan kast\u0131m mouse liste \u00fczerine geldi\u011finde ve t\u0131klad\u0131\u011f\u0131n\u0131zda g\u00f6rd\u00fc\u011f\u00fcn\u00fcz efekt, listenin fontu-yaz\u0131 b\u00fcy\u00fckl\u00fc\u011f\u00fc, sayfa i\u00e7erisinde ki hizalanmas\u0131 vb de\u011fi\u015fiklikleri kapsar. A\u015fa\u011f\u0131daki kodlar\u0131 content b\u00f6l\u00fcm\u00fcne yap\u0131\u015ft\u0131r\u0131rsan\u0131z resimdeki g\u00f6r\u00fcnt\u00fcy\u00fc elde edersiniz.<\/p>\n<pre>\r\n<ul data-role=\"listview\" data-theme=\"e\" data-inset=\"true\">\r\n    <li><a href=\"acura.html\">Acura<\/a><\/li>\r\n    <li><a href=\"audi.html\">Audi<\/a><\/li>\r\n    <li><a href=\"bmw.html\">BMW<\/a><\/li>\r\n<\/ul>\r\n<\/pre>\n<p><a href=\"https:\/\/guvensahin.com\/tr\/wp-content\/uploads\/2012\/08\/adsc4b1z4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-96\" title=\"Ads\u0131z\" src=\"https:\/\/guvensahin.com\/tr\/wp-content\/uploads\/2012\/08\/adsc4b1z4.png\" alt=\"\" width=\"374\" height=\"566\" srcset=\"https:\/\/guvensahin.com\/tr\/wp-content\/uploads\/2012\/08\/adsc4b1z4.png 374w, https:\/\/guvensahin.com\/tr\/wp-content\/uploads\/2012\/08\/adsc4b1z4-198x300.png 198w\" sizes=\"auto, (max-width: 374px) 100vw, 374px\" \/><\/a> G\u00f6rm\u00fc\u015f oldu\u011funuz buton ve liste gibi Jquery Mobile onlarca element bar\u0131nd\u0131rmaktad\u0131r. Daha \u00f6ncede s\u00f6yledi\u011fim gibi bu elementlerin stilleri mobil platform kullan\u0131m\u0131na uygun olarak d\u00fczenlenir. Genel anlamda b\u00fcy\u00fck olmalar\u0131n\u0131n sebebi ise mobil taray\u0131c\u0131lar\u0131n kulland\u0131\u011f\u0131 \u00e7\u00f6z\u00fcn\u00fcrl\u00fckten kaynaklanmaktad\u0131r. Jquery Mobile’da kodlama yaparken herhangi bir konumland\u0131rma (floating) yapmam\u0131za gerek kalmaz. \u00c7\u00fcnk\u00fc t\u00fcm elementler buna uygun olarak d\u00fczenlenmi\u015ftir. Her elementin yukar\u0131-a\u015fa\u011f\u0131 ve sa\u011f-sol olarak ald\u0131\u011f\u0131 margin\/padding \u00f6nceden bellidir. Tabiki istersek bunlar\u0131 de\u011fi\u015ftirebiliriz. Ama \u00f6zellikle framework’te buna gerek kalmayacakt\u0131r. Jquery Mobile elementlerin stillerinin, konumland\u0131rmalar\u0131n\u0131n; farkl\u0131 \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerde, farkl\u0131 cihazlarda nas\u0131l g\u00f6r\u00fcnece\u011fiyle sizi u\u011fra\u015ft\u0131rmadan h\u0131zl\u0131ca geli\u015ftirme yapmam\u0131z\u0131 sa\u011flar. Bize ise sadece i\u00e7erik ve back-end taraf\u0131nda yapacaklar\u0131m\u0131za odaklanmak kal\u0131r. \u015eimdi taray\u0131c\u0131m\u0131z\u0131 tam ekran yapal\u0131m. G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi t\u00fcm elementler sayfa geni\u015fli\u011finde uzad\u0131. Bunun sebebi kodlad\u0131\u011f\u0131m\u0131z sayfay\u0131 g\u00f6r\u00fcnt\u00fclemek isteyen pek \u00e7ok farkl\u0131 cihaz olacakt\u0131r (bu bir ak\u0131ll\u0131 telefon yada tablet olabilir). Her cihaz\u0131n \u00e7\u00f6z\u00fcn\u00fcrl\u00fckleri birbirinden farkl\u0131 oldu\u011fu i\u00e7in elementler direk olarak konumlansayd\u0131 farkl\u0131 cihazlarda ayn\u0131 g\u00f6r\u00fcnt\u00fcy\u00fc elde edemezdik. Bu y\u00fczden t\u00fcm elementler otomatik olarak sayfa geni\u015fli\u011finde kendilerini uyarlarlar. Taray\u0131c\u0131n\u0131z\u0131n boyutunu de\u011fi\u015ftirerek sizde test edebilirsiniz. Sizde herhangi bir konumland\u0131rma veya herhangi bir element eklemek isterseniz \u00f6rne\u011fin ekledi\u011finiz bir input=”text” in boyutunu y\u00fczde (%) yani likit olarak verirseniz, farkl\u0131 cihazlarda farkl\u0131 \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklere kendini otomatik olarak uyarlayacakt\u0131r. <a href=\"https:\/\/guvensahin.com\/tr\/wp-content\/uploads\/2012\/08\/cbj1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-94\" title=\"CBj1\" src=\"https:\/\/guvensahin.com\/tr\/wp-content\/uploads\/2012\/08\/cbj1.png\" alt=\"\" width=\"435\" height=\"197\" srcset=\"https:\/\/guvensahin.com\/tr\/wp-content\/uploads\/2012\/08\/cbj1.png 1366w, https:\/\/guvensahin.com\/tr\/wp-content\/uploads\/2012\/08\/cbj1-300x136.png 300w, https:\/\/guvensahin.com\/tr\/wp-content\/uploads\/2012\/08\/cbj1-1024x465.png 1024w\" sizes=\"auto, (max-width: 435px) 100vw, 435px\" \/><\/a><\/p>\n<h2>\u00c7oklu sayfa yap\u0131s\u0131<\/h2>\n<p>\u0130lk olarak <a href=\"https:\/\/guvensahin.com\/tr\/wp-content\/uploads\/2015\/03\/jm_ornek_2.html\">bu adresteki<\/a> \u00f6rnek sayfaya bakal\u0131m. Butona bast\u0131\u011f\u0131m\u0131zda bir ba\u015fka sayfa a\u00e7\u0131l\u0131yor. Ge\u00e7i\u015f s\u0131ras\u0131nda adres sat\u0131r\u0131na bakt\u0131\u011f\u0131m\u0131zda linkimizin sonuna <strong>#sayfa2<\/strong> ifadesinin eklendi\u011fini g\u00f6r\u00fcyoruz. Sayfan\u0131n kaynak kodlar\u0131na bakt\u0131\u011f\u0131m\u0131zda ise farkedeci\u011finiz \u00fczere \u00f6nceki \u00f6rnekten farkl\u0131 olarak tek bir sayfa yer alm\u0131yor. Bu sefer 2 sayfaya sahibiz. Kod yap\u0131s\u0131 a\u015fa\u011f\u0131daki \u015fekilde. Her bir sayfan\u0131n kendine ait header, footer ve content’i bulunuyor.<\/p>\n<pre>\r\n<div data-role=\"page\" id=\"sayfa1\">\r\n    <div data-role=\"header\"> ... <\/div>\r\n    <div data-role=\"content\"> ... <\/div>\r\n    <div data-role=\"footer\"> ... <\/div>\r\n<\/div><!-- \/page -->\r\n\r\n<div data-role=\"page\" id=\"sayfa2\">\r\n    <div data-role=\"header\"> ... <\/div>\r\n    <div data-role=\"content\"> ... <\/div>\r\n    <div data-role=\"footer\"> ... <\/div>\r\n<\/div><!-- \/page2 -->\r\n<\/pre>\n<p>Sayfay\u0131 g\u00f6r\u00fcnt\u00fclemek istedi\u011fimiz anda <strong>data-role=”page”<\/strong> olan div elementlerinden, sayfaya ilk eklenen g\u00f6sterilir.<\/p>\n<pre><div data-role=\"page\" id=\"sayfa1\"> ... <\/div><\/pre>\n<p>Biz herhangi bir butona, linke <strong>#sayfa2<\/strong> adresine gitmesini istersek, Jquery Mobile data-role=”page” olan ve id=”sayfa2″ olan div’i arar ve bulursa bize g\u00f6sterdi\u011fi sayfay\u0131 yani #sayfa1’i gizli hale getirip yeni olan g\u00f6r\u00fcnt\u00fclenmesini istedi\u011fimiz #sayfa2’ye ge\u00e7er. Bu ge\u00e7i\u015f s\u0131ras\u0131nda da standart olarak fade efekti uygular.<\/p>\n<p>Bu y\u00fczden Jquery Mobile ile uygulama geli\u015ftirirken <a href=\"http:\/\/www.w3schools.com\/html\/html_links.asp\">anchor<\/a> kullanamazs\u0131n\u0131z. \u00c7\u00fcnk\u00fc her # simgesinden sonraki ifadede, Jquery Mobile sayfa i\u00e7erisinde id’si belirtilen ifadeyle e\u015fle\u015fen page (data-role=”page”) arar.<\/p>\n<h2>Son olarak…<\/h2>\n<p>Ba\u015ftan sona <a href=\"http:\/\/jquerymobile.com\/demos\/1.1.1\/\">resmi d\u00f6k\u00fcmantasyonu<\/a> g\u00f6zden ge\u00e7irmenizi \u015fiddetle \u00f6neririm, linkte yer alan \u00f6rnekleri inceleyerek, pratik yaparak elementleri tan\u0131mak yeterli. \u00c7ok k\u0131sa s\u00fcrede adapte olup geli\u015ftirmeye ba\u015flayabilirsiniz.<\/p>\n<p>Yapt\u0131\u011f\u0131m\u0131z \u00f6rnekleri <a href=\"https:\/\/guvensahin.com\/tr\/wp-content\/uploads\/2015\/03\/jm_ornekler.zip\">buradan<\/a> indirebilirsiniz.<\/p>\n<p>Ho\u015fcakal\u0131n.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bu yaz\u0131da Jquery Mobile kullanarak, mobil uygulama geli\u015ftirmeye h\u0131zl\u0131ca ba\u015flang\u0131\u00e7 yapaca\u011f\u0131z. \u0130lk olarak Jquery Mobile’dan bahsetmemiz gerek. K\u0131saca tan\u0131mlamam\u0131z gerekirse kendisi Jquery ve Jquery UI \u00fczerine in\u015fa edilmi\u015f bir mobil web framework’t\u00fcr. Temelinde, ak\u0131ll\u0131 telefonlar ve tabletlerin taray\u0131c\u0131lar\u0131nda \u00e7al\u0131\u015fmas\u0131 i\u00e7in tasarlanan, HTML5‘den sonuna kadar yararlanan, mobil cihazlar i\u00e7in dizayn edilmi\u015f bir javascript(web) framework’t\u00fcr. Jquery Mobile… <a href=\"https:\/\/guvensahin.com\/tr\/jquery-mobile-hizli-baslangic\/\" rel=\"bookmark\">Daha fazlas\u0131n\u0131 oku »<span class=\"screen-reader-text\">Jquery Mobile H\u0131zl\u0131 Ba\u015flang\u0131\u00e7<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":104,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[239],"tags":[208,209,391],"class_list":["post-79","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programlama","tag-jquery","tag-jquery-mobile","tag-mobile"],"_links":{"self":[{"href":"https:\/\/guvensahin.com\/tr\/wp-json\/wp\/v2\/posts\/79","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/guvensahin.com\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/guvensahin.com\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/guvensahin.com\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/guvensahin.com\/tr\/wp-json\/wp\/v2\/comments?post=79"}],"version-history":[{"count":14,"href":"https:\/\/guvensahin.com\/tr\/wp-json\/wp\/v2\/posts\/79\/revisions"}],"predecessor-version":[{"id":2109,"href":"https:\/\/guvensahin.com\/tr\/wp-json\/wp\/v2\/posts\/79\/revisions\/2109"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/guvensahin.com\/tr\/wp-json\/wp\/v2\/media\/104"}],"wp:attachment":[{"href":"https:\/\/guvensahin.com\/tr\/wp-json\/wp\/v2\/media?parent=79"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/guvensahin.com\/tr\/wp-json\/wp\/v2\/categories?post=79"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guvensahin.com\/tr\/wp-json\/wp\/v2\/tags?post=79"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}