![\"\"](\"https:\/\/ulviercan.com\/teknoblog\/wp-content\/uploads\/2012\/11\/jqui.png\" "\\"jqui\\"")
<\/p>\n<\/p>\n
\u00c7ok klasik bir ba\u015flang\u0131\u00e7 olacak ancak zaman ger\u00e7ekten su gibi ak\u0131p ge\u00e7iyor. Zaman\u0131n k\u0131ymetini bilenlerden olmak dile\u011fi ile yeni haftaya, yeni yaz\u0131mla merhaba diyelim..<\/p>\n
jQuery User Interface (jQuery UI) kullan\u0131c\u0131 aray\u00fcz\u00fc etkile\u015fimleri, efektleri, widget’lar\u0131 ve temalar ile jQuery Java Script k\u00fct\u00fcphanesi \u00fcst\u00fcne in\u015fa edilmi\u015f bir yap\u0131d\u0131r. \u0130ster y\u00fcksek etkile\u015fimli web uygulamalar\u0131 in\u015fa ediyor olun, isterse sadece basit bir formdaki tarih alan\u0131 i\u00e7in tarih se\u00e7ici (datepicker) kullanacak olun, jQuery UI m\u00fckemmel bir ara\u00e7t\u0131r.<\/p>\n
jQuery UI ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi bir kullan\u0131c\u0131 aray\u00fcz\u00fc ekipman\u0131. Bu y\u00fczden tema deste\u011fi olmazsa olmaz. Kullanaca\u011f\u0131n\u0131z widget’lar\u0131n\u0131z i\u00e7in kendi teman\u0131z\u0131 olu\u015fturmak veya haz\u0131r temalardan birini indirmek i\u00e7in ThemeRoller<\/a> adresine gidiniz. Temalar\u0131 kodumuza uygulamak \u00e7ok kolayd\u0131r. Teman\u0131n sayfam\u0131za CSS ile link etti\u011fimiz k\u0131sm\u0131nda CSS dosyas\u0131n\u0131n adresini de\u011fi\u015ftirmek yeterli olacakt\u0131r.<\/p>\n \u00d6rnek verecek olursak:<\/p>\n Bu d\u00f6k\u00fcman jqUI taraf\u0131ndan sa\u011flanan nimetlerin en basit kullan\u0131mlar\u0131n\u0131 anlatacakt\u0131r. Detayl\u0131 kullan\u0131mlar, metodlar, parametreler i\u00e7in l\u00fctfen jqUI’nin ana sayfas\u0131n\u0131<\/a> ziyaret ediniz. En basit kullan\u0131mlar\u0131 ile anlataca\u011f\u0131m ba\u015fl\u0131klar \u015f\u00f6yle olacak:<\/p>\n Se\u00e7ilen elemente s\u00fcr\u00fckleme \u00f6zelli\u011fi ekliyor.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/fD7XB\/<\/a><\/p>\n $( “#suruklenebilir” ).draggable(); kod par\u00e7as\u0131 ile “#suruklenebilir” id’sine sahip olan elemente s\u00fcr\u00fcklenme \u00f6zelli\u011fi ekledik.<\/p>\n S\u00fcr\u00fcklenebilir elementler i\u00e7in, b\u0131rak\u0131labilir alanlar olu\u015fturmak i\u00e7in kullan\u0131l\u0131yor.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/QpQnu\/<\/a><\/p>\n $( “#suruklenebilir” ).draggable(); kod par\u00e7as\u0131 ile s\u00fcr\u00fcklenme \u00f6zelli\u011fi eklenmi\u015f olan element i\u00e7in $( “#biralilabilir” ).droppable(); kod par\u00e7as\u0131 ile b\u0131rak\u0131labilinir bir olan olu\u015fturduk. B\u0131rak i\u015flemi ger\u00e7ekle\u015fti\u011fi anda ise ekrana “B\u0131rak\u0131ld\u0131!” uyar\u0131s\u0131 verdik.<\/p>\n Yeniden boyutland\u0131r\u0131labilir kutular olu\u015fturmak i\u00e7in kullan\u0131l\u0131yor.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/rskcm\/<\/a><\/p>\n $( “#boyutlandir” ).resizable(); kod par\u00e7as\u0131 ile yeniden boyutland\u0131r\u0131labilir bir element olu\u015fturduk.<\/p>\n Se\u00e7ilebilir listeler olu\u015fturmak i\u00e7in kullan\u0131l\u0131yor. $( “#secilebilir” ).selectable(); kodu ile “#secilebilir” id’sine sahip olan listemize se\u00e7ilebilme \u00f6zelli\u011fi ekledik.<\/p>\n Siralanabilir kutular olu\u015fturmak i\u00e7in kullan\u0131l\u0131yor. $( “#siralanabilir” ).sortable(); ile listemizi se\u00e7ilebilir hale getirirken, $( “#siralanabilir” ).disableSelection(); liste i\u00e7inde bulunana metinlerin se\u00e7ilmesini engellemi\u015f oluyoruz.<\/p>\n Akordiyon tarz\u0131nda kutular olu\u015fturmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/H294E\/<\/a><\/p>\n $( “#accordion” ).accordion(); kodu ile ana kutumuz olan “#accordion” ID’li kutu i\u00e7in i\u015flemi ger\u00e7ekle\u015ftirdik. Metodun d\u00fczg\u00fcn \u00e7al\u0131\u015fmas\u0131 ana kutunun i\u00e7indeki yap\u0131ya ba\u011fl\u0131d\u0131r. Bu yap\u0131 \u015fu \u015fekilde olmal\u0131d\u0131r.<\/p>\n Ger\u00e7ekten m\u00fckemmel bir ara\u00e7. Input’a girdi\u011fimiz de\u011ferlere uygun olarak Input’un hemen alt\u0131nda bir liste olu\u015fturuyor. Anlayaca\u011f\u0131n\u0131z, neredeyse tek sat\u0131r kod ile b\u00fcy\u00fck i\u015fler ba\u015farm\u0131\u015f oluyoruz. Ger\u00e7ekten “write less, do more..” \ud83d\ude42 A\u015fa\u011f\u0131daki kod ile input’a autocomplete \u00f6zelli\u011fi verdik. Source parametresi i\u00e7in ise yukar\u0131da tan\u0131mlad\u0131\u011f\u0131m\u0131z diziyi ge\u00e7tik. Veri format\u0131 olarak JSON’da kullanabiliriz. Daha detayl\u0131 kullan\u0131mlar i\u00e7in, l\u00fctfen jqUI’nin autocomplete sayfas\u0131na<\/a> gidiniz.<\/p>\n jqUI stilinde butonlar olu\u015fturmam\u0131za yard\u0131mc\u0131 oluyor. Bu uygulamay\u0131 bir \u00e7ok form elementi i\u00e7in de uygulayabiliriz. .button() ile selector ile belirlenen t\u00fcm elementleri jqUI stilinde buton haline getirdik.<\/p>\n Diyelim ki \u00fcye kay\u0131t formunda kullan\u0131c\u0131dan do\u011fum tarihi bilgisini isteyece\u011fiz. \u0130\u015fte tam bu noktada jqUI datepicker imdad\u0131m\u0131za yeti\u015fiyor. $( “#datepicker” ).datepicker(); tek sat\u0131rl\u0131k kod ile input’umuza datepicker niteli\u011fi kazand\u0131rd\u0131k.<\/p>\n Uygulamam\u0131za diyalog kutusu eklemek i\u00e7in kullan\u0131l\u0131r. $( “#diyalog” ).dialog(); ile <div> elementimizi bir diyalog kutusu haline d\u00f6n\u00fc\u015ft\u00fcrd\u00fck.<\/p>\n \u00c7ok basit bir \u015fekilde a\u00e7\u0131l\u0131r men\u00fcler yapmam\u0131z\u0131 sa\u011fl\u0131yor. $( “#menu” ).menu(); ile belirtilen listeyi bir a\u00e7\u0131l\u0131r men\u00fc haline getiriyor.<\/p>\n \u0130\u015fte e\u011flenceli uygulamalardan bir tanesi daha. Bildi\u011fimiz “loading” \u00e7ubu\u011fu :). “#progressbar” ID’li kutumuzu bir loading bara d\u00f6n\u00fc\u015ft\u00fcrd\u00fck. “value: 37” k\u0131sm\u0131 ise loading bar\u0131n de\u011ferini temsil ediyor. Dinamik olarak de\u011fer atayabilirsiniz.<\/p>\n Yatay veya dikey olarak kayd\u0131rma \u00e7ubu\u011fu eklememize yard\u0131mc\u0131 oluyor. Herhangi bir oryantasyon belirtmedi\u011fimiz i\u00e7in, yatay olarak slider ekledik.<\/p>\n Verilen parametreye g\u00f6re say\u0131lar aras\u0131nda ge\u00e7i\u015f yapmam\u0131z\u0131 sa\u011fl\u0131yor.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/pAwhQ\/<\/a><\/p>\n Kodumuzu inceledi\u011fimizde, toggle enable\/disable butonu slider widget’\u0131n\u0131 aktif veya pasif hale getiriyor. De\u011feri getir butonuna bast\u0131\u011f\u0131m\u0131zda o anki de\u011fer uyar\u0131 olarak ekrana yans\u0131t\u0131l\u0131yor. 5’e set etmek i\u00e7in ise, De\u011feri 5’e set et d\u00fc\u011fmesine bas\u0131yoruz. Toggle widget ise, slider widget’\u0131n\u0131 normal input ile slider aras\u0131nda d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in kullan\u0131l\u0131yor.<\/p>\n \u00c7ok k\u0131sa bir \u015fekilde tab men\u00fc uygulamalar\u0131 yapmak i\u00e7in kullan\u0131yoruz. $( “#tabs” ).tabs(); ile direkt tab men\u00fc haline d\u00f6n\u00fc\u015ft\u00fcr\u00fcyoruz. Uygulaman\u0131n \u00e7al\u0131\u015fmas\u0131 i\u00e7in kullanaca\u011f\u0131m\u0131z html kod yap\u0131s\u0131 \u015fu \u015fekilde olmal\u0131d\u0131r.<\/p>\n Tooltip’ler herhangi bir elemente eklenebilir. Elementin \u00fczerine geldi\u011finizde title \u00f6zelli\u011fini ipucu olarak ekrana yans\u0131t\u0131r.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/Xf8yU\/<\/a><\/p>\n $( document ).tooltip(); ile d\u00f6k\u00fcmanda title \u00f6zelli\u011fine sahip t\u00fcm elementler i\u00e7in tooltip widget’i olu\u015fturduk.<\/p>\n Efekt jqUI b\u00fcnyesinde bar\u0131nan bir \u00e7ok efekti \u00e7al\u0131\u015ft\u0131rmam\u0131z\u0131 sa\u011fl\u0131yor.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/mhVPR\/<\/a><\/p>\n Kodumuzu inceledi\u011fimizde bir \u00e7ok efektin parametreye ihtiya\u00e7 duymadan direkt \u00e7al\u0131\u015ft\u0131r\u0131labildi\u011fini g\u00f6rebilirsiniz. Ancak baz\u0131 efektler \u00f6zel parametreler gerektiriyor. Kod i\u00e7erisinde if deyimi i\u00e7erisinde yapt\u0131\u011f\u0131m\u0131z tan\u0131mlamalar bu y\u00fczdendir.<\/p>\n Show jqUI b\u00fcnyesinde bar\u0131nan bir \u00e7ok efekti \u00e7al\u0131\u015ft\u0131rmam\u0131z\u0131 sa\u011fl\u0131yor. Kullan\u0131m\u0131 effect ile tamamen ayn\u0131d\u0131r ancak tek fark\u0131 gizlenmi\u015f olan elementi g\u00f6steriyor olmas\u0131d\u0131r.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/EBhdn\/<\/a><\/p>\n Kodumuzu inceledi\u011fimizde bir \u00e7ok efektin parametreye ihtiya\u00e7 duymadan direkt \u00e7al\u0131\u015ft\u0131r\u0131labildi\u011fini g\u00f6rebilirsiniz. Ancak baz\u0131 efektler \u00f6zel parametreler gerektiriyor. Kod i\u00e7erisinde if deyimi i\u00e7erisinde yapt\u0131\u011f\u0131m\u0131z tan\u0131mlamalar bu y\u00fczdendir.<\/p>\n Hide jqUI b\u00fcnyesinde bar\u0131nan bir \u00e7ok efekti \u00e7al\u0131\u015ft\u0131rmam\u0131z\u0131 sa\u011fl\u0131yor. Kullan\u0131m\u0131 Show ile tamamen ayn\u0131d\u0131r ancak tek fark\u0131 g\u00f6r\u00fcn\u00fcr olan elementi gizliyor olmas\u0131d\u0131r.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/79qEK\/<\/a><\/p>\n Kodumuzu inceledi\u011fimizde bir \u00e7ok efektin parametreye ihtiya\u00e7 duymadan direkt \u00e7al\u0131\u015ft\u0131r\u0131labildi\u011fini g\u00f6rebilirsiniz. Ancak baz\u0131 efektler \u00f6zel parametreler gerektiriyor. Kod i\u00e7erisinde if deyimi i\u00e7erisinde yapt\u0131\u011f\u0131m\u0131z tan\u0131mlamalar bu y\u00fczdendir.<\/p>\n Toggle jqUI b\u00fcnyesinde bar\u0131nan bir \u00e7ok efekti \u00e7al\u0131\u015ft\u0131rmam\u0131z\u0131 sa\u011fl\u0131yor. Kullan\u0131m\u0131 effect ile tamamen ayn\u0131d\u0131r ancak tek fark\u0131 gizlenmi\u015f olan elementi g\u00f6steriyor, g\u00f6z\u00fcken elementi gizliyor olmas\u0131d\u0131r. Kodumuzu inceledi\u011fimizde bir \u00e7ok efektin parametreye ihtiya\u00e7 duymadan direkt \u00e7al\u0131\u015ft\u0131r\u0131labildi\u011fini g\u00f6rebilirsiniz. Ancak baz\u0131 efektler \u00f6zel parametreler gerektiriyor. Kod i\u00e7erisinde if deyimi i\u00e7erisinde yapt\u0131\u011f\u0131m\u0131z tan\u0131mlamalar bu y\u00fczdendir.<\/p>\n CSS s\u0131n\u0131flar\u0131 aras\u0131nda animasyonlu bir \u015fekilde ge\u00e7i\u015f yapmam\u0131z\u0131 sa\u011flar. “#effect” ID’sine sahip kutumuza 1000 mili saniye yani 1 saniye i\u00e7erisinde ge\u00e7i\u015fini tamamlamak \u00fczere “#newclass” CSS s\u0131n\u0131f\u0131n\u0131 atad\u0131k. \u0130\u015flem bittikten sonra ise, kutumuzu eski haline getirmek i\u00e7in callback fonksiyonumuzu \u00e7a\u011f\u0131rd\u0131k.<\/p>\n Ge\u00e7erli CSS s\u0131n\u0131f\u0131n\u0131 animasyonlu bir \u015fekilde iptal eder. “#effect” ID’sine sahip kutumuza 1000 mili saniye yani 1 saniye i\u00e7erisinde ge\u00e7i\u015fini tamamlamak \u00fczere CSS s\u0131n\u0131f\u0131n\u0131 sildik. \u0130\u015flem bittikten sonra ise, kutumuzu eski haline getirmek i\u00e7in callback fonksiyonumuzu \u00e7a\u011f\u0131rd\u0131k.<\/p>\n Add Class ve Remove Class metotlar\u0131n\u0131n birle\u015ftirilmi\u015f halidir. Animasyonlu \u015fekilde CSS s\u0131n\u0131f\u0131n\u0131n var oldu\u011fu ve silindi\u011fi durumlar aras\u0131nda ge\u00e7i\u015f yapar. “#effect” ID’sine sahip kutumuza 1000 mili saniye yani 1 saniye i\u00e7erisinde ge\u00e7i\u015fini tamamlamak \u00fczere CSS s\u0131n\u0131f\u0131n\u0131 sildik. \u0130\u015flem bittikten sonra ise, tekrar “Efekti \u00c7al\u0131\u015ft\u0131r” d\u00fc\u011fmesine t\u0131klarsak yine ayn\u0131 \u015fekilde CSS s\u0131n\u0131f\u0131n\u0131 ekleyecektir.<\/p>\n Belirlenen CSS s\u0131n\u0131flar\u0131 aras\u0131nda animasyonlu bir \u015fekilde ge\u00e7i\u015f yapar. “Efekti \u00c7al\u0131\u015ft\u0131r” butonuna ilk t\u0131klad\u0131\u011f\u0131m\u0131zda DOM d\u00f6k\u00fcmanda sadece “newClass” s\u0131n\u0131f\u0131n\u0131n tan\u0131ml\u0131 olmas\u0131 sebebiyle, “newClass” s\u0131n\u0131f\u0131ndan “anotherNewClass” s\u0131n\u0131f\u0131na ge\u00e7i\u015f sa\u011flan\u0131yor. \u0130kinci t\u0131klamada ise, d\u00f6k\u00fcmanda sadece “anotherNewClass” s\u0131n\u0131f\u0131 bulundu\u011fu i\u00e7in “anotherNewClass” s\u0131n\u0131f\u0131ndan “newClass” s\u0131n\u0131f\u0131na ge\u00e7i\u015f sa\u011flan\u0131yor.<\/p>\n\r\n<link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n\r\n\/\/ Bu kod teman\u0131n \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 k\u0131s\u0131md\u0131r.\r\n\/\/ Bu k\u0131sm\u0131 teman\u0131n ad\u0131 ile de\u011fi\u015ftirdi\u011fimiz zaman,\r\n\/\/ yeni g\u00f6r\u00fcn\u00fcm\u00fc elde etmi\u015f olaca\u011f\u0131z\r\n\r\n<link rel="stylesheet" href="https:\/\/sitemizinadresi.com\/ui\/1.9.1\/themes\/start.css" \/>\r\n<\/pre>\n
\n
\n
\n
\n
\n
\n
Etkile\u015fimler<\/h1>\n
Draggable<\/h1>\n
\r\n<!doctype html>\r\n\r\n<html lang="tr">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n\r\n <style>\r\n #suruklenebilir{ width: 150px; height: 150px; padding: 0.5em; }\r\n <\/style>\r\n <script>\r\n $(function() {\r\n $( "#suruklenebilir" ).draggable();\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div id="suruklenebilir" class="ui-widget-content">\r\n <p>Beni s\u00fcr\u00fckle<\/p>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nDroppable<\/h1>\n
\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <style>\r\n #suruklenebilir{ width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }\r\n #biralilabilir{ width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }\r\n <\/style>\r\n <script>\r\n $(function() {\r\n $( "#suruklenebilir" ).draggable();\r\n $( "#biralilabilir" ).droppable({\r\n drop: function( event, ui ) {\r\n $( this )\r\n .addClass( "ui-state-highlight" )\r\n .find( "p" )\r\n .html( "B\u0131rak\u0131ld\u0131!" );\r\n }\r\n });\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div id="suruklenebilir" class="ui-widget-content">\r\n <p>Belirlenen hedefe beni b\u0131rak<\/p>\r\n<\/div>\r\n\r\n<div id="biralilabilir" class="ui-widget-header">\r\n <p>Buraya b\u0131rak<\/p>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nResizable<\/h1>\n
\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <style>\r\n #boyutlandir { width: 150px; height: 150px; padding: 0.5em; }\r\n #boyutlandir h3 { text-align: center; margin: 0; }\r\n <\/style>\r\n <script>\r\n $(function() {\r\n $( "#boyutlandir" ).resizable();\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div id="boyutlandir" class="ui-widget-content">\r\n <h3 class="ui-widget-header">Yeniden boyutlandirilabilir<\/h3>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nSelectable<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/GMbkS\/<\/a><\/p>\n\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n\r\n <style>\r\n #feedback { font-size: 1.4em; }\r\n #secilebilir .ui-selecting { background: #FECA40; }\r\n #secilebilir .ui-selected { background: #F39814; color: white; }\r\n #secilebilir { list-style-type: none; margin: 0; padding: 0; width: 60%; }\r\n #secilebilir li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }\r\n <\/style>\r\n <script>\r\n $(function() {\r\n $( "#secilebilir" ).selectable();\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n<ol id="secilebilir">\r\n <li class="ui-widget-content">Madde 1<\/li>\r\n <li class="ui-widget-content">Madde 2<\/li>\r\n <li class="ui-widget-content">Madde 3<\/li>\r\n <li class="ui-widget-content">Madde 4<\/li>\r\n <li class="ui-widget-content">Madde 5<\/li>\r\n <li class="ui-widget-content">Madde 6<\/li>\r\n <li class="ui-widget-content">Madde 7<\/li>\r\n<\/ol>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nSortable<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/xcXXc\/<\/a><\/p>\n\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <style>\r\n #siralanabilir { list-style-type: none; margin: 0; padding: 0; width: 60%; }\r\n #siralanabilir li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }\r\n #siralanabilir li span { position: absolute; margin-left: -1.3em; }\r\n <\/style>\r\n <script>\r\n $(function() {\r\n $( "#siralanabilir" ).sortable();\r\n $( "#siralanabilir" ).disableSelection();\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n<ul id="siralanabilir">\r\n <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"><\/span>Madde 1<\/li>\r\n <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"><\/span>Madde 2<\/li>\r\n <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"><\/span>Madde 3<\/li>\r\n <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"><\/span>Madde 4<\/li>\r\n <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"><\/span>Madde 5<\/li>\r\n <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"><\/span>Madde 6<\/li>\r\n <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"><\/span>Madde 7<\/li>\r\n<\/ul>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nWidget’lar<\/h1>\n
Accordion<\/h1>\n
\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <script>\r\n $(function() {\r\n $( "#accordion" ).accordion();\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div id="accordion">\r\n <h3>B\u00f6l\u00fcm 1<\/h3>\r\n <div>\r\n <p>\r\n Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer\r\n ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit\r\n amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut\r\n odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.\r\n <\/p>\r\n <\/div>\r\n <h3>B\u00f6l\u00fcm 2<\/h3>\r\n <div>\r\n <p>\r\n Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet\r\n purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor\r\n velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In\r\n suscipit faucibus urna.\r\n <\/p>\r\n <\/div>\r\n <h3>B\u00f6l\u00fcm 3<\/h3>\r\n <div>\r\n <p>\r\n Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.\r\n Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero\r\n ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis\r\n lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.\r\n <\/p>\r\n <ul>\r\n <li>Birinci madde <\/li>\r\n <li>\u0130kinci Madde<\/li>\r\n <li>\u00dc\u00e7\u00fcnc\u00fc Madde<\/li>\r\n <\/ul>\r\n <\/div>\r\n <h3>B\u00f6l\u00fcm 4<\/h3>\r\n <div>\r\n <p>\r\n Cras dictum. Pellentesque habitant morbi tristique senectus et netus\r\n et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in\r\n faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia\r\n mauris vel est.\r\n <\/p>\r\n <p>\r\n Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.\r\n Class aptent taciti sociosqu ad litora torquent per conubia nostra, per\r\n inceptos himenaeos.\r\n <\/p>\r\n <\/div>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n\r\n<h3>1. Ba\u015fl\u0131k Buraya<\/h3>\r\n<div>1. \u0130\u00e7erik Buraya<\/div>\r\n\r\n<h3>2. Ba\u015fl\u0131k Buraya<\/h3>\r\n<div>2. \u0130\u00e7erik Buraya<\/div>\r\n<\/pre>\n
Autocomplete<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/fcggh\/<\/a><\/p>\n\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <script>\r\n $(function() {\r\n var availableTags = [\r\n "ActionScript",\r\n "AppleScript",\r\n "Asp",\r\n "BASIC",\r\n "C",\r\n "C++",\r\n "Clojure",\r\n "COBOL",\r\n "ColdFusion",\r\n "Erlang",\r\n "Fortran",\r\n "Groovy",\r\n "Haskell",\r\n "Java",\r\n "JavaScript",\r\n "Lisp",\r\n "Perl",\r\n "PHP",\r\n "Python",\r\n "Ruby",\r\n "Scala",\r\n "Scheme"\r\n ];\r\n $( "#tags" ).autocomplete({\r\n source: availableTags\r\n });\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div class="ui-widget">\r\n <label for="tags">Tags: <\/label>\r\n <input id="tags" \/>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n\r\n$( "#tags" ).autocomplete({\r\n source: availableTags\r\n });\r\n<\/pre>\nButton<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/rBYuc\/<\/a><\/p>\n\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <script>\r\n $(function() {\r\n $( "input[type=submit], a, button" )\r\n .button()\r\n .click(function( event ) {\r\n event.preventDefault();\r\n });\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n<button>Bir buton elementi<\/button>\r\n\r\n<input type="submit" value="G\u00f6nder butonu" \/>\r\n\r\n<a href="#">ve Bir link<\/a>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nDatepicker<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/hQs7T\/<\/a><\/p>\n\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <script>\r\n $(function() {\r\n $( "#datepicker" ).datepicker();\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n<p>Tarih: <input type="text" id="datepicker" \/><\/p>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nDialog<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/YeXXf\/<\/a><\/p>\n\r\n<!doctype html>\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="\/resources\/demos\/external\/jquery.bgiframe-2.1.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <script>\r\n $(function() {\r\n $( "#diyalog" ).dialog();\r\n });\r\n <\/script>\r\n <style>\r\n #diyalog{\r\n font-size: 12px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div id="diyalog" title="Basit diyalog kutusu">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<\/p>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\nMenu<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/UAfck\/<\/a><\/p>\n\r\n\r\n<!doctype html>\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <script>\r\n $(function() {\r\n $( "#menu" ).menu();\r\n });\r\n <\/script>\r\n <style>\r\n .ui-menu { width: 150px; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<ul id="menu">\r\n <li class="ui-state-disabled"><a href="#">\u0130stanbul<\/a><\/li>\r\n <li><a href="#">Ankara<\/a><\/li>\r\n <li><a href="#">Adana<\/a><\/li>\r\n <li><a href="#">Konya<\/a><\/li>\r\n <li>\r\n <a href="#">\u0130zmir<\/a>\r\n <ul>\r\n <li class="ui-state-disabled"><a href="#">Urla<\/a><\/li>\r\n <li><a href="#">\u00c7e\u015fme<\/a><\/li>\r\n <li><a href="#">Karaburun<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><a href="#">Ad\u0131yaman<\/a><\/li>\r\n <li>\r\n <a href="#">Sivas<\/a>\r\n <ul>\r\n <li>\r\n <a href="#">\u00c7anakkale<\/a>\r\n <ul>\r\n <li><a href="#">Biga<\/a><\/li>\r\n <li><a href="#">Burhaniye<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li>\r\n <a href="#">Antalya<\/a>\r\n <ul>\r\n <li><a href="#">Ka\u015f<\/a><\/li>\r\n <li><a href="#">Kemer<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><a href="#">Bursa<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li class="ui-state-disabled"><a href="#">Kahramanmara\u015f<\/a><\/li>\r\n<\/ul>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nProgressbar<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/BV3ue\/<\/a><\/p>\n\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <script>\r\n $(function() {\r\n $( "#progressbar" ).progressbar({\r\n value: 37\r\n });\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div id="progressbar"><\/div>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nSlider<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/PD83p\/<\/a><\/p>\n\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <script>\r\n $(function() {\r\n $( "#slider" ).slider();\r\n });\r\n <\/script>\r\n <style>\r\n #slider{\r\n margin: 30px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id="slider"><\/div>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nSpinner<\/h1>\n
\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="\/resources\/demos\/external\/jquery.mousewheel.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <script>\r\n $(function() {\r\n var spinner = $( "#spinner" ).spinner();\r\n\r\n $( "#disable" ).click(function() {\r\n if ( spinner.spinner( "option", "disabled" ) ) {\r\n spinner.spinner( "enable" );\r\n } else {\r\n spinner.spinner( "disable" );\r\n }\r\n });\r\n $( "#destroy" ).click(function() {\r\n if ( spinner.data( "ui-spinner" ) ) {\r\n spinner.spinner( "destroy" );\r\n } else {\r\n spinner.spinner();\r\n }\r\n });\r\n $( "#getvalue" ).click(function() {\r\n alert( spinner.spinner( "value" ) );\r\n });\r\n $( "#setvalue" ).click(function() {\r\n spinner.spinner( "value", 5 );\r\n });\r\n\r\n $( "button" ).button();\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n<p>\r\n <label for="spinner">Bir de\u011fer se\u00e7iniz:<\/label>\r\n <input id="spinner" name="value" \/>\r\n<\/p>\r\n\r\n<p>\r\n <button id="disable">Toggle disable\/enable<\/button>\r\n <button id="destroy">Toggle widget<\/button>\r\n<\/p>\r\n\r\n<p>\r\n <button id="getvalue">De\u011feri getir<\/button>\r\n <button id="setvalue">De\u011feri 5 e set et<\/button>\r\n<\/p>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nTabs<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/ahZgZ\/<\/a><\/p>\n\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <script>\r\n $(function() {\r\n $( "#tabs" ).tabs();\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div id="tabs" style="margin:30px; font-size:12px;">\r\n <ul>\r\n <li><a href="#tabs-1">Nunc tincidunt<\/a><\/li>\r\n <li><a href="#tabs-2">Proin dolor<\/a><\/li>\r\n <li><a href="#tabs-3">Aenean lacinia<\/a><\/li>\r\n <\/ul>\r\n <div id="tabs-1">\r\n <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.<\/p>\r\n <\/div>\r\n <div id="tabs-2">\r\n <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.<\/p>\r\n <\/div>\r\n <div id="tabs-3">\r\n <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.<\/p>\r\n <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.<\/p>\r\n <\/div>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n\r\n<div id="ana_kutu">\r\n <ul>\r\n <li><a href="#tab-1">Tab 1<\/a><\/li>\r\n <li><a href="#tab-2">Tab 2<\/a><\/li>\r\n <\/ul>\r\n <div id="tab-1"><\/div>\r\n <div id="tab-2"><\/div>\r\n<div>\r\n<\/pre>\n
Tooltip<\/h1>\n
\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <script>\r\n $(function() {\r\n $( document ).tooltip();\r\n });\r\n <\/script>\r\n <style>\r\n label {\r\n display: inline-block;\r\n width: 5em;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p><a href="#" title="Bu bir ipucudur">Tooltip'ler<\/a> herhangi bir elemente eklenebilir, Elementin \u00fczerine geldi\u011finizde title \u00f6zelli\u011fini ipucu olarak ekrana yans\u0131t\u0131r.<\/p>\r\n<p><label for="age">Ya\u015f\u0131n\u0131z:<\/label><input id="age" title="Ya\u015f\u0131n\u0131z\u0131 bu alana giriniz" \/><\/p>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nEfektler<\/h1>\n
Effect<\/h1>\n
\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <style>\r\n .toggler { width: 500px; height: 200px; position: relative; }\r\n #button { padding: .5em 1em; text-decoration: none; }\r\n #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }\r\n #effect h3 { margin: 0; padding: 0.4em; text-align: center; }\r\n .ui-effects-transfer { border: 2px dotted gray; }\r\n <\/style>\r\n <script>\r\n $(function() {\r\n \/\/ \u015eu anda se\u00e7ilmi\u015f olan efekti uygula\r\n function runEffect() {\r\n \/\/ Efektin tipini getir\r\n var selectedEffect = $( "#effectTypes" ).val();\r\n\r\n \/\/ Bir \u00e7ok efekt parametreye gerek olmadan kullan\u0131labilir.\r\n var options = {};\r\n \/\/ Baz\u0131 efektler \u00f6zel parametreler gerektirir\r\n if ( selectedEffect === "scale" ) {\r\n options = { percent: 0 };\r\n } else if ( selectedEffect === "transfer" ) {\r\n options = { to: "#button", className: "ui-effects-transfer" };\r\n } else if ( selectedEffect === "size" ) {\r\n options = { to: { width: 200, height: 60 } };\r\n }\r\n\r\n \/\/ efekti \u00e7al\u0131\u015ft\u0131r\r\n $( "#effect" ).effect( selectedEffect, options, 500, callback );\r\n };\r\n\r\n \/\/ gizlenmi\u015f kutuyu geri \u00e7a\u011f\u0131r\u0131yoruz\r\n function callback() {\r\n setTimeout(function() {\r\n $( "#effect" ).removeAttr( "style" ).hide().fadeIn();\r\n }, 1000 );\r\n };\r\n\r\n \/\/ a\u00e7\u0131l\u0131r men\u00fcden efekti se\u00e7iyoruz\r\n $( "#button" ).click(function() {\r\n runEffect();\r\n return false;\r\n });\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div class="toggler">\r\n <div id="effect" class="ui-widget-content ui-corner-all">\r\n <h3 class="ui-widget-header ui-corner-all">Efekt<\/h3>\r\n <p>\r\n Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.\r\n <\/p>\r\n <\/div>\r\n<\/div>\r\n\r\n<select name="effects" id="effectTypes">\r\n <option value="blind">Blind<\/option>\r\n <option value="bounce">Bounce<\/option>\r\n <option value="clip">Clip<\/option>\r\n <option value="drop">Drop<\/option>\r\n <option value="explode">Explode<\/option>\r\n <option value="fade">Fade<\/option>\r\n <option value="fold">Fold<\/option>\r\n <option value="highlight">Highlight<\/option>\r\n <option value="puff">Puff<\/option>\r\n <option value="pulsate">Pulsate<\/option>\r\n <option value="scale">Scale<\/option>\r\n <option value="shake">Shake<\/option>\r\n <option value="size">Size<\/option>\r\n <option value="slide">Slide<\/option>\r\n <option value="transfer">Transfer<\/option>\r\n<\/select>\r\n\r\n<a href="#" id="button" class="ui-state-default ui-corner-all">Efekti \u00c7al\u0131\u015ft\u0131r<\/a>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nShow<\/h1>\n
\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <style>\r\n .toggler { width: 500px; height: 200px; position: relative; }\r\n #button { padding: .5em 1em; text-decoration: none; }\r\n #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }\r\n #effect h3 { margin: 0; padding: 0.4em; text-align: center; }\r\n .ui-effects-transfer { border: 2px dotted gray; }\r\n <\/style>\r\n <script>\r\n $(function() {\r\n \/\/ \u015eu anda se\u00e7ilmi\u015f olan efekti uygula\r\n function runEffect() {\r\n \/\/ Efektin tipini getir\r\n var selectedEffect = $( "#effectTypes" ).val();\r\n\r\n \/\/ Bir \u00e7ok efekt parametreye gerek olmadan kullan\u0131labilir.\r\n var options = {};\r\n \/\/ Baz\u0131 efektler \u00f6zel parametreler gerektirir\r\n if ( selectedEffect === "scale" ) {\r\n options = { percent: 0 };\r\n } else if ( selectedEffect === "transfer" ) {\r\n options = { to: "#button", className: "ui-effects-transfer" };\r\n } else if ( selectedEffect === "size" ) {\r\n options = { to: { width: 200, height: 60 } };\r\n }\r\n\r\n \/\/ efekti \u00e7al\u0131\u015ft\u0131r\r\n $( "#effect" ).show( selectedEffect, options, 500, callback );\r\n };\r\n\r\n \/\/ gizlenmi\u015f kutuyu geri \u00e7a\u011f\u0131r\u0131yoruz\r\n function callback() {\r\n setTimeout(function() {\r\n $( "#effect:visible" ).removeAttr( "style" ).fadeOut();\r\n }, 1000 );\r\n };\r\n\r\n \/\/ a\u00e7\u0131l\u0131r men\u00fcden efekti se\u00e7iyoruz\r\n $( "#button" ).click(function() {\r\n runEffect();\r\n return false;\r\n });\r\n$( "#effect" ).hide();\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div class="toggler">\r\n <div id="effect" class="ui-widget-content ui-corner-all">\r\n <h3 class="ui-widget-header ui-corner-all">Efekt<\/h3>\r\n <p>\r\n Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.\r\n <\/p>\r\n <\/div>\r\n<\/div>\r\n\r\n<select name="effects" id="effectTypes">\r\n <option value="blind">Blind<\/option>\r\n <option value="bounce">Bounce<\/option>\r\n <option value="clip">Clip<\/option>\r\n <option value="drop">Drop<\/option>\r\n <option value="explode">Explode<\/option>\r\n <option value="fade">Fade<\/option>\r\n <option value="fold">Fold<\/option>\r\n <option value="highlight">Highlight<\/option>\r\n <option value="puff">Puff<\/option>\r\n <option value="pulsate">Pulsate<\/option>\r\n <option value="scale">Scale<\/option>\r\n <option value="shake">Shake<\/option>\r\n <option value="size">Size<\/option>\r\n <option value="slide">Slide<\/option>\r\n <option value="transfer">Transfer<\/option>\r\n<\/select>\r\n\r\n<a href="#" id="button" class="ui-state-default ui-corner-all">Efekti \u00c7al\u0131\u015ft\u0131r<\/a>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nHide<\/h1>\n
\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <style>\r\n .toggler { width: 500px; height: 200px; position: relative; }\r\n #button { padding: .5em 1em; text-decoration: none; }\r\n #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }\r\n #effect h3 { margin: 0; padding: 0.4em; text-align: center; }\r\n .ui-effects-transfer { border: 2px dotted gray; }\r\n <\/style>\r\n <script>\r\n $(function() {\r\n \/\/ \u015eu anda se\u00e7ilmi\u015f olan efekti uygula\r\n function runEffect() {\r\n \/\/ Efektin tipini getir\r\n var selectedEffect = $( "#effectTypes" ).val();\r\n\r\n \/\/ Bir \u00e7ok efekt parametreye gerek olmadan kullan\u0131labilir.\r\n var options = {};\r\n \/\/ Baz\u0131 efektler \u00f6zel parametreler gerektirir\r\n if ( selectedEffect === "scale" ) {\r\n options = { percent: 0 };\r\n } else if ( selectedEffect === "transfer" ) {\r\n options = { to: "#button", className: "ui-effects-transfer" };\r\n } else if ( selectedEffect === "size" ) {\r\n options = { to: { width: 200, height: 60 } };\r\n }\r\n\r\n \/\/ efekti \u00e7al\u0131\u015ft\u0131r\r\n $( "#effect" ).hide( selectedEffect, options, 500, callback );\r\n };\r\n\r\n \/\/ gizlenmi\u015f kutuyu geri \u00e7a\u011f\u0131r\u0131yoruz\r\n function callback() {\r\n setTimeout(function() {\r\n $( "#effect" ).removeAttr( "style" ).hide().fadeIn();\r\n }, 1000 );\r\n };\r\n\r\n \/\/ a\u00e7\u0131l\u0131r men\u00fcden efekti se\u00e7iyoruz\r\n $( "#button" ).click(function() {\r\n runEffect();\r\n return false;\r\n });\r\n$( "#effect" ).removeAttr( "style" ).hide().fadeIn();\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div class="toggler">\r\n <div id="effect" class="ui-widget-content ui-corner-all">\r\n <h3 class="ui-widget-header ui-corner-all">Efekt<\/h3>\r\n <p>\r\n Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.\r\n <\/p>\r\n <\/div>\r\n<\/div>\r\n\r\n<select name="effects" id="effectTypes">\r\n <option value="blind">Blind<\/option>\r\n <option value="bounce">Bounce<\/option>\r\n <option value="clip">Clip<\/option>\r\n <option value="drop">Drop<\/option>\r\n <option value="explode">Explode<\/option>\r\n <option value="fade">Fade<\/option>\r\n <option value="fold">Fold<\/option>\r\n <option value="highlight">Highlight<\/option>\r\n <option value="puff">Puff<\/option>\r\n <option value="pulsate">Pulsate<\/option>\r\n <option value="scale">Scale<\/option>\r\n <option value="shake">Shake<\/option>\r\n <option value="size">Size<\/option>\r\n <option value="slide">Slide<\/option>\r\n <option value="transfer">Transfer<\/option>\r\n<\/select>\r\n\r\n<a href="#" id="button" class="ui-state-default ui-corner-all">Efekti \u00c7al\u0131\u015ft\u0131r<\/a>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nToggle<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/2UWsP\/<\/a><\/p>\n\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <style>\r\n .toggler {\r\n width: 500px;\r\n height: 200px;\r\n }\r\n #button {\r\n padding: .5em 1em;\r\n text-decoration: none;\r\n }\r\n #effect {\r\n position: relative;\r\n width: 240px;\r\n height: 135px;\r\n padding: 0.4em;\r\n }\r\n #effect h3 {\r\n margin: 0;\r\n padding: 0.4em;\r\n text-align: center;\r\n }\r\n <\/style>\r\n <script>\r\n $(function() {\r\n \/\/ \u015eu anda se\u00e7ilmi\u015f olan efekti uygula\r\n function runEffect() {\r\n \/\/ Efektin tipini getir\r\n var selectedEffect = $( "#effectTypes" ).val();\r\n\r\n \/\/ Bir \u00e7ok efekt parametreye gerek olmadan kullan\u0131labilir.\r\n var options = {};\r\n \/\/ Baz\u0131 efektler \u00f6zel parametreler gerektirir\r\n if ( selectedEffect === "scale" ) {\r\n options = { percent: 0 };\r\n } else if ( selectedEffect === "size" ) {\r\n options = { to: { width: 200, height: 60 } };\r\n }\r\n\r\n \/\/ efekti \u00e7al\u0131\u015ft\u0131r\r\n $( "#effect" ).toggle( selectedEffect, options, 500 );\r\n };\r\n\r\n \/\/ a\u00e7\u0131l\u0131r men\u00fcden efekti se\u00e7iyoruz\r\n $( "#button" ).click(function() {\r\n runEffect();\r\n return false;\r\n });\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div class="toggler">\r\n <div id="effect" class="ui-widget-content ui-corner-all">\r\n <h3 class="ui-widget-header ui-corner-all">Toggle<\/h3>\r\n <p>\r\n Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.\r\n <\/p>\r\n <\/div>\r\n<\/div>\r\n\r\n<select name="effects" id="effectTypes">\r\n <option value="blind">Blind<\/option>\r\n <option value="bounce">Bounce<\/option>\r\n <option value="clip">Clip<\/option>\r\n <option value="drop">Drop<\/option>\r\n <option value="explode">Explode<\/option>\r\n <option value="fold">Fold<\/option>\r\n <option value="highlight">Highlight<\/option>\r\n <option value="puff">Puff<\/option>\r\n <option value="pulsate">Pulsate<\/option>\r\n <option value="scale">Scale<\/option>\r\n <option value="shake">Shake<\/option>\r\n <option value="size">Size<\/option>\r\n <option value="slide">Slide<\/option>\r\n<\/select>\r\n\r\n<a href="#" id="button" class="ui-state-default ui-corner-all">Efekti \u00c7al\u0131\u015ft\u0131r<\/a>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\naddClass<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/mqbsc\/<\/a><\/p>\n\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <style>\r\n .toggler { width: 500px; height: 200px; position: relative; }\r\n #button { padding: .5em 1em; text-decoration: none; }\r\n #effect { width: 240px; padding: 1em; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }\r\n .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }\r\n <\/style>\r\n <script>\r\n $(function() {\r\n $( "#button" ).click(function() {\r\n $( "#effect" ).addClass( "newClass", 1000, callback );\r\n return false;\r\n });\r\n\r\n function callback() {\r\n setTimeout(function() {\r\n $( "#effect" ).removeClass( "newClass" );\r\n }, 1500 );\r\n }\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div class="toggler">\r\n <div id="effect" class="ui-corner-all">\r\n Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.\r\n <\/div>\r\n<\/div>\r\n\r\n<a href="#" id="button" class="ui-state-default ui-corner-all">Efekti \u00c7al\u0131\u015ft\u0131r<\/a>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nremoveClass<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/RJXMn\/<\/a><\/p>\n\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <style>\r\n .toggler { width: 500px; height: 200px; position: relative; }\r\n #button { padding: .5em 1em; text-decoration: none; }\r\n #effect { position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }\r\n .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }\r\n <\/style>\r\n <script>\r\n $(function() {\r\n $( "#button" ).click(function() {\r\n $( "#effect" ).removeClass( "newClass", 1000, callback );\r\n return false;\r\n });\r\n\r\n function callback() {\r\n setTimeout(function() {\r\n $( "#effect" ).addClass( "newClass" );\r\n }, 1500 );\r\n }\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div class="toggler">\r\n <div id="effect" class="newClass ui-corner-all">\r\n Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.\r\n <\/div>\r\n<\/div>\r\n\r\n<a href="#" id="button" class="ui-state-default ui-corner-all">Efekti \u00c7al\u0131\u015ft\u0131r<\/a>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nToggle Class<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/38Xrg\/<\/a><\/p>\n\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <style>\r\n .toggler { width: 500px; height: 200px; position: relative; }\r\n #button { padding: .5em 1em; text-decoration: none; }\r\n #effect {position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }\r\n .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }\r\n <\/style>\r\n <script>\r\n $(function() {\r\n $( "#button" ).click(function() {\r\n $( "#effect" ).toggleClass( "newClass", 1000 );\r\n return false;\r\n });\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div class="toggler">\r\n <div id="effect" class="newClass ui-corner-all">\r\n Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.\r\n <\/div>\r\n<\/div>\r\n\r\n<a href="#" id="button" class="ui-state-default ui-corner-all">Efekti \u00c7al\u0131\u015ft\u0131r<\/a>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nswitchClass<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/vBGpu\/<\/a><\/p>\n\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n <style>\r\n .toggler { width: 500px; height: 200px; position: relative; }\r\n #button { padding: .5em 1em; text-decoration: none; }\r\n #effect { position: relative; }\r\n .newClass { width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0; }\r\n .anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }\r\n <\/style>\r\n <script>\r\n $(function() {\r\n $( "#button" ).click(function(){\r\n $( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );\r\n $( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 );\r\n return false;\r\n });\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div class="toggler">\r\n <div id="effect" class="newClass ui-corner-all">\r\n Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.\r\n <\/div>\r\n<\/div>\r\n<a href="#" id="button" class="ui-state-default ui-corner-all">Efekti \u00c7al\u0131\u015ft\u0131r<\/a>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nColor Animation<\/h1>\n