-
Notifications
You must be signed in to change notification settings - Fork 0
/
47-tablo-olusturma.htm
156 lines (114 loc) · 5.09 KB
/
47-tablo-olusturma.htm
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
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html>
<head>
<title>Tablo Oluşturma</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- LIBRARY FILES -->
<link rel="stylesheet" type="text/css" href="basic/basic.min.css">
<script src="basic/basic.min.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)
tblListe.add(that)
that.text = "Sıra"
// Butonun üzerine gelindiğinde, el imleci çıkmasın.
that.buttonElement.style.cursor = "default"
that.props(propListeTitle)
that.color = "lightblue"
// NESNE: Başlık 2
tblListe.title2 = createButton(0, 0, 200, TITLE_HEIGHT)
tblListe.add(that)
that.text = "İsim"
that.buttonElement.style.cursor = "default"
that.props(propListeTitle)
that.aline(tblListe.title1, "right")
// NESNE: Başlık 3
tblListe.title3 = createButton(0, 0, 240, TITLE_HEIGHT)
tblListe.add(that)
that.text = "EPosta"
that.buttonElement.style.cursor = "default"
that.props(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)
tblListe.add(that)
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)
tblListe.b1.add(that)
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)
item.add(that)
that.textAlign = "center"
that.text = people[i].id
// NESNE: İsim
item.lblName = createLabel(tblListe.title2.left + 10, 0, tblListe.title2.width - 10, item.height)
item.add(that)
that.textAlign = "left"
that.text = people[i].name
// NESNE: EPosta
item.lblEMail = createLabel(tblListe.title3.left + 10, 0, tblListe.title3.width - 10, item.height)
item.add(that)
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) {
println(self.person.name)
}
</script>
</head>
<body>
<!-- HTML content -->
</body>
</html>