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-card/demo/
Upload File :
Current File : /var/www/html/libs/absol-card/demo/boardmanager.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Board Manager</title>
<link rel="stylesheet" href="https://absol.cf/css/googlematerialicons/material-icons.css">
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.3.45/css/materialdesignicons.css">
<link rel="stylesheet" href="https://absol.cf/hightlight/styles/default.css">
<script src="https://absol.cf/hightlight/highlight.pack.js"></script>
<script src="../dist/absol-card.js?timestamp=<?php echo stat('../dist/absol-card.js')['mtime'];?>"></script>
</head>
<body>
<style>
html, body {
padding: 0;
margin: 0;
font-family: Roboto, sans-serif;
font-size: 14px;
width: 100%;
height: 100%;
}
body > .absol-single-page {
width: 100%;
height: 100%;
}
.header {
font-size: 2em;
padding: 0 1em;
line-height: 2;
box-sizing: border-box;
}
.ac-main {
width: 100%;
height: 100%;
}
.am-mobile-theme body {
overflow: hidden;
}
</style>
<script class="viewable" type="text/javascript">
/* global absol*/
(function () {
if (absol.BrowserDetector.isMobile) {
document.body.classList.add('am-mobile-theme');
}
var _ = absol._;
var $ = absol.$;
var header = _({
class: 'absol-single-page-header',
child: {
class: 'header',
child: {
text: 'Quản lý Board drag'
}
}
});
var mBoardMng = _({
tag: 'boardmanager',
class: 'ac-main',
props: {
// title: 'FAVORITE',
// hasAddBtn: true,
hasPlusBoard: true
},
on: {
pressaddgroup: function () {
},
change: function (event) {
console.log(event);
}
}
});
var page = _({
tag: 'singlepage',
class: 'as-viewport-full',
child: [header, mBoardMng]
});
document.body.insertBefore(page, document.body.firstChild);
var boardGroups = ['Cá nhân', 'Chưa phân loại', 'Đang làm', "Trễ", 'Cần làm', 'Chỉnh sửa'].map(function (name, i) {
var boardGroup = _({
tag: 'boardgroup',
style:{
backgroundColor: i ===0? 'black': absol.Color.fromRGB(Math.random(), Math.random(), Math.random()).toString()
},
props: {
name: name,
desc: absol.string.randomParagraph(150),
},
on: {
boardorderchange: function (event) {
console.log(event);
},
boardenter: function (event) {
console.log(event);
},
boardleave: function (event) {
console.log(event);
},
dragboardstart: function (event) {
console.log(event);
},
dragboardend: function (event) {
console.log(event);
},
pressaddboard: function (event) {
console.log(event);
}
}
});
mBoardMng.addBoardGroup(boardGroup, i < 2);//nếu truyền cờ static là true thì board đó không drag đuợc, chỉ dùng cho các phần tử ở đầu hoặc cuối
Array((Math.random() * 50) >> 0).fill(0).forEach(function (u, j) {
var card = _({
tag: 'representativeboard',
style:{
backgroundColor: j ===0? 'white': absol.Color.fromRGB(Math.random(), Math.random(), Math.random()).toString()
},
props: {
name: absol.string.randomParagraph(80) || absol.string.randomParagraph(80) || absol.string.randomParagraph(80) || absol.string.randomParagraph(80) || absol.string.randomParagraph(80) || absol.string.randomParagraph(80) || absol.string.randomParagraph(80) || absol.string.randomParagraph(80)
}
});
boardGroup.addBoard(card);
});
});
})
();
</script>
<script src="https://absol.cf/absol/demo/autohightlighting.js"></script>
</body>
</html>
Server : Apache/2.4.41 (Ubuntu)