.

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-acomp/demo/
Upload File :
Current File : /var/www/html/libs/absol-acomp/demo/ribbonsplitbutton.html
<html>

<head>
    <meta charset="UTF-8">
    <title>RibbonSplitButton</title>
    <script src="../dist/absol-acomp.js?time=<?php  echo stat('../dist/absol-acomp.js')['mtime'];?>"></script>
    <link rel="stylesheet" href="https://absol.cf/hightlight/styles/default.css">
    <script src="https://absol.cf/hightlight/highlight.pack.js"></script>
</head>

<body>
<h2>Ribbon Button</h2>
<div id="demo0"></div>

<script class="viewable">
    var $ = absol.$;
    var _ = absol._;
    var menuItems = [
        {
            style: {
                fontWeight: 'bold',
                paddingLeft: '10px'
            },
            child: { tag: 'span', child: { text: 'Upload Picture From' } }
        },
        { text: "Dropbox", icon: 'span.mdi.mdi-dropbox' },
        { text: "Microsoft Onedrive", icon: 'span.mdi.mdi-microsoft-onedrive' },
        { text: "Google Drive", icon: 'span.mdi.mdi-google-drive' },
        '-------',
        {
            icon: 'span.mdi.mdi-desktop-classic',
            text: 'Your computer'
        }
    ];
    var button0 = _({
        tag: 'ribbonbutton',
        style: {
            marginLeft: '20px'
        },
        props: {
            text: 'Upload Picture',
            icon: 'span.mdi.mdi-file-image-outline',
            items: menuItems
        },
        on: {
            select: function (event) {
                //select a item in menu
                console.log(event.item);
            }
        }
    }).addTo($('#demo0'));

    var button9 = _({
        tag: 'ribbonbutton',
        class: 'as-big',
        style: {
            marginLeft: '20px',
        },
        props: {
            text: 'Dictate Text',
            icon: 'span.mdi.mdi-microphone-outline',
            items: [
                { text: "Dicate Text", icon: 'span.mdi.mdi-microphone-outline' },
                '-------',
                {
                    icon: 'span.mdi.mdi-google-translate',
                    text: 'Google Translator'
                },
                {
                    icon: 'span.mdi.mdi-translate',
                    text: 'Bing Translator'
                }
            ]
        },
        on: {
            select: function (event) {
                //select a item in menu
                console.log(event.item);
                var item = event.item;
                this.text = item.text;
                this.icon = item.icon;
            },
            press: function (event) {
                //click on primary button
                console.log(event.item);
            }
        }
    }).addTo($('#demo0'));
    

    var button01 = _({
        tag: 'ribbonbutton',
        style: {
            marginLeft: '20px'
        },
        props: {
            text: 'Upload Picture',
            items: menuItems
        },
        on: {
            select: function (event) {
                //select a item in menu
                console.log(event.item);
            }
        }
    }).addTo($('#demo0'));

    var button02 = _({
        tag: 'ribbonbutton',
        class: 'as-big',
        style: {
            marginLeft: '20px'
        },
        props: {
            text: 'Upload Picture',
            icon: '<img src="https://absol.cf/vivid_exticons/flac.svg">',
            items: menuItems
        },
        on: {
            select: function (event) {
                //select a item in menu
                console.log(event.item);
            }
        }
    }).addTo($('#demo0'));
    var button03 = _({
        tag: 'ribbonbutton',
        class: 'as-big',
        style: {
            marginLeft: '20px'
        },
        props: {
            text: 'Upload Picture',
            icon: '<img src="https://absol.cf/vivid_exticons/flac.svg">',
        },
        on: {
            select: function (event) {
                //select a item in menu
                console.log(event.item);
            }
        }
    }).addTo($('#demo0'));

    var button04 = _({
        tag: 'ribbonbutton',
        class: ['as-appearance-button'],
        style: {
            marginLeft: '20px'
        },
        props: {
            text: 'Upload Picture',
            icon: 'span.mdi.mdi-file-image-outline',
            items: menuItems
        },
        on: {
            select: function (event) {
                //select a item in menu
                console.log(event.item);
            }
        }
    }).addTo($('#demo0'));

    var button05 = _({
        tag: 'ribbonbutton',
        class: ['as-appearance-button'],
        style: {
            marginLeft: '20px'
        },
        props: {
            text: 'Upload Picture',
            items: menuItems
        },
        on: {
            select: function (event) {
                //select a item in menu
                console.log(event.item);
            }
        }
    }).addTo($('#demo0'));
</script>


