-
Notifications
You must be signed in to change notification settings - Fork 0
/
31-temel-otomatik-boyutlandirma-teknik1.htm
103 lines (72 loc) · 3.73 KB
/
31-temel-otomatik-boyutlandirma-teknik1.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
<!DOCTYPE html>
<html>
<head>
<title>Temel Otomatik Boyutlandırma</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>
/*
- Etiket (Label) nesnesinin yüksekliği "auto" olarak belirlendiğinde,
boyutun tarayıcı tarafından hesaplanması bir zaman alıyor.
- Bu örnekte, nesneye metin eklendikten sonra,
nesnenin hesaplanmış yüksekliğinin nasıl kullanılabileceği gösterilmiştir.
*/
// DEĞİŞKENLER
var articleList = [
"Integer at risus in ligula pharetra finibus. Suspendisse et magna convallis, aliquam ex sed, facilisis turpis. Ut commodo urna purus, vitae scelerisque nibh volutpat nec.",
"Vestibulum tempus ornare tellus, lobortis laoreet augue. Suspendisse malesuada ullamcorper sapien, a lacinia eros ornare vel. Praesent lacinia nisl sed lorem sollicitudin, vel rutrum est sagittis.",
"Nulla accumsan ex urna, id rutrum libero finibus sit amet.",
"Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras molestie dui nisi, ac rutrum leo venenatis ac. Maecenas cursus tincidunt nisi quis pellentesque. Vivamus id massa metus. Etiam semper erat quis dolor tristique, non molestie ante mollis.",
"Fusce dignissim.",
"Aenean",
"Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.",
"Maecenas commodo varius metus a fermentum."
]
// İlk sayfa
var a0
// Oluşturulan nesnelerin listesi.
var lblArticleList = [];
// İlk çalışan fonksiyon.
var start = function() {
// NESNE: Sayfanın taşıyıcısı
a0 = createBox(0, 0, page.width, page.height)
a0.scrollY = 1
// Biraz yazı oluştur.
for (var i = 0; i < 10; i++) {
// Yazıyı, a0 nesnesinin içinde, arti0 isminde oluştur. Diğerleri arti1, arti2, arti3 ...
// NESNE: Yazılardan biri
a0["lblArticle" + i] = createLabel(20, 0, 250, "auto")
a0.add(that)
that.color = "lightgray"
that.fontSize = 20
that.space = 10
that.round = 8
// Rasgele bir metin aktar.
that.text = articleList[random(0, articleList.length - 1)]
// Listeye ekle
lblArticleList.push(that)
that.onResize(refreshPositionOf_lblArticles)
// NOT: Nesnelerden, birinin boyutu değiştiğinde,
// tüm nesneler yeniden konumlandırılır.
}
}
// Tüm nesneleri yeniden konumlandır.
var refreshPositionOf_lblArticles = function() {
// Nesneler arası boşluk.
var ARTICLE_BOTTOM_SPACE = 5
// Bir sonraki metnin yukarı ile mesafesi.
var nextArticleTop = 0
for (var i = 0; i < lblArticleList.length; i++) {
lblArticleList[i].top = nextArticleTop
nextArticleTop += lblArticleList[i].height + ARTICLE_BOTTOM_SPACE
}
}
</script>
</head>
<body>
<!-- HTML content -->
</body>
</html>