-
Notifications
You must be signed in to change notification settings - Fork 0
/
19-objects-align.htm
170 lines (129 loc) · 5.24 KB
/
19-objects-align.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
<!DOCTYPE html>
<html>
<head>
<title>Nesneleri Hizalamak</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
/*
- Nesnelerin, istenilen konuma hizalanması.
*/
var btnA, btnA1, btnA2, btnA3, btnA4
var btnB, btnB1, btnB2
var btnC, btnC1, btnC2
var btnD, btnD1, btnD2
var btnE, btnE1, btnE2, btnE3, btnE4
// İlk çalışan fonksiyon.
var start = function() {
// Sol üste konumlandır.
btnA = createButton()
that.text = "A"
that.color = "tomato"
that.top = 0
that.left = 0
// btnA nın sağına, 10px boşluk bırakarak konumlandır.
btnA1 = createButton()
that.text = "A1"
that.aline(btnA, "right", 10)
// btnA1 in sağına, 10px boşluk bırakarak konumlandır.
btnA2 = createButton()
that.text = "A2"
that.aline(btnA1, "right", 10)
// btnA nın altına, 10px boşluk bırakarak konumlandır.
btnA3 = createButton()
that.text = "A3"
that.aline(btnA, "bottom", 10)
// btnA3 ün altına, 10px boşluk bırakarak konumlandır.
btnA4 = createButton()
that.text = "A4"
that.aline(btnA3, "bottom", 10)
// SAĞ ÜST KONUMLANDIRMA
// Sol üste konumlandır.
btnB = createButton()
that.text = "B"
that.color = "tomato"
that.top = 0
that.right = 0
// btnB nın soluna, 10px boşluk bırakarak konumlandır.
btnB1 = createButton()
that.text = "B1"
that.aline(btnB, "left", 10)
// btnB in altına, 10px boşluk bırakarak konumlandır.
btnB2 = createButton()
that.text = "B2"
that.aline(btnB, "bottom", 10)
// SOL ALTA KONUMLANDIRMA
// Sol üste konumlandır.
btnC = createButton()
that.text = "C"
that.color = "tomato"
that.left = 0
that.bottom = 0
// btnB nın soluna, 10px boşluk bırakarak konumlandır.
btnC1 = createButton()
that.text = "C1"
that.aline(btnC, "right", 10)
// btnB in altına, 10px boşluk bırakarak konumlandır.
btnC2 = createButton()
that.text = "C2"
that.aline(btnC, "top", 10)
// SAĞ ALTA KONUMLANDIRMA
// Sol üste konumlandır.
btnD = createButton()
that.text = "D"
that.color = "tomato"
that.right = 0
that.bottom = 0
// btnB nın soluna, 10px boşluk bırakarak konumlandır.
btnD1 = createButton()
that.text = "D1"
that.aline(btnD, "left", 10)
// btnB in altına, 10px boşluk bırakarak konumlandır.
btnD2 = createButton()
that.text = "D2"
that.aline(btnD, "top", 10)
// BİR NESNEYE GÖRE ORTADA KONUMLANDIRMA
// page nesnesine göre, ortala
btnE = createButton()
that.text = "E"
that.color = "tomato"
// Nesneyi ortala
that.center()
// NOT:
// SADECE yatay olarak ortalama kodu:
// that.center("left")
// SADECE dikey olarak ortalama kodu:
// that.center("top")
// btnE nın sağına,
btnE1 = createButton()
that.text = "E1"
that.aline(btnE, "right", 10)
// btnE nın soluna,
btnE2 = createButton()
that.text = "E2"
that.aline(btnE, "left", 10)
// btnE nın üstüne,
btnE3 = createButton()
that.text = "E3"
that.aline(btnE, "top", 10)
// btnE nın altına,
btnE4 = createButton()
that.text = "E4"
that.aline(btnE, "bottom", 10)
page.onResize(yenidenHizala)
}
var yenidenHizala = function() {
// page nesnesine göre, yeniden ortala.
btnE.center()
btnE1.aline(btnE, "right", 10)
btnE2.aline(btnE, "left", 10)
btnE3.aline(btnE, "top", 10)
btnE4.aline(btnE, "bottom", 10)
// Not: ortadaki kareler hariç, yeniden hizalamaya gerek yoktur.
}
</script>
</head>
<body></body>
</html>