<h2>Ribbon Split Button</h2>
<div id="demo1"></div>
<script class="viewable">
    var button1 = _({
        tag: 'ribbonsplitbutton',
        props: {
            text: 'Dictate',
            icon: 'span.mdi.mdi-microphone-outline'
        }
    });

    var button2 = _({
        tag: 'ribbonsplitbutton',
        style: {
            marginLeft: '20px'
        },
        props: {
            text: 'Upload Picture',
            icon: 'span.mdi.mdi-file-image-outline',
            items: [
                {
                    style: {
                        fontWeight: 'bold',
                        paddingLeft: '10px'
                    },
                    child: { tag: 'span', child: { text: 'Upload Picture From' } }
                },
                { text: "Dropbox", icon: 'span.mdi.mdi-dropbox' },
                { text: "Microsoft Onedrive", icon: 'span.mdi.mdi-microsoft-onedrive' },
                { text: "Google Drive", icon: 'span.mdi.mdi-google-drive' },
                '-------',
                {
                    icon: 'span.mdi.mdi-desktop-classic',
                    text: 'Your computer'
                }
            ]
        },
        on: {
            select: function (event) {
                //select a item in menu
                console.log(event.item);
            },
            press: function (event) {
                //click on primary button
                console.log(event.item);
            }
        }
    });
    var button3 = _({
        tag: 'ribbonsplitbutton',
        style: {
            marginLeft: '20px',
            width: '200px'
        },
        props: {
            text: 'Dictate',
            icon: 'span.mdi.mdi-microphone-outline',
            items: [
                { text: "Dicate", icon: 'span.mdi.mdi-microphone-outline' },
                '-------',
                {
                    icon: 'span.mdi.mdi-google-translate',
                    text: 'Google Translator'
                },
                {
                    icon: 'span.mdi.mdi-translate',
                    text: 'Bing Translator'
                }
            ]
        },
        on: {
            select: function (event) {
                //select a item in menu
                console.log(event.item);
                var item = event.item;
                this.text = item.text;
                this.icon = item.icon;
            },
            press: function (event) {
                //click on primary button
                console.log(event.item);
            }
        }
    });

    var button4 = _({
        tag: 'ribbonsplitbutton',
        class: 'as-big',
        style: {
            marginLeft: '20px',
        },
        props: {
            text: 'Dictate Text',
            icon: 'span.mdi.mdi-microphone-outline',
            items: [
                { text: "Dicate Text", icon: 'span.mdi.mdi-microphone-outline' },
                '-------',
                {
                    icon: 'span.mdi.mdi-google-translate',
                    text: 'Google Translator'
                },
                {
                    icon: 'span.mdi.mdi-translate',
                    text: 'Bing Translator'
                }
            ]
        },
        on: {
            select: function (event) {
                //select a item in menu
                console.log(event.item);
                var item = event.item;
                this.text = item.text;
                this.icon = item.icon;
            },
            press: function (event) {
                //click on primary button
                console.log(event.item);
            }
        }
    });
    var button5 = _({
        tag: 'ribbonsplitbutton',
        class: 'as-big',
        style: {
            marginLeft: '20px',
        },
        props: {
            text: 'Dictate Text',
            icon: '<img src="https://absol.cf/vivid_exticons/flac.svg">',
            items: [
                { text: "Dicate Text", icon: 'span.mdi.mdi-microphone-outline' },
                '-------',
                {
                    icon: 'span.mdi.mdi-google-translate',
                    text: 'Google Translator'
                },
                {
                    icon: 'span.mdi.mdi-translate',
                    text: 'Bing Translator'
                }
            ]
        },
        on: {
            select: function (event) {
                //select a item in menu
                console.log(event.item);
                var item = event.item;
                this.text = item.text;
                this.icon = item.icon;
            },
            press: function (event) {
                //click on primary button
                console.log(event.item);
            }
        }
    });

    

    var demo1Div = $('#demo1');
    demo1Div.addChild(button1)
        .addChild(button2)
        .addChild(button3)
        .addChild(button4)
        .addChild(button5);

    _('<h2>SelectRibbonMenu</h2>').addTo(document.body);

    var menu_5 = _({
        tag:'selectribbonmenu',
        props:{
            items:[
                {text:'item 1', value: 1},
                {text: 'item 2', value: 2}
            ]
        },
        on:{
            change: function (){
                console.log(this.value);
            }
        }
    }).addTo(document.body);

</script>

<script src="https://absol.cf/absol/demo/autohightlighting.js"></script>
</body>

</html>
VaKeR 2022