当前位置:网站首页>【js组件】自定义select
【js组件】自定义select
2022-07-06 23:26:00 【KatyLight】
单个HTML页面直接运行。
下面是代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: black;
color: white;
}
.KatyLight-select {
position: relative;
width: 200px;
display: inline-block;
text-align: center;
user-select: none;
color: #3b5b65;
font-size: .8rem;
}
.KatyLight-select > .title {
padding: .5rem 1rem;
background-color: transparent;
display: block;
box-shadow: inset 0 0 0 2px #96e4ff;
color: #96e4ff;
}
.KatyLight-select > .title:empty::after{
content: '请选择';
color: #3b5b65;
}
.KatyLight-select > .KatyLight-select-list {
display: none;
}
.KatyLight-select.active > .KatyLight-select-list {
display: block;
}
.KatyLight-select-list > ul {
list-style: none;
margin: 0;
position: absolute;
top:.5rem;
padding-inline-start: 0;
left: 0;
width: 100%;
box-shadow: inset 0 0 0 2px #96e4ff;
}
.KatyLight-select-list > ul > li {
padding:.5rem 0;
}
.KatyLight-select-list {
position: relative;
}
.KatyLight-select-list > ul > li:hover{
color: #96e4ff;
}
.KatyLight-select-list > ul > li.active {
color: #96e4ff;
background-color: #96e4ff22;
}
.KatyLight-select > .del {
position: absolute;
right: 1rem;
top: .5rem;
z-index: 22;
height: 2rem;
width: 2rem;
}
.KatyLight-select > .del.active {
display: block;
}
.KatyLight-select > .del {
display: none;
color: white;
}
.KatyLight-select > .del::after {
content: 'x';
}
</style>
</head>
<script>
class KatyLightSelect {
constructor(params) {
this.target = params.target
this.data = params.data
this.title = this.target.querySelector('.title')
this.del = this.target.querySelector('.del')
this.ul = this.target.querySelector('ul')
this.active = false
this.cIndex = -1
this.outClickZ = this.outClick.bind(this)
document.addEventListener('click', this.outClickZ)
this.del.dataset.del = '1'
this.title.dataset.title = '1'
this.domCreate()
}
domCreate() {
this.li = []
for (let i = 0; i < this.data.length; i++) {
let li = document.createElement('li')
li.dataset.index = i.toString()
li.dataset.option = 'K'
li.innerText = this.data[i].label
this.ul.append(li)
this.li.push(li)
}
}
titleTrigger() {
this.view(!this.active)
}
view(t) {
this.active = t
if (t) {
this.target.classList.add('active')
} else {
this.target.classList.remove('active')
}
}
getVal() {
if (this.cIndex === -1) {
return ''
} else {
return this.data[this.cIndex].value
}
}
delTrigger() {
this.choose(-1)
}
outClick(e) {
if (!this.target.contains(e.target)) {
this.view(false)
} else {
if (e.target.dataset.option) {
this.choose(parseInt(e.target.dataset.index))
this.view(false)
} else if (e.target.dataset.title) {
this.titleTrigger()
} else if (e.target.dataset.del) {
this.delTrigger()
}
}
}
choose(ii) {
if (this.cIndex !== -1) {
this.li[this.cIndex].classList.remove('active')
}
this.cIndex = ii
if (this.cIndex !== -1) {
this.li[this.cIndex].classList.add('active')
this.title.innerText = this.data[this.cIndex].label
this.del.classList.add('active')
} else {
this.title.innerText = ''
this.del.classList.remove('active')
}
}
}
window.onload = () => {
let zz = new KatyLightSelect({
target: document.querySelector('.KatyLight-select'),
data: [
{ label: 'a1', value: 'b1' },
{ label: 'a2', value: 'b2' },
{ label: 'a3', value: 'b3' },
{ label: 'a4', value: 'b4 ' },
{ label: 'a5', value: 'b5' },
{ label: 'a6', value: 'b6' }
]
})
setTimeout(() => {
console.log(zz.getVal())
}, 1500)
}
</script>
<body>
<div class="KatyLight-select">
<span class="title"></span>
<span class="del"></span>
<div class="KatyLight-select-list">
<ul>
</ul>
</div>
</div>
</body>
</html>
边栏推荐
- U++ game learning notes
- 2. Overview of securities investment funds
- 漏电继电器JELR-250FG
- QSlider of QT control style series (I)
- Addressable pre Download
- Leetcode (417) -- Pacific Atlantic current problem
- 线程池的创建与使用
- ScheduledExecutorService定时器
- DFS, BFS and traversal search of Graphs
- Auto. JS get all app names of mobile phones
猜你喜欢
随机推荐
DJ-ZBS2漏电继电器
Operand of null-aware operation ‘!‘ has type ‘SchedulerBinding‘ which excludes null.
Timer创建定时器
Two methods of thread synchronization
Dynamically generate tables
局部变量的数组初始化问题
2. Overview of securities investment funds
背包问题(01背包,完全背包,动态规划)
No experts! Growth secrets for junior and intermediate programmers and "quasi programmers" who are still practicing in Universities
U++ game learning notes
Weebly mobile website editor mobile browsing New Era
U++ metadata specifier learning notes
带你遨游银河系的 10 种分布式数据库
NPDP产品经理认证,到底是何方神圣?
腾讯云数据库公有云市场稳居TOP 2!
Timer create timer
使用知云阅读器翻译统计遗传学书籍
np.random.shuffle与np.swapaxis或transpose一起时要慎用
《二》标签
最长不下降子序列(LIS)(动态规划)