View Sidebar
Tasarımcılar için jQuery User Interface (jqUI)

Tasarımcılar için jQuery User Interface (jqUI)

Kasım 24, 2012 21:342 yorum

Çok klasik bir başlangıç olacak ancak zaman gerçekten su gibi akıp geçiyor. Zamanın kıymetini bilenlerden olmak dileği ile yeni haftaya, yeni yazımla merhaba diyelim..

jQuery User Interface (jQuery UI) kullanıcı arayüzü etkileşimleri, efektleri, widget’ları ve temalar ile jQuery Java Script kütüphanesi üstüne inşa edilmiş bir yapıdır. İster yüksek etkileşimli web uygulamaları inşa ediyor olun, isterse sadece basit bir formdaki tarih alanı için tarih seçici (datepicker) kullanacak olun, jQuery UI mükemmel bir araçtır.

jQuery UI adından da anlaşılacağı gibi bir kullanıcı arayüzü ekipmanı. Bu yüzden tema desteği olmazsa olmaz. Kullanacağınız widget’larınız için kendi temanızı oluşturmak veya hazır temalardan birini indirmek için ThemeRoller adresine gidiniz. Temaları kodumuza uygulamak çok kolaydır. Temanın sayfamıza CSS ile link ettiğimiz kısmında CSS dosyasının adresini değiştirmek yeterli olacaktır.

Örnek verecek olursak:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

// Bu kod temanın çağrıldığı kısımdır.
// Bu kısmı temanın adı ile değiştirdiğimiz zaman,
// yeni görünümü elde etmiş olacağız

<link rel="stylesheet" href="https://sitemizinadresi.com/ui/1.9.1/themes/start.css" />

Bu döküman jqUI tarafından sağlanan nimetlerin en basit kullanımlarını anlatacaktır. Detaylı kullanımlar, metodlar, parametreler için lütfen jqUI’nin ana sayfasını ziyaret ediniz. En basit kullanımları ile anlatacağım başlıklar şöyle olacak:

  • Etkileşimler
    • Draggable
    • Droppable
    • Resizable
    • Selectable
    • Sortable
  • Widget’lar
    • Accordion
    • Autocomplete
    • Button
    • Datepicker
    • Dialog
    • Menu
    • Progressbar
    • Slider
    • Spinner
    • Tabs
    • Tooltip
  • Efektler
    • Effect
    • Visibility
      • Show
      • Hide
      • Toggle
    • Class Animation
      • Add Class
      • Remove Class
      • Toggle Class
      • Switch Class

Etkileşimler

Draggable

Seçilen elemente sürükleme özelliği ekliyor.

Örnek uygulama -> https://jsfiddle.net/icntfan/fD7XB/

<!doctype html>

<html lang="tr">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

    <style>
    #suruklenebilir{ width: 150px; height: 150px; padding: 0.5em; }
    </style>
    <script>
    $(function() {
        $( "#suruklenebilir" ).draggable();
    });
    </script>
</head>
<body>

<div id="suruklenebilir" class="ui-widget-content">
    <p>Beni sürükle</p>
</div>

</body>
</html>​

