basicjs-turkce/31-temel-otomatik-boyutlandirma-teknik1.htm at main · bug7a/basicjs-turkce · GitHub

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
<!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">

        <!-- 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>

        /*

            - 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")
                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 içeriği -->

    </body>
</html>