.

VaKeR CYBER ARMY

Server : Apache/2.4.41 (Ubuntu)
System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64
User : www-data ( 33)
PHP Version : 7.4.33
Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare,
Directory : /var/www/html/libs/absol-mobile/demo/

Upload File :

Current File : /var/www/html/libs/absol-mobile/demo/selectbox.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SelectBox</title>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>

    <link rel="stylesheet" href="https://absol.cf/hightlight/styles/default.css">
    <link rel="stylesheet" href="https://pictogrammers.github.io/@mdi/font/5.3.45/css/materialdesignicons.min.css" media="all" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script src="https://absol.cf/hightlight/highlight.pack.js"></script>
    <script src="../dist/absol-mobile.js?"></script>
    <script>
        var $ = absol.$;
        var _ = absol._;
    </script>
</head>
<body>
<div class="demo">

</div>
<script>
    function genItems(n, withDesc) {
        return Array(n).fill(null).map(function (u, i) {
            return {
                text: '[' + i + ']' + absol.string.randomPhrase(0),
                value: i,
                desc: withDesc ? absol.string.randomPhrase(30) : null
            }
        });
    }

    var demoDiv = $('.demo');

    var demoData = [
        {
            items: genItems(6000, true),
            values: [1],
            enableSearch: true,
            exampleDesc: "Rất rất nhiều item(6000), có chú thích, có tìm kiếm"
        },
        {
            items: genItems(1000, false),
            values: [1],
            enableSearch: true,
            exampleDesc: "Rất nhiều item(1000), có tìm kiếm"
        },
        {
            items: genItems(1000, false),
            values: [100],
            enableSearch: true,
            exampleDesc: "Rất nhiều item(1000)"
        },
        {
            items: genItems(30, false),
            values: [20],
            enableSearch: false,
            exampleDesc: "Không nhiều item(30), không search"
        },
        {
            items: [
                { text: "Nam", value: 1 },
                { text: "Nữ", value: 0 },
                { text: "Bí mật", value: 2 }
            ],
            values: [1],
            enableSearch: false,
            exampleDesc: "Ít item"
        }
    ]

    demoData.forEach(
        function (data) {
            var desc = _({
                tag: 'h3',
                child: { text: data.exampleDesc }
            }).addTo(demoDiv);
            var now = new Date().getTime();
            /***
             * @type {MSelectMenu}
             */
            var sm = _({
                tag: 'mselectbox',
                style: {
                    width: 'auto'
                },
                props: {
                    items: data.items,
                    values: data.values,
                    enableSearch: data.enableSearch,
                    orderly: true
                },
                on: {
                    change: function () {
                        valueText.firstChild.data = 'value = ' + JSON.stringify(this.values)
                    }
                }
            }).addTo(demoDiv);
            sm.addStyle({
                maxWidth: '90vw'
            });
            var renderTime = new Date().getTime() - now;

            var valueText = _({
                child: { text: 'value = ' + JSON.stringify(data.values) }
            }).addTo(demoDiv);
            var renderTimeText = _({
                child: { text: 'render: ' + renderTime + "(ms)" }
            }).addTo(demoDiv);
        }
    )
</script>
<script>
    if (!absol.BrowserDetector.isMobile) {
        absol._({
            tag: 'script',
            props: {
                src: 'https://absol.cf/absol/demo/autohightlighting.js'
            }
        }).addTo(document.body);
    }
</script>
</body>
</html>

VaKeR 2022