basicjs-turkce/47-tablo-olusturma.htm at main · bug7a/basicjs-turkce · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
    <head>

        <title>Tablo Oluşturma</title>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- DIŞARIDAN YÜKLENEN KÜTÜPHANE DOSYALARI -->
        <link rel="stylesheet" type="text/css" href="kutuphane/basic.css">
        <script src="kutuphane/basic.js" type="text/javascript" charset="utf-8"></script>

        <script>

        /*

            Bu tablo örneği, üç temel nesneden üretilmiştir.
            - Button (düğme)
            - Label (etiket)
            - Box (kutu)

            Bu teknik ile, ihtiyacın olan tüm diğer özellikleri de, bu algoritmaya ekleyebilirsiniz.

        */

        // DEĞİŞKENLER

        var TABLE_HEIGHT = 450
        var TITLE_HEIGHT = 40

        // Listeye eklenecek bilgiler.
        var people = [
            {id: "001", name: "Ahmet", email: "ahmet.test@gmail.com"},
            {id: "002", name: "Mehmet", email: "mehmet.test@gmail.com"},
            {id: "003", name: "Filiz", email: "filiz.test@gmail.com"},
            {id: "004", name: "Hasan", email: "hasan.test@gmail.com"},
            {id: "005", name: "Duygu", email: "duygu.test@gmail.com"},
            {id: "006", name: "Anıl", email: "anil.test@gmail.com"},
            {id: "007", name: "Dilara", email: "dilara.test@gmail.com"},
            {id: "008", name: "Alperen", email: "alp.test@gmail.com"},
        ]

        // Tablonun adı
        var tblListe

        // Ortak özellikler
        var propListeTitle = {color: "white", round: 4}


        // ÖZEL FONKSİYONLAR

        // İlk çalışan fonksiyon.
        var start = function() {

            page.color = "white"

            page.fit(600, 650)

            // NESNE: Liste ana taşıyıcı
            tblListe = createBox(10, 50, 580, TABLE_HEIGHT)
            that.border = 0
            that.round = 4

            // NESNE: Başlık 1
            tblListe.title1 = createButton(0, 0, 140, TITLE_HEIGHT)
            that.text = "Sıra"
            // Butonun üzerine gelindiğinde, el imleci çıkmasın.
            that.buttonElement.style.cursor = "default"
            that.prop(propListeTitle)
            that.color = "lightblue"

            // NESNE: Başlık 2
            tblListe.title2 = createButton(0, 0, 200, TITLE_HEIGHT)
            that.text = "İsim"
            that.buttonElement.style.cursor = "default"
            that.prop(propListeTitle)
            that.aline(tblListe.title1, "right")

            // NESNE: Başlık 3
            tblListe.title3 = createButton(0, 0, 240, TITLE_HEIGHT)
            that.text = "EPosta"
            that.buttonElement.style.cursor = "default"
            that.prop(propListeTitle)
            that.aline(tblListe.title2, "right")

            // NESNE: Tüm satırları taşıyan kaydırılabilir kutu.
            tblListe.b1 = createBox(0, TITLE_HEIGHT, tblListe.width, tblListe.height - TITLE_HEIGHT)
            that.color = "transparent"
            that.border = 0
            that.scrollY = 1

            // Her bir birim
            for (var i = 0; i < people.length; i++) {

                // NESNE: Bir satırı taşıyan kutu.
                tblListe.b1["b" + i] = createBox(0, (i * 30), tblListe.width, 30)
                that.border = 0
                // Her bir satıra, o kişinin bilgilerini ekle.
                that.person = people[i]
                that.onClick(itemClicked)

                // Bazı satırların rengi beyaz olsun (2'ye tam bölünebilen)
                if (i % 2) {
                    that.color = "white"
                }

                var item = tblListe.b1["b" + i]

                // NESNE: Sıra
                item.lblID = createLabel(tblListe.title1.left, 0, tblListe.title1.width, item.height)
                that.textAlign = "center"
                that.text = people[i].id

                // NESNE: İsim
                item.lblName = createLabel(tblListe.title2.left + 10, 0, tblListe.title2.width - 10, item.height)
                that.textAlign = "left"
                that.text = people[i].name

                // NESNE: EPosta
                item.lblEMail = createLabel(tblListe.title3.left + 10, 0, tblListe.title3.width - 10, item.height)
                that.textAlign = "left"
                that.text = people[i].email


            }


        }

        // DİĞER FONKSİYONLAR

        // Bir satıra basıldığında, ismini yazdır.
        var itemClicked = function(self) {

            print(self.person.name)

        }

        </script>

    </head>
    <body>

        <!-- HTML içeriği -->

    </body>
</html>