![]() 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 : |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CabinetList</title> <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <script src="../dist/absol-mobile.js?"></script> <script> var $ = absol.$; var _ = absol._; </script> <style> html, body { overflow-x: hidden; width: 100%; height: 100%; padding: 0; margin: 0; } html { overflow-y: hidden; } body { overflow-y: auto; } </style> </head> <body> <script> (function () { if (!absol.BrowserDetector.isMobile) { alert("Hãy mở bằng chế độ mobile và tải lại"); return; } var _ = absol._; var $ = absol.$; function render(o) { return _(o).addTo(document.body); } function makeQuickMenu() { return { props: { extendClasses: 'cd-context-menu', items: [ { text: 'Trạng thái', extendClasses: "bsc-quickmenu", icon: { tag: "i", class: "material-icons", child: { text: "info" } }, cmd: 'status' }, { text: 'Di chuyển', extendClasses: "bsc-quickmenu", icon: { tag: "i", class: "material-icons", child: { text: "open_with" } }, cmd: 'move' }, { text: 'Sửa', extendClasses: "bsc-quickmenu", icon: { tag: "i", class: "material-icons", child: { text: "mode_edit" } }, cmd: 'edit' }, { text: 'Xóa', extendClasses: "bsc-quickmenu red", icon: { tag: "i", class: "material-icons", child: { text: "delete" } }, cmd: 'delete' }, { text: 'Lưu trữ', extendClasses: "bsc-quickmenu", icon: { tag: "i", class: "material-icons", child: { text: "turned_in_not" } }, cmd: 'store' } ] }, onSelect: function (item) { console.log(item) // console.log('cmd: ', item.cmd); } } } var addBtn = render({ tag: 'button', child: { text: 'addChild' }, on: { click: function () { var i = Math.random() * 1000 + 1000 >> 0; var newItem = _({ tag: 'mcabinetitem', class: 'am-flex-content', child: [ { style: { fontSize: '18px', flexGrow: 1 }, child: { text: ('item ' + i + ' ').repeat((Math.random() * 5 + 1) >> 0) } } ], props: { draggable: true, somethingLikeId: i, rightActions: [ { text: 'Xoá', otherPropertiesYouNeed: "Some data...", cmd: 'delete' }, { text: 'Sửa', otherPropertiesYouNeed: "Some data..." }, ], quickmenuX: makeQuickMenu() }, on: { action: function (event) { console.log(event.action) if (event.action.cmd === 'delete') { this.selfRemove(); } console.log(event.action); }, click: function (event) { absol.require('snackbar').show(this.somethingLikeId + '') } } }); list.addChildBefore(newItem, list.getChildren()[6]); newItem.scrollIntoView(); } } }); var searchInput = _('searchtextinput').addStyle('margin', '10px'); var list = _({ tag: 'mcabinetlist', style: { height: '80vh', overflowY: 'auto' }, props: { draggable: true }, on: { orderchange: function () { var newIdOrder = this.getChildren().map(function (itemElt) { return itemElt.somethingLikeId; }) console.log(newIdOrder); } }, child: Array(30).fill(null).map(function (u, i) { return { tag: 'mcabinetitem', class: 'am-flex-content', props: { content: [ { style: { fontSize: '18px', flexGrow: 1 }, child: { text: 'item ' + i } } ], draggable: i > 5, somethingLikeId: i, rightActions: [ { text: 'Xoá', otherPropertiesYouNeed: "Some data...", cmd: 'delete' }, { text: 'Sửa', otherPropertiesYouNeed: "Some data..." }, ], quickmenuX: makeQuickMenu() }, on: { action: function (event) { console.log(event.action) if (event.action.cmd === 'delete') { this.selfRemove(); } console.log(event.action); }, click: function (event) { absol.require('snackbar').show(this.somethingLikeId + '') } } } }) }); document.body.appendChild(searchInput); document.body.appendChild(list); list.attachSearchInput(searchInput); })(); </script> </body> </html>