-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path52-acilir-icerikler.htm
318 lines (232 loc) · 11.5 KB
/
52-acilir-icerikler.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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
<!DOCTYPE html>
<html>
<head>
<title>Açılır İçerik</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>
/*
AÇILIR İÇERİKLER (AKORDİYON MENÜ)
- accordion, tüm nesneyi taşıyan kutu.
- Bu nesnede, butonlar ve içerikler iki farklı çeşit olarak oluşturulmuş.
- Kapalı olan içeriklerin yüksekliği 0px olarak belirlenmiş. Böylece görünmüyorlar.
- Tüm buton ve içeriklerin taşıyıcı nesneleri bir dizi değişkeninde tutuluyor. Gerektiğinde, nesnelere tekar ulaşılabilmesi için kullanılıyor.
- Bir butona basıldığında, o buton ile ilişkili içeriğin yüksekliği normal boyutuna ayarlanıyor.
- Bir önceki seçili buton, eski rengine getiriliyor ve içeriğin boyutu 0px olarak belirleniyor.
- Boyutlardaki bu değişiklikten sonra, tüm nesnelerin konumu tekrar ayarlanıyor.
- Buton ve içerikleri yeniden konumlamak için tüm nesnelere, dizi değişkeninden ulaşılıyor.
- Buton isimleri, accordionButtons isimli diziden alınıyor.
- Her bir içeriği oluşturmak için bir fonksiyon oluşturdum.
Böylece; her bir içerik, birbirinden bağımsız ve özel olarak oluşturulabilir.
*/
// Akordiyon menü, içerik boyutları
var ACCORDION_CONTENT_WIDTH = 450
// İlk sayfa taşıyıcı
var a0
// Akordiyon menünün kullanılacak ismi
var accordion
// Akordiyon menü, butonlar
var accordionButtons = [
{id: 1, name: "Bilim"},
{id: 2, name: "Teknoloji"},
{id: 3, name: "Sanat"}
]
// Oluşturulan nesnelerin listesi.
accordionItems = []
// İlk çalışan fonksiyon.
var start = function() {
// BOX: İlk sayfayı taşıyan kutu.
a0 = createBox(0, 0, page.width, page.height)
that.color = "white"
// BOX: Akordeon taşıyıcı
a0.accordion = createBox(0, 0, ACCORDION_CONTENT_WIDTH, 0)
a0.add(that)
that.color = "transparent"
// Taşıyıcınını konum değişikliği, hareketli olsun.
that.setMotion("top 0.5s")
// a0.accordion nesnesi, accordion olarak da kullanılabilsin.
accordion = a0.accordion
// Açık olan içeriğin, sıra numarası.
accordion.selectedButtonIndex = 0
// Butonları ve içeriklerini oluştur.
for (var i = 0; i < accordionButtons.length; i++) {
// BOX: Buton taşıyıcı
accordion["btn" + i] = createBox(0, 0, ACCORDION_CONTENT_WIDTH, 80)
accordion.add(that)
that.round = 8
that.color = "white"
// ÖZEL DEĞİŞKEN
that.indexNumber = i
that.setMotion("top 0.5s, background-color 0.5s")
// Üzerine gelindiğinde, basılabilir imleci çıksın.
that.element.style.cursor = "pointer"
that.onClick(accordionBtnClicked)
// LABEL: Buton yazısı
accordion["btn" + i].lblTitle = createLabel(40, 22, "auto", "auto")
accordion["btn" + i].add(that)
that.text = accordionButtons[i].name
that.textColor = "rgba(0, 0, 0, 0.6"
that.fontSize = 25
// IMAGE: Buton ok resmi
accordion["btn" + i].imgIcon = createImage(0, 0, 25, 25)
accordion["btn" + i].add(that)
that.load("images/52/ok.png")
that.right = 30
that.top = 30
that.opacity = 0.1
that.setMotion("opacity 0.5s")
// BOX: Buton arkaplan rengi biraz koyulaştıran katman
accordion["btn" + i].boxBlack = createBox(0, 0, ACCORDION_CONTENT_WIDTH, 80)
accordion["btn" + i].add(that)
that.round = 8
that.border = 0
that.color = "rgba(0, 0, 0, 0.07)"
// BOX: İçerik kutusu
accordion["box" + i] = createBox(0, 0, ACCORDION_CONTENT_WIDTH, 0)
accordion.add(that)
that.border = 0
that.round = 8
that.setMotion("top 0.5s, height 0.5s, background-color 0.5s")
// Nesneleri bir diziye ekle.
// Buton nesnesini ekle.
accordionItems.push(accordion["btn" + i])
// İçerik nesnesini ekle.
accordionItems.push(accordion["box" + i])
}
// İçerik taşıyıcıların , içlerini doldur.
createBox0Content()
createBox1Content()
createBox2Content()
accordionBtnClicked(accordion.btn0)
//accordionBtnClicked(accordion.btn1)
// Sayfa boyutu değiştiğinde, nesneyi yeniden ortala.
page.onResize(pageResized)
}
// DİĞER FONKSİYONLAR
var pageResized = function() {
// İlk sayfanın boyutunu yeniden düzenle.
a0.width = page.width
a0.height = page.height
// CSS animasyonunu devre dışı bırak.
accordion.dontMotion()
// Nesneyi animasyonsuz olarak ortala.
accordion.center()
}
// Bir içerik açıldığında, boyut değişir ve yeniden konumlandırmak gerekir.
var refreshAccordion = function() {
var objectHeight = 0
// Tüm button ve içerikler için,
for (var i = 0; i < accordionItems.length; i++) {
// Nesnenin yukarıya olan mesafesini belirle.
accordionItems[i].top = objectHeight
// Sadece yüksekliği 0px olmayan nesneleri, hesaba dahil et.
if (accordionItems[i].height != 0) {
objectHeight += accordionItems[i].height + 5
}
}
accordion.height = objectHeight
accordion.center()
}
// Butona basıldığında, gereken işlemleri yap.
var accordionBtnClicked = function(self) {
// Kullanılacak nesnelere, daha kısa isimleri ver.
var oldBtn = accordion["btn" + accordion.selectedButtonIndex]
var oldBox = accordion["box" + accordion.selectedButtonIndex]
var newBtn = accordion["btn" + self.indexNumber]
var newBox = accordion["box" + self.indexNumber]
// Eski seçimi temizle.
oldBox.opened = 0
oldBox.height = 0
oldBtn.imgIcon.opacity = 0.1
oldBtn.color = "white"
oldBtn.element.style.cursor = "pointer"
// Basılan içeriği seç.
newBox.opened = 1
newBox.height = newBox.maxHeight
newBtn.imgIcon.opacity = 0
newBtn.color = newBox.color
newBtn.element.style.cursor = "default"
// Seçilen içeriğin sıra numarasını sakla.
accordion.selectedButtonIndex = self.indexNumber
// Yeniden konumlandır.
refreshAccordion()
}
var createBox0Content = function() {
var box = accordion.box0
box.color = "Lavender"
// IMAGE: Arkaplan resmi
box.imgBackground = createImage()
box.add(that)
that.load("images/52/scie3.png")
that.autoSize = 2
// NOT: Kapanırken, hareket etmemesi için bottom kullanılmamıştır.
that.top = 70
that.right = -50
that.opacity = 0.1
// LABEL: İçerik yazısı
box.lblContent = createLabel(0, 0, box.width, "auto")
box.add(that)
that.text = "Türk Dil Kurumu'na göre bilim, evrenin ya da olayların bir bölümünü konu olarak seçen, deneysel yöntemlere ve gerçekliğe dayanarak yasalar çıkarmaya çalışan düzenli bilgidir. Daha basit bir anlatımla içinde bulunduğumuz hayatı açıklama çabaları olarak tanımlayabiliriz."
that.textAlign = "left"
that.textColor = "rgba(0, 0, 0, 0.4"
that.space = 40
calculateContentHeight(box, box.lblContent)
}
var createBox1Content = function() {
var box = accordion.box1
box.color = "PaleTurquoise"
// IMAGE: İçerik resmi
box.imgBackground = createImage()
box.add(that)
that.load("images/52/tech2.png")
that.right = 40
that.width = 120
that.height = 120
that.opacity = 0.7
// LABEL: İçerik yazısı
box.lblContent = createLabel(0, 0, box.width - 140, "auto")
box.add(that)
that.text = "Teknoloji, insanoğlunun gereklerine uygun yardımcı alet ve araçların yapılması ya da üretilmesi için gerekli bilgi ve yetenektir. Teknoloji ayrıca, bir sanayi dalıyla ilgili üretim yöntemlerini, kullanılan araç, gereç ve aletleri kapsayan bilgidir."
that.textAlign = "left"
that.textColor = "rgba(0, 0, 0, 0.4"
that.space = 40
calculateContentHeight(box, box.lblContent, function(box, label) {
box.imgBackground.top = (box.maxHeight - box.imgBackground.height ) / 2
})
// Bu kutunun içini burada doldur.
}
var createBox2Content = function() {
var box = accordion.box2
box.color = "Bisque"
// LABEL: İçerik yazısı
box.lblContent = createLabel(0, 0, box.width, "auto")
box.add(that)
that.text = "Sanat, insanın duygu, düşünce ve hayallerini, somut ve soyut malzemelerle yaratıcı gücünü kullanarak kişiyi etkileyecek biçimde anlatmasıdır. Sanat, en genel anlamıyla yaratıcılığın ve hayal gücünün ifadesi olarak anlaşılır."
that.textAlign = "left"
that.textColor = "rgba(0, 0, 0, 0.4"
that.space = 40
calculateContentHeight(box, box.lblContent)
// Bu kutunun içini burada doldur.
}
var calculateContentHeight = function(box, label, onResizeFunc = function() {}) {
box.height = 0
box.maxHeight = 0
box.opened = 0
label.onResize(function(self) {
box.maxHeight = self.height
if (box.opened == 1) {
box.height = box.maxHeight
refreshAccordion()
}
onResizeFunc(box, label)
});
}
</script>
</head>
<body>
<!-- HTML content -->
</body>
</html>