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/selectbox.html
<!DOCTYPE html>
<html>
<head>
<title>SelectBox</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="https://absol.cf/hightlight/highlight.pack.js"></script>
<script src="../dist/absol-acomp.js?<?php echo stat('../dist/absol-acomp.js')['mtime'];?>"></script>
<style>
/* * {
box-sizing: border-box;
} */
</style>
</head>
<body>
<div style="height: 75vh; overflow: auto; border: solid 1px black;">
<div style="height: 800px;padding-top:50vh;box-sizing: border-box;" id="test"></div>
</div>
<script class="viewable">
function randomTheme() {
return ['confirmed', 'declined', 'waiting', null][Math.random() * 4 >> 0];
}
absol._({
tag: 'selectbox',
style: {
display: 'inline-block',
border: 'solid 1px gray',
'max-width': '50%',//có thể giới hạn cả chiều rộng và chiều cao, tự động tăng kính thước khi chọn thêm
'max-height': '4em',//cũng có thể thêm kích thước cố định vào, nếu tràn sẽ tự scroll
margin: '40px'
},
props: {
disableClickToFocus: true,
items: Array(30).fill(0).map(function (u, i) {
return {
text: '[' + i + ']' + absol.string.randomPhrase(30),
value: i,
desc: absol.string.randomPhrase(30),
theme: randomTheme()
};
}),
values: [5, 2, 1],
enableSearch: true,
orderly: true, // giữ đúng thứ tự theo items
},
on: {
change: function (event) {
console.log("change", this.values);
},
add: function (event) {
console.log("add", event.itemData, this.values);//item nào được thêm vào
},
remove: function (event) {
console.log("remove", event.itemData, this.values);//item nào bị loại bỏ
}
}
}).addTo(absol.$('#test'));
absol._({
tag: 'selectbox',
style: {
display: 'inline-block',
border: 'solid 1px gray',
margin: '40px',
'max-height': '4em',//cũng có thể thêm kích thước cố định vào, nếu tràn sẽ tự scroll,
backgroundColor: 'rgb(255, 200, 200)'
},
props: {
enableSearch: true,
itemFocusable: true,
items: Array(30).fill(0).map(function (u, i) {
return {
text: '[' + i + ']' + absol.string.randomPhrase(30),
value: i,
desc: absol.string.randomPhrase(30)
};
}),
values: [5, 2, 1]
}
}).addTo(absol.$('#test'));
absol._({
tag: 'selectbox',
style: {
display: 'inline-block',
border: 'solid 1px gray',
margin: '40px'
},
props: {
itemFocusable: true,
enableSearch: false,
items: Array(30).fill(0).map(function (u, i) {
return {
text: '[' + i + ']' + absol.string.randomPhrase(30),
value: i,
desc: absol.string.randomPhrase(30)
};
}),
values: [5, 2, 1],
activeValue: 2
},
on:{
activevaluechange: function (event){
console.log(event);
}
}
}).addTo(absol.$('#test'));
</script>
<script src="https://absol.cf/absol/demo/autohightlighting.js"></script>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
Server : Apache/2.4.41 (Ubuntu)