![]() 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 : |
<!DOCTYPE html> <html> <head> <title>ButtonArray</title> <meta charset="UTF-8"> <link rel="stylesheet" href="https://absol.cf/hightlight/styles/default.css"> <!-- <link rel="stylesheet" href="https://absol.cf/materialdesignicons/materialdesignicons.min.css"> --> <script src="../dist/absol-acomp.js?<?php echo stat('../dist/absol-acomp.js')['mtime'];?>"></script> <script src="https://absol.cf/hightlight/highlight.pack.js"></script> </head> <body> <div id="demo0"></div> <script> var _ = absol._; var $ = absol.$; </script> <script class="viewable"> var ba0 = _({ tag: 'buttonarray', style:{ 'font-size':'30px' }, props: { items: [ true, false, null, 1, 2, 3, 4, 5 ] }, on: { change: function (event) { console.log(event.value, this.value); } } }); $('#demo0').addChild(ba0); </script> <h2>Expert</h2> <div id="demo1"></div> <style class="viewable"> .button-on-off{ } .button-on-off.off .as-button-array-item.as-active{ background-color: rgb(255, 40, 40); color: white; } .button-on-off.off { border-color: red; } .button-on-off.off .as-button-array-item{ color: red; border-color: red; } </style> <script> var ba1 = _({ tag: 'buttonarray', class:['button-on-off', 'off'], props: { items: [ { text: 'On', value: true }, { text: 'Off', value: false } ], value: false }, on: { change: function (event) { if (this.value){ this.removeClass('off'); } else{ this.addClass('off'); } } } }); $('#demo1').addChild(ba1); </script> <script src="https://absol.cf/absol/demo/autohightlighting.js?"></script> </body> </html>