-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy path33-basit-renk-secimi.htm
153 lines (112 loc) · 4.84 KB
/
33-basit-renk-secimi.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
<!DOCTYPE html>
<html>
<head>
<title>Basit Renk Seçimi</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>
/*
Figma veya bir arayüz tasarım aracı, basic.js kütüphanesi ile uyumlu çalışır.
Bu örnekte, tasarladığınız bir taslağı nasıl çalışan bir uygulamaya çevirdiğimizi anlatıyorum.
Bu örnek, başlangıç için uygundur.
Anlatım videosu;
https://www.youtube.com/watch?v=pM-iAn7DE7w
*/
// DEĞİŞKENLER
// Taşıyıcı kutu.
var b1
// ÖZEL FONKSİYONLAR
// İlk çalışan fonksiyon.
var start = function() {
// NESNE: Taşıyıcı Kutu.
b1 = createBox()
that.width = 377
that.height = 246
that.round = 13
that.border = 0
// Nesneyi ortala.
that.center()
// NESNE: Seçilen rengi gösteren daire.
b1.boxSelectedColor = createBox(143, 18, 90, 90)
that.color = "white"
that.border = 3
that.borderColor = "#141414"
that.round = 45
// NESNE: Seçilen rengin ismi.
b1.lblSelectedColorName = createLabel(0, 117, b1.width)
that.text = "white"
that.fontSize = 25
that.textAlign = "center"
// NESNE: Seçilen Rengin heksadesimal (HEX) renk kodu
b1.lblSelectedColorCode = createLabel(0, 146, b1.width)
that.text = "#FFFFFF"
that.fontSize = 16
that.textAlign = "center"
that.opacity = 0.7
// NESNE: Seçilen rengi işaretleyen kutu.
b1.boxSelectedButtonBack = createBox(0, 0, 43, 43)
that.round = 22
that.border = 2
that.borderColor = "#FE5D49"
that.color = "transparent"
that.visible = 0
// NESNE: Renk #1 düğmesi olarak kullanılan kutu.
b1.boxColor1 = createColorBtn(72, "#FE5D49", "red")
/*
// NOT: Tekrar eden kod, fonksiyona (createColorBtn) çevrildi.
b1.boxColor1 = createBox(72, 192, 35, 35)
that.round = 18
that.color = "#FE5D49"
that.colorName = "red"
that.borderColor = "#141414"
that.onClick(selectColor)
*/
// NESNE: Renk #2 düğmesi olarak kullanılan kutu.
b1.boxColor2 = createColorBtn(171, "#588ABE", "blue")
// NESNE: Renk #3 düğmesi olarak kullanılan kutu.
b1.boxColor3 = createColorBtn(270, "#5ABB9F", "green")
// Sayfa boyutu değiştirildiğinde, fonksiyonu çalıştır.
page.onResize(centerAll)
}
// DİĞER FONKSİYONLAR
// Bir renk seç.
var selectColor = function(clickedBox) {
// Seçilen rengin bilgilerini göster.
b1.boxSelectedColor.color = clickedBox.color
b1.lblSelectedColorName.text = clickedBox.colorName
b1.lblSelectedColorCode.text = clickedBox.color
// Düğmeyi, seçilmiş olarak işaretle.
b1.boxSelectedButtonBack.top = clickedBox.top - 4
b1.boxSelectedButtonBack.left = clickedBox.left - 4
// Nesneyi görünür yap.
b1.boxSelectedButtonBack.visible = 1
// Nesnenin kenarlık rengini, seçilen renk ile aynı yap.
b1.boxSelectedButtonBack.borderColor = clickedBox.color
}
// Renk düğmelerini oluşturmak için yazılan fonksiyon.
var createColorBtn = function(left, color, colorName) {
var btnObject = createBox(left, 192, 35, 35)
that.round = 18
that.color = color
// Rengin, isim bilgisini taşımak için yeni bir eleman oluştur.
that.colorName = colorName
// that.border = 1
// that.borderColor = "#141414"
that.onClick(selectColor)
// Oluşturulan nesnesi cevap ver.
return btnObject
}
// Sayfa (page) boyutu değitiğinde çalışıcak.
var centerAll = function() {
// Kutuyu yeniden ortala.
b1.center()
}
</script>
</head>
<body>
<!-- HTML içeriği -->
</body>
</html>