18-kutu-ac.htm

<!DOCTYPE html>
<html>
    <head>
        <title>Kutu Aç</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" type="text/css" href="kutuphane/basic.css">
        <script src="kutuphane/basic.js" type="text/javascript" charset="utf-8"></script>

        <script>

        /*

        - Tasarımınız bir çok kutudan meydana gelebilir. Bu örnekte bir butona basarak,
        bir kutuyu görünür hale getirmeyi ve işimiz bittiğinde gizlemeyi öğreneceğiz.

        */
        
        var btnKutuAc
        
        var b1
        var btnKutuKapat
        var lblKutuAciklama

        // İlk çalışan fonksiyon.
        var start = function() {

            // NESNE: Kutu aç butonu
            btnKutuAc = createButton()
            that.text = "Kutu Aç"
            that.textColor = "rgba(255, 255, 255, 0.85)"
            that.minimal = 1
            that.center()
            btnKutuAc.onClick(kutuGoster)
            
            // NESNE: Açılan kutu
            b1 = createBox(0, 0, 350, 200)
            that.center()
            that.round = 10
            that.color = "lightgray"
            
            // NESNE: Kutunun kapatma tuşu
            b1.btnKutuKapat = createLabel(0, 0, 30, 30)
            that.text = "<b>x</b>"
            that.textAlign = "center"
            that.color = "white"
            that.round = 15
            that.top = 10
            that.right = 10
            that.opacity = 0.7
            that.onClick(kutuGizle)
            
            // NESNE: Kutunun ortasındaki yazı.
            b1.lblKutuAciklama = createLabel(0, 0, 180, 30)
            that.text = "Kutu"
            that.textAlign = "center"
            that.center()

            // Kutuyu gizle.
            kutuGizle()
            // Sayfa boyutu değiştiğinde, fonksiyonu çalıştır.
            page.onResize(tumunuOrtala)

        }
        
        // Kutuyu gösterir.
        var kutuGoster = function() {   
            b1.visible = 1
            
        }
        
        // Kutuyu gizler.
        var kutuGizle = function() {
            b1.visible = 0

        }

        // Sayfa boyutu değiştiğinde çalıştırılacak.
        var tumunuOrtala = function() {
            // Sayfadaki nesneleri yeniden ortala.
            btnKutuAc.center()
            b1.center()
        }

        </script>

    </head>
    <body>
        
    </body>
</html>