$( “#suruklenebilir” ).draggable(); kod parçası ile “#suruklenebilir” id’sine sahip olan elemente sürüklenme özelliği ekledik.

Droppable

Sürüklenebilir elementler için, bırakılabilir alanlar oluşturmak için kullanılıyor.

Örnek uygulama -> https://jsfiddle.net/icntfan/QpQnu/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
    #suruklenebilir{ width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
    #biralilabilir{ width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
    </style>
    <script>
    $(function() {
        $( "#suruklenebilir" ).draggable();
        $( "#biralilabilir" ).droppable({
            drop: function( event, ui ) {
                $( this )
                    .addClass( "ui-state-highlight" )
                    .find( "p" )
                        .html( "Bırakıldı!" );
            }
        });
    });
    </script>
</head>
<body>

<div id="suruklenebilir" class="ui-widget-content">
    <p>Belirlenen hedefe beni bırak</p>
</div>

<div id="biralilabilir" class="ui-widget-header">
    <p>Buraya bırak</p>
</div>

</body>
</html>​

$( “#suruklenebilir” ).draggable(); kod parçası ile sürüklenme özelliği eklenmiş olan element için $( “#biralilabilir” ).droppable(); kod parçası ile bırakılabilinir bir olan oluşturduk. Bırak işlemi gerçekleştiği anda ise ekrana “Bırakıldı!” uyarısı verdik.

Resizable

Yeniden boyutlandırılabilir kutular oluşturmak için kullanılıyor.

Örnek uygulama -> https://jsfiddle.net/icntfan/rskcm/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
    #boyutlandir { width: 150px; height: 150px; padding: 0.5em; }
    #boyutlandir h3 { text-align: center; margin: 0; }
    </style>
    <script>
    $(function() {
        $( "#boyutlandir" ).resizable();
    });
    </script>
</head>
<body>

<div id="boyutlandir" class="ui-widget-content">
    <h3 class="ui-widget-header">Yeniden boyutlandirilabilir</h3>
</div>

</body>
</html>​

$( “#boyutlandir” ).resizable(); kod parçası ile yeniden boyutlandırılabilir bir element oluşturduk.

Selectable

Seçilebilir listeler oluşturmak için kullanılıyor.
Örnek uygulama -> https://jsfiddle.net/icntfan/GMbkS/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

    <style>
    #feedback { font-size: 1.4em; }
    #secilebilir .ui-selecting { background: #FECA40; }
    #secilebilir .ui-selected { background: #F39814; color: white; }
    #secilebilir { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #secilebilir li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
    </style>
    <script>
    $(function() {
        $( "#secilebilir" ).selectable();
    });
    </script>
</head>
<body>

<ol id="secilebilir">
    <li class="ui-widget-content">Madde 1</li>
    <li class="ui-widget-content">Madde 2</li>
    <li class="ui-widget-content">Madde 3</li>
    <li class="ui-widget-content">Madde 4</li>
    <li class="ui-widget-content">Madde 5</li>
    <li class="ui-widget-content">Madde 6</li>
    <li class="ui-widget-content">Madde 7</li>
</ol>

</body>
</html>​

$( “#secilebilir” ).selectable(); kodu ile “#secilebilir” id’sine sahip olan listemize seçilebilme özelliği ekledik.

Sortable

Siralanabilir kutular oluşturmak için kullanılıyor.
Örnek uygulama -> https://jsfiddle.net/icntfan/xcXXc/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
    #siralanabilir { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #siralanabilir li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
    #siralanabilir li span { position: absolute; margin-left: -1.3em; }
    </style>
    <script>
    $(function() {
        $( "#siralanabilir" ).sortable();
        $( "#siralanabilir" ).disableSelection();
    });
    </script>
</head>
<body>

<ul id="siralanabilir">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Madde 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Madde 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Madde 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Madde 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Madde 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Madde 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Madde 7</li>
</ul>

</body>
</html>​

$( “#siralanabilir” ).sortable(); ile listemizi seçilebilir hale getirirken, $( “#siralanabilir” ).disableSelection(); liste içinde bulunana metinlerin seçilmesini engellemiş oluyoruz.

Widget’lar

Accordion

Akordiyon tarzında kutular oluşturmak için kullanılır.

Örnek uygulama -> https://jsfiddle.net/icntfan/H294E/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script>
    $(function() {
        $( "#accordion" ).accordion();
    });
    </script>
</head>
<body>

<div id="accordion">
    <h3>Bölüm 1</h3>
    <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
    <h3>Bölüm 2</h3>
    <div>
        <p>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
        suscipit faucibus urna.
        </p>
    </div>
    <h3>Bölüm 3</h3>
    <div>
        <p>
        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
        Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
        ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
        lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
        </p>
        <ul>
            <li>Birinci madde </li>
            <li>İkinci Madde</li>
            <li>Üçüncü Madde</li>
        </ul>
    </div>
    <h3>Bölüm 4</h3>
    <div>
        <p>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus
        et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
        mauris vel est.
        </p>
        <p>
        Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos.
        </p>
    </div>
</div>

</body>
</html>​

$( “#accordion” ).accordion(); kodu ile ana kutumuz olan “#accordion” ID’li kutu için işlemi gerçekleştirdik. Metodun düzgün çalışması ana kutunun içindeki yapıya bağlıdır. Bu yapı şu şekilde olmalıdır.

<h3>1. Başlık Buraya</h3>
<div>1. İçerik Buraya</div>

<h3>2. Başlık Buraya</h3>
<div>2. İçerik Buraya</div>

Autocomplete

Gerçekten mükemmel bir araç. Input’a girdiğimiz değerlere uygun olarak Input’un hemen altında bir liste oluşturuyor. Anlayacağınız, neredeyse tek satır kod ile büyük işler başarmış oluyoruz. Gerçekten “write less, do more..” 🙂
Örnek uygulama -> https://jsfiddle.net/icntfan/fcggh/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script>
    $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });
    </script>
</head>
<body>

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" />
</div>

</body>
</html>​

Aşağıdaki kod ile input’a autocomplete özelliği verdik. Source parametresi için ise yukarıda tanımladığımız diziyi geçtik. Veri formatı olarak JSON’da kullanabiliriz. Daha detaylı kullanımlar için, lütfen jqUI’nin autocomplete sayfasına gidiniz.

$( "#tags" ).autocomplete({
            source: availableTags
        });

Button

jqUI stilinde butonlar oluşturmamıza yardımcı oluyor. Bu uygulamayı bir çok form elementi için de uygulayabiliriz.
Örnek uygulama -> https://jsfiddle.net/icntfan/rBYuc/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script>
    $(function() {
        $( "input[type=submit], a, button" )
            .button()
            .click(function( event ) {
                event.preventDefault();
            });
    });
    </script>
</head>
<body>

<button>Bir buton elementi</button>

<input type="submit" value="Gönder butonu" />

<a href="#">ve Bir link</a>

</body>
</html>​

.button() ile selector ile belirlenen tüm elementleri jqUI stilinde buton haline getirdik.

Datepicker

Diyelim ki üye kayıt formunda kullanıcıdan doğum tarihi bilgisini isteyeceğiz. İşte tam bu noktada jqUI datepicker imdadımıza yetişiyor.
Örnek uygulama -> https://jsfiddle.net/icntfan/hQs7T/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
    </script>
</head>
<body>

<p>Tarih: <input type="text" id="datepicker" /></p>

</body>
</html>​

$( “#datepicker” ).datepicker(); tek satırlık kod ile input’umuza datepicker niteliği kazandırdık.

Dialog

Uygulamamıza diyalog kutusu eklemek için kullanılır.
Örnek uygulama -> https://jsfiddle.net/icntfan/YeXXf/

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script>
    $(function() {
        $( "#diyalog" ).dialog();
    });
    </script>
    <style>
        #diyalog{
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="diyalog" title="Basit diyalog kutusu">
    <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>
</div>
</body>
</html>

$( “#diyalog” ).dialog(); ile <div> elementimizi bir diyalog kutusu haline dönüştürdük.

Menu

Çok basit bir şekilde açılır menüler yapmamızı sağlıyor.
Örnek uygulama -> https://jsfiddle.net/icntfan/UAfck/


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script>
    $(function() {
        $( "#menu" ).menu();
    });
    </script>
    <style>
    .ui-menu { width: 150px; }
    </style>
</head>
<body>

<ul id="menu">
    <li class="ui-state-disabled"><a href="#">İstanbul</a></li>
    <li><a href="#">Ankara</a></li>
    <li><a href="#">Adana</a></li>
    <li><a href="#">Konya</a></li>
    <li>
        <a href="#">İzmir</a>
        <ul>
            <li class="ui-state-disabled"><a href="#">Urla</a></li>
            <li><a href="#">Çeşme</a></li>
            <li><a href="#">Karaburun</a></li>
        </ul>
    </li>
    <li><a href="#">Adıyaman</a></li>
    <li>
        <a href="#">Sivas</a>
        <ul>
            <li>
                <a href="#">Çanakkale</a>
                <ul>
                    <li><a href="#">Biga</a></li>
                    <li><a href="#">Burhaniye</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Antalya</a>
                <ul>
                    <li><a href="#">Kaş</a></li>
                    <li><a href="#">Kemer</a></li>
                </ul>
            </li>
            <li><a href="#">Bursa</a></li>
        </ul>
    </li>
    <li class="ui-state-disabled"><a href="#">Kahramanmaraş</a></li>
</ul>

</body>
</html>​

$( “#menu” ).menu(); ile belirtilen listeyi bir açılır menü haline getiriyor.

Progressbar

İşte eğlenceli uygulamalardan bir tanesi daha. Bildiğimiz “loading” çubuğu :).
Örnek uygulama -> https://jsfiddle.net/icntfan/BV3ue/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script>
    $(function() {
        $( "#progressbar" ).progressbar({
            value: 37
        });
    });
    </script>
</head>
<body>

<div id="progressbar"></div>

</body>
</html>​

“#progressbar” ID’li kutumuzu bir loading bara dönüştürdük. “value: 37” kısmı ise loading barın değerini temsil ediyor. Dinamik olarak değer atayabilirsiniz.

Slider

Yatay veya dikey olarak kaydırma çubuğu eklememize yardımcı oluyor.
Örnek uygulama -> https://jsfiddle.net/icntfan/PD83p/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script>
    $(function() {
        $( "#slider" ).slider();
    });
    </script>
    <style>
        #slider{
        margin: 30px;
        }
    </style>
</head>
<body>

<div id="slider"></div>

</body>
</html>​

Herhangi bir oryantasyon belirtmediğimiz için, yatay olarak slider ekledik.

Spinner

Verilen parametreye göre sayılar arasında geçiş yapmamızı sağlıyor.

Örnek uygulama -> https://jsfiddle.net/icntfan/pAwhQ/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="/resources/demos/external/jquery.mousewheel.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script>
    $(function() {
        var spinner = $( "#spinner" ).spinner();

        $( "#disable" ).click(function() {
            if ( spinner.spinner( "option", "disabled" ) ) {
                spinner.spinner( "enable" );
            } else {
                spinner.spinner( "disable" );
            }
        });
        $( "#destroy" ).click(function() {
            if ( spinner.data( "ui-spinner" ) ) {
                spinner.spinner( "destroy" );
            } else {
                spinner.spinner();
            }
        });
        $( "#getvalue" ).click(function() {
            alert( spinner.spinner( "value" ) );
        });
        $( "#setvalue" ).click(function() {
            spinner.spinner( "value", 5 );
        });

        $( "button" ).button();
    });
    </script>
</head>
<body>

<p>
    <label for="spinner">Bir değer seçiniz:</label>
    <input id="spinner" name="value" />
</p>

<p>
    <button id="disable">Toggle disable/enable</button>
    <button id="destroy">Toggle widget</button>
</p>

<p>
    <button id="getvalue">Değeri getir</button>
    <button id="setvalue">Değeri 5 e set et</button>
</p>

</body>
</html>​

Kodumuzu incelediğimizde, toggle enable/disable butonu slider widget’ını aktif veya pasif hale getiriyor. Değeri getir butonuna bastığımızda o anki değer uyarı olarak ekrana yansıtılıyor. 5’e set etmek için ise, Değeri 5’e set et düğmesine basıyoruz. Toggle widget ise, slider widget’ını normal input ile slider arasında dönüştürmek için kullanılıyor.

Tabs

Çok kısa bir şekilde tab menü uygulamaları yapmak için kullanıyoruz.
Örnek uygulama -> https://jsfiddle.net/icntfan/ahZgZ/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script>
    $(function() {
        $( "#tabs" ).tabs();
    });
    </script>
</head>
<body>

<div id="tabs" style="margin:30px; font-size:12px;">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <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>
    </div>
    <div id="tabs-2">
        <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>
    </div>
    <div id="tabs-3">
        <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>
        <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>
    </div>
</div>

</body>
</html>​

$( “#tabs” ).tabs(); ile direkt tab menü haline dönüştürüyoruz. Uygulamanın çalışması için kullanacağımız html kod yapısı şu şekilde olmalıdır.

<div id="ana_kutu">
    <ul>
        <li><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
    </ul>
    <div id="tab-1"></div>
    <div id="tab-2"></div>
<div>

Tooltip

Tooltip’ler herhangi bir elemente eklenebilir. Elementin üzerine geldiğinizde title özelliğini ipucu olarak ekrana yansıtır.

Örnek uygulama -> https://jsfiddle.net/icntfan/Xf8yU/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script>
    $(function() {
        $( document ).tooltip();
    });
    </script>
    <style>
    label {
        display: inline-block;
        width: 5em;
    }
    </style>
</head>
<body>

<p><a href="#" title="Bu bir ipucudur">Tooltip'ler</a> herhangi bir elemente eklenebilir, Elementin üzerine geldiğinizde title özelliğini ipucu olarak ekrana yansıtır.</p>
<p><label for="age">Yaşınız:</label><input id="age" title="Yaşınızı bu alana giriniz" /></p>

</body>
</html>​

$( document ).tooltip(); ile dökümanda title özelliğine sahip tüm elementler için tooltip widget’i oluşturduk.

Efektler

Effect

Efekt jqUI bünyesinde barınan bir çok efekti çalıştırmamızı sağlıyor.

Örnek uygulama -> https://jsfiddle.net/icntfan/mhVPR/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
        .toggler { width: 500px; height: 200px; position: relative; }
        #button { padding: .5em 1em; text-decoration: none; }
        #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
        #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
        .ui-effects-transfer { border: 2px dotted gray; }
    </style>
    <script>
    $(function() {
        // Şu anda seçilmiş olan efekti uygula
        function runEffect() {
            // Efektin tipini getir
            var selectedEffect = $( "#effectTypes" ).val();

            // Bir çok efekt parametreye gerek olmadan kullanılabilir.
            var options = {};
            // Bazı efektler özel parametreler gerektirir
            if ( selectedEffect === "scale" ) {
                options = { percent: 0 };
            } else if ( selectedEffect === "transfer" ) {
                options = { to: "#button", className: "ui-effects-transfer" };
            } else if ( selectedEffect === "size" ) {
                options = { to: { width: 200, height: 60 } };
            }

            // efekti çalıştır
            $( "#effect" ).effect( selectedEffect, options, 500, callback );
        };

        // gizlenmiş kutuyu geri çağırıyoruz
        function callback() {
            setTimeout(function() {
                $( "#effect" ).removeAttr( "style" ).hide().fadeIn();
            }, 1000 );
        };

        // açılır menüden efekti seçiyoruz
        $( "#button" ).click(function() {
            runEffect();
            return false;
        });
    });
    </script>
</head>
<body>

<div class="toggler">
    <div id="effect" class="ui-widget-content ui-corner-all">
        <h3 class="ui-widget-header ui-corner-all">Efekt</h3>
        <p>
            Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
        </p>
    </div>
</div>

<select name="effects" id="effectTypes">
    <option value="blind">Blind</option>
    <option value="bounce">Bounce</option>
    <option value="clip">Clip</option>
    <option value="drop">Drop</option>
    <option value="explode">Explode</option>
    <option value="fade">Fade</option>
    <option value="fold">Fold</option>
    <option value="highlight">Highlight</option>
    <option value="puff">Puff</option>
    <option value="pulsate">Pulsate</option>
    <option value="scale">Scale</option>
    <option value="shake">Shake</option>
    <option value="size">Size</option>
    <option value="slide">Slide</option>
    <option value="transfer">Transfer</option>
</select>

<a href="#" id="button" class="ui-state-default ui-corner-all">Efekti Çalıştır</a>

</body>
</html>​

Kodumuzu incelediğimizde bir çok efektin parametreye ihtiyaç duymadan direkt çalıştırılabildiğini görebilirsiniz. Ancak bazı efektler özel parametreler gerektiriyor. Kod içerisinde if deyimi içerisinde yaptığımız tanımlamalar bu yüzdendir.

Show

Show jqUI bünyesinde barınan bir çok efekti çalıştırmamızı sağlıyor. Kullanımı effect ile tamamen aynıdır ancak tek farkı gizlenmiş olan elementi gösteriyor olmasıdır.

Örnek uygulama -> https://jsfiddle.net/icntfan/EBhdn/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
        .toggler { width: 500px; height: 200px; position: relative; }
        #button { padding: .5em 1em; text-decoration: none; }
        #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
        #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
        .ui-effects-transfer { border: 2px dotted gray; }
    </style>
    <script>
    $(function() {
        // Şu anda seçilmiş olan efekti uygula
        function runEffect() {
            // Efektin tipini getir
            var selectedEffect = $( "#effectTypes" ).val();

            // Bir çok efekt parametreye gerek olmadan kullanılabilir.
            var options = {};
            // Bazı efektler özel parametreler gerektirir
            if ( selectedEffect === "scale" ) {
                options = { percent: 0 };
            } else if ( selectedEffect === "transfer" ) {
                options = { to: "#button", className: "ui-effects-transfer" };
            } else if ( selectedEffect === "size" ) {
                options = { to: { width: 200, height: 60 } };
            }

            // efekti çalıştır
            $( "#effect" ).show( selectedEffect, options, 500, callback );
        };

        // gizlenmiş kutuyu geri çağırıyoruz
        function callback() {
            setTimeout(function() {
                $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
            }, 1000 );
        };

        // açılır menüden efekti seçiyoruz
        $( "#button" ).click(function() {
            runEffect();
            return false;
        });
$( "#effect" ).hide();
    });
    </script>
</head>
<body>

<div class="toggler">
    <div id="effect" class="ui-widget-content ui-corner-all">
        <h3 class="ui-widget-header ui-corner-all">Efekt</h3>
        <p>
            Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
        </p>
    </div>
</div>

<select name="effects" id="effectTypes">
    <option value="blind">Blind</option>
    <option value="bounce">Bounce</option>
    <option value="clip">Clip</option>
    <option value="drop">Drop</option>
    <option value="explode">Explode</option>
    <option value="fade">Fade</option>
    <option value="fold">Fold</option>
    <option value="highlight">Highlight</option>
    <option value="puff">Puff</option>
    <option value="pulsate">Pulsate</option>
    <option value="scale">Scale</option>
    <option value="shake">Shake</option>
    <option value="size">Size</option>
    <option value="slide">Slide</option>
    <option value="transfer">Transfer</option>
</select>

<a href="#" id="button" class="ui-state-default ui-corner-all">Efekti Çalıştır</a>

</body>
</html>​

Kodumuzu incelediğimizde bir çok efektin parametreye ihtiyaç duymadan direkt çalıştırılabildiğini görebilirsiniz. Ancak bazı efektler özel parametreler gerektiriyor. Kod içerisinde if deyimi içerisinde yaptığımız tanımlamalar bu yüzdendir.

Hide

Hide jqUI bünyesinde barınan bir çok efekti çalıştırmamızı sağlıyor. Kullanımı Show ile tamamen aynıdır ancak tek farkı görünür olan elementi gizliyor olmasıdır.

Örnek uygulama -> https://jsfiddle.net/icntfan/79qEK/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
        .toggler { width: 500px; height: 200px; position: relative; }
        #button { padding: .5em 1em; text-decoration: none; }
        #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
        #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
        .ui-effects-transfer { border: 2px dotted gray; }
    </style>
    <script>
    $(function() {
        // Şu anda seçilmiş olan efekti uygula
        function runEffect() {
            // Efektin tipini getir
            var selectedEffect = $( "#effectTypes" ).val();

            // Bir çok efekt parametreye gerek olmadan kullanılabilir.
            var options = {};
            // Bazı efektler özel parametreler gerektirir
            if ( selectedEffect === "scale" ) {
                options = { percent: 0 };
            } else if ( selectedEffect === "transfer" ) {
                options = { to: "#button", className: "ui-effects-transfer" };
            } else if ( selectedEffect === "size" ) {
                options = { to: { width: 200, height: 60 } };
            }

            // efekti çalıştır
            $( "#effect" ).hide( selectedEffect, options, 500, callback );
        };

        // gizlenmiş kutuyu geri çağırıyoruz
        function callback() {
            setTimeout(function() {
                $( "#effect" ).removeAttr( "style" ).hide().fadeIn();
            }, 1000 );
        };

        // açılır menüden efekti seçiyoruz
        $( "#button" ).click(function() {
            runEffect();
            return false;
        });
$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
    });
    </script>
</head>
<body>

<div class="toggler">
    <div id="effect" class="ui-widget-content ui-corner-all">
        <h3 class="ui-widget-header ui-corner-all">Efekt</h3>
        <p>
            Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
        </p>
    </div>
</div>

<select name="effects" id="effectTypes">
    <option value="blind">Blind</option>
    <option value="bounce">Bounce</option>
    <option value="clip">Clip</option>
    <option value="drop">Drop</option>
    <option value="explode">Explode</option>
    <option value="fade">Fade</option>
    <option value="fold">Fold</option>
    <option value="highlight">Highlight</option>
    <option value="puff">Puff</option>
    <option value="pulsate">Pulsate</option>
    <option value="scale">Scale</option>
    <option value="shake">Shake</option>
    <option value="size">Size</option>
    <option value="slide">Slide</option>
    <option value="transfer">Transfer</option>
</select>

<a href="#" id="button" class="ui-state-default ui-corner-all">Efekti Çalıştır</a>

</body>
</html>​

Kodumuzu incelediğimizde bir çok efektin parametreye ihtiyaç duymadan direkt çalıştırılabildiğini görebilirsiniz. Ancak bazı efektler özel parametreler gerektiriyor. Kod içerisinde if deyimi içerisinde yaptığımız tanımlamalar bu yüzdendir.

Toggle

Toggle jqUI bünyesinde barınan bir çok efekti çalıştırmamızı sağlıyor. Kullanımı effect ile tamamen aynıdır ancak tek farkı gizlenmiş olan elementi gösteriyor, gözüken elementi gizliyor olmasıdır.
Örnek uygulama -> https://jsfiddle.net/icntfan/2UWsP/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
    .toggler {
        width: 500px;
        height: 200px;
    }
    #button {
        padding: .5em 1em;
        text-decoration: none;
    }
    #effect {
        position: relative;
        width: 240px;
        height: 135px;
        padding: 0.4em;
    }
    #effect h3 {
        margin: 0;
        padding: 0.4em;
        text-align: center;
    }
    </style>
    <script>
    $(function() {
        // Şu anda seçilmiş olan efekti uygula
        function runEffect() {
            // Efektin tipini getir
            var selectedEffect = $( "#effectTypes" ).val();

            // Bir çok efekt parametreye gerek olmadan kullanılabilir.
            var options = {};
            // Bazı efektler özel parametreler gerektirir
            if ( selectedEffect === "scale" ) {
                options = { percent: 0 };
            } else if ( selectedEffect === "size" ) {
                options = { to: { width: 200, height: 60 } };
            }

            // efekti çalıştır
            $( "#effect" ).toggle( selectedEffect, options, 500 );
        };

        // açılır menüden efekti seçiyoruz
        $( "#button" ).click(function() {
            runEffect();
            return false;
        });
    });
    </script>
</head>
<body>

<div class="toggler">
    <div id="effect" class="ui-widget-content ui-corner-all">
        <h3 class="ui-widget-header ui-corner-all">Toggle</h3>
        <p>
            Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
        </p>
    </div>
</div>

<select name="effects" id="effectTypes">
    <option value="blind">Blind</option>
    <option value="bounce">Bounce</option>
    <option value="clip">Clip</option>
    <option value="drop">Drop</option>
    <option value="explode">Explode</option>
    <option value="fold">Fold</option>
    <option value="highlight">Highlight</option>
    <option value="puff">Puff</option>
    <option value="pulsate">Pulsate</option>
    <option value="scale">Scale</option>
    <option value="shake">Shake</option>
    <option value="size">Size</option>
    <option value="slide">Slide</option>
</select>

<a href="#" id="button" class="ui-state-default ui-corner-all">Efekti Çalıştır</a>

</body>
</html>​

Kodumuzu incelediğimizde bir çok efektin parametreye ihtiyaç duymadan direkt çalıştırılabildiğini görebilirsiniz. Ancak bazı efektler özel parametreler gerektiriyor. Kod içerisinde if deyimi içerisinde yaptığımız tanımlamalar bu yüzdendir.

addClass

CSS sınıfları arasında animasyonlu bir şekilde geçiş yapmamızı sağlar.
Örnek uygulama -> https://jsfiddle.net/icntfan/mqbsc/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
        .toggler { width: 500px; height: 200px; position: relative; }
        #button { padding: .5em 1em; text-decoration: none; }
        #effect { width: 240px;  padding: 1em;  font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
        .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
    </style>
    <script>
    $(function() {
        $( "#button" ).click(function() {
            $( "#effect" ).addClass( "newClass", 1000, callback );
            return false;
        });

        function callback() {
            setTimeout(function() {
                $( "#effect" ).removeClass( "newClass" );
            }, 1500 );
        }
    });
    </script>
</head>
<body>

<div class="toggler">
    <div id="effect" class="ui-corner-all">
            Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
    </div>
</div>

<a href="#" id="button" class="ui-state-default ui-corner-all">Efekti Çalıştır</a>

</body>
</html>​

“#effect” ID’sine sahip kutumuza 1000 mili saniye yani 1 saniye içerisinde geçişini tamamlamak üzere “#newclass” CSS sınıfını atadık. İşlem bittikten sonra ise, kutumuzu eski haline getirmek için callback fonksiyonumuzu çağırdık.

removeClass

Geçerli CSS sınıfını animasyonlu bir şekilde iptal eder.
Örnek uygulama -> https://jsfiddle.net/icntfan/RJXMn/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
    .toggler { width: 500px; height: 200px; position: relative; }
    #button { padding: .5em 1em; text-decoration: none; }
    #effect { position: relative;  width: 240px;  padding: 1em;  letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
    .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
    </style>
    <script>
    $(function() {
        $( "#button" ).click(function() {
            $( "#effect" ).removeClass( "newClass", 1000, callback );
            return false;
        });

        function callback() {
            setTimeout(function() {
                $( "#effect" ).addClass( "newClass" );
            }, 1500 );
        }
    });
    </script>
</head>
<body>

<div class="toggler">
    <div id="effect" class="newClass ui-corner-all">
        Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
    </div>
</div>

<a href="#" id="button" class="ui-state-default ui-corner-all">Efekti Çalıştır</a>

</body>
</html>​

“#effect” ID’sine sahip kutumuza 1000 mili saniye yani 1 saniye içerisinde geçişini tamamlamak üzere CSS sınıfını sildik. İşlem bittikten sonra ise, kutumuzu eski haline getirmek için callback fonksiyonumuzu çağırdık.

Toggle Class

Add Class ve Remove Class metotlarının birleştirilmiş halidir. Animasyonlu şekilde CSS sınıfının var olduğu ve silindiği durumlar arasında geçiş yapar.
Örnek uygulama -> https://jsfiddle.net/icntfan/38Xrg/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
    .toggler { width: 500px; height: 200px; position: relative; }
    #button { padding: .5em 1em; text-decoration: none; }
    #effect {position: relative;  width: 240px;  padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
    .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
    </style>
    <script>
    $(function() {
        $( "#button" ).click(function() {
            $( "#effect" ).toggleClass( "newClass", 1000 );
            return false;
        });
    });
    </script>
</head>
<body>

<div class="toggler">
    <div id="effect" class="newClass ui-corner-all">
            Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
    </div>
</div>

<a href="#" id="button" class="ui-state-default ui-corner-all">Efekti Çalıştır</a>

</body>
</html>​

“#effect” ID’sine sahip kutumuza 1000 mili saniye yani 1 saniye içerisinde geçişini tamamlamak üzere CSS sınıfını sildik. İşlem bittikten sonra ise, tekrar “Efekti Çalıştır” düğmesine tıklarsak yine aynı şekilde CSS sınıfını ekleyecektir.

switchClass

Belirlenen CSS sınıfları arasında animasyonlu bir şekilde geçiş yapar.
Örnek uygulama -> https://jsfiddle.net/icntfan/vBGpu/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
    .toggler { width: 500px; height: 200px; position: relative; }
    #button { padding: .5em 1em; text-decoration: none; }
    #effect { position: relative; }
    .newClass { width: 240px;  padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0; }
    .anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
    </style>
    <script>
    $(function() {
        $( "#button" ).click(function(){
            $( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );
            $( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 );
            return false;
        });
    });
    </script>
</head>
<body>

<div class="toggler">
    <div id="effect" class="newClass ui-corner-all">
            Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
    </div>
</div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Efekti Çalıştır</a>

</body>
</html>​

“Efekti Çalıştır” butonuna ilk tıkladığımızda DOM dökümanda sadece “newClass” sınıfının tanımlı olması sebebiyle, “newClass” sınıfından “anotherNewClass” sınıfına geçiş sağlanıyor. İkinci tıklamada ise, dökümanda sadece “anotherNewClass” sınıfı bulunduğu için “anotherNewClass” sınıfından “newClass” sınıfına geçiş sağlanıyor.

Color Animation

Yaptığımız basit olarak, jQuery’deki .animate() metodunu kullanarak renk geçişi sağlamak.
Örnek uygulama -> https://jsfiddle.net/icntfan/TARtQ/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
        .toggler { width: 500px; height: 200px; position: relative; }
        #button { padding: .5em 1em; text-decoration: none; }
        #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
        #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
    </style>
    <script>
    $(function() {
        var state = true;
        $( "#button" ).click(function() {
            if ( state ) {
                $( "#effect" ).animate({
                    backgroundColor: "#aa0000",
                    color: "#fff",
                    width: 500
                }, 1000 );
            } else {
                $( "#effect" ).animate({
                    backgroundColor: "#fff",
                    color: "#000",
                    width: 240
                }, 1000 );
            }
            state = !state;
        });
    });
    </script>
</head>
<body>

<div class="toggler">
    <div id="effect" class="ui-widget-content ui-corner-all">
        <h3 class="ui-widget-header ui-corner-all">Oynat Uğurcum</h3>
        <p>
            Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
        </p>
    </div>
</div>

<a href="#" id="button" class="ui-state-default ui-corner-all">Efektler arasında geçiş yap</a>

</body>
</html>​

.animate() metodunu kullanarak renk geçişlerini sağlıyoruz.

Faydalanılan kaynaklar:
1-) JQuery UI Demos -> CSS | https://jqueryui.com/demos/

2 Yorum

  • Droppable konusuyla alakalı:

    Bıraktığımız nesneyi geri çıkarttığımız zaman bu durumu işleyebileceğimiz bir olay oluşturulabiliyor mu?

    • Ulvi

      Dediğinizi .out() metodu ile yapmak mümkün. Kod ile örnek vermek gerekirse:

      $( "#droppable" ).droppable({
                  out: function( event, ui ) {
                      alert("Selam!");
                  }
              });
      

      Elementimizi droppable alandan dışarı çıkarttığımız zaman “Selam!” şeklinde uyarı verecektir. Bu metodun çalışması gereken zamanı, hassaslık derecesi “tolerance” ile belirtiyoruz. Bu değer 4 adet seçeneğe sahiptir. Bunlar:

      • “fit”: Draggable elemetimiz droppable alandan tamamen çıkınca
      • “intersect”: Draggable elemetimizin %50’si droppable alandan çıkınca
      • “pointer”: Fare işaretçisi droppable alandan tamamen çıkınca
      • “touch”: Draggable elemetimiz droppable alandan herhangi bir şekilde çok az miktarda çıksa bile

      Tolerance değerimiz varsayılan olarak “intersect” olarak ayarlanmıştır.

      $( "#droppable" ).droppable({ tolerance: "fit" });
      

      Şeklinde sayfaya eklenme aşamasında ayarlama işlemini yapabiliyoruz. Sayfaya eklendikten sonra ise get ve set metotları şu şekilde işliyor.

      // get
      var tolerance = $( "#droppable" ).droppable( "option", "tolerance" );
       
      // set
      $( "#droppable" ).droppable( "option", "tolerance", "fit" );
      

Yanıtla Ulvi