Tags组件(jsbin)
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="tabs">
<ul class="tab-head">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="tab-body">
<li>content1</li>
<li>content2</li>
<li>content3</li>
</ul>
</div>
<div class="tabs">
<ul class="tab-head">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="tab-body">
<li>content1</li>
<li>content2</li>
<li>content3</li>
</ul>
</div>
</body>
</html>
CSS
*{margin:0}
ul, li {list-style:none}
.tab-head {display: flex;}
.tab-head li{border: 1px solid transparent; padding: 2px 8px; cursor: pointer}
.tab-head li:hover {border-color: #c03}
.tab-head li.cur {
border-color: #c03;
}
.tab-body li {display: none;}
.tab-body li.cur {display: block;}
JS
function Tags(selector) {
this.parentEle = $(selector)
this.init()
this.bindEvents()
}
Tags.prototype.init = function () {
this.parentEle.each( (i,v) => {
$(v).find('ul').eq(0).find('li').eq(0).addClass('cur')
$(v).find('ul').eq(1).find('li').eq(0).addClass('cur')
})
}
Tags.prototype.bindEvents = function () {
this.parentEle.on('click', '.tab-head li', function(e){
$(this).addClass('cur').siblings().removeClass('cur')
$(this).parent().next().find('li').eq($(this).index()).addClass('cur').siblings().removeClass('cur')
})
}
// // ES6 class写法
// class Tags {
// constructor(selector) {
// this.parentEle = $(selector)
// this.init()
// this.bindEvents()
// }
// init() {
// this.parentEle.each( (i,v) => {
// $(v).find('ul').eq(0).find('li').eq(0).addClass('cur')
// $(v).find('ul').eq(1).find('li').eq(0).addClass('cur')
// })
// }
// bindEvents() {
// this.parentEle.on('click', '.tab-head li', function(e){
// $(this).addClass('cur').siblings().removeClass('cur')
// $(this).parent().next().find('li').eq($(this).index()).addClass('cur').siblings().removeClass('cur')
// })
// }
// }
var tabs = new Tags('.tabs')
Dialog组件(jsbin)
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<button class="a1">111</button>
<button class="a2">222</button>
</body>
</html>
CSS
* {margin:0;padding:0;}
.zc-dialog-mask {
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
position: fixed;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}
.zc-dialog-wrap {
background: #fff;
width: 300px;
padding: 15px;
position: relative;
box-shadow: 1px 1px 1px 1px rgab(0,0,0,.3);
}
.zc-dialog-head {
padding-bottom: 10px;
border-bottom: 1px solid #333;
}
.zc-dialog-body {
padding: 15px 0;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
word-break: break-all;
}
.zc-dialog-wrap>span {
position: absolute;
top: 15px;
right: 15px;
cursor: pointer;
}
.zc-dialog-button-alert {
text-align: center;
}
.zc-dialog-button-confirm {
text-align: right;
}
.zc-dialog-button>button {
padding: 5px 15px;
border-radius: 4px;
color: #ffffff;
outline: none;
cursor: pointer;
}
.zc-dialog-button>.zc-dialog-confirm {
background-color: #6cb5f4;
border:1px solid #54a9f2;
}
.zc-dialog-button>.zc-dialog-confirm:hover {
background-color: #3d9df0;
border-color: #1b8cee;
}
.zc-dialog-button>.zc-dialog-cancel {
background-color: #d9534f;
border: 1px solid #d43f3a;
}
.zc-dialog-button>.zc-dialog-cancel:hover {
background-color: #c9302c;
border-color: #ac2925;
}
JS
function Dialog() {
// this.option = option
this.bindEvent()
}
Dialog.prototype.template = function (option) {
let temp = `<div class="zc-dialog-mask">
<div class="zc-dialog-wrap">
<div class="zc-dialog-head">
${option.title || '提示'}
</div>
<div class="zc-dialog-body">
${option.content || option || '内容'}
</div>
<div class="zc-dialog-button"></div>
<span>X</span>
</div>
</div>`
this.$temp = $(temp)
}
Dialog.prototype.hide = function () {
this.$temp.detach()
}
Dialog.prototype.bindEvent = function () {
$('body').on('click', '.zc-dialog-wrap>span, .zc-dialog-button>.zc-dialog-confirm, .zc-dialog-button>.zc-dialog-cancel', function(){
dialog.hide()
if (this.classList[0] === 'zc-dialog-confirm')
return true
else if (this.classList[0] === 'zc-dialog-cancel')
return false
})
}
Dialog.prototype.setSize = function (option) {
if(option.width && option.width > 330){
this.$temp.find('.zc-dialog-wrap').css({width: `${option.width}px`})
}
if(option.height && option.height > 150){
this.$temp.find('.zc-dialog-body').css({height: `${option.height}px`})
}
}
Dialog.prototype.alert = function (option) {
this.template(option)
this.$temp.find('.zc-dialog-button').addClass('zc-dialog-button-alert').removeClass('zc-dialog-button-confirm').html(`<button class="zc-dialog-confirm" type="button">确认</button>`)
this.setSize(option)
$('body').append(this.$temp)
}
Dialog.prototype.confirm = function (option) {
this.template(option)
this.$temp.find('.zc-dialog-button').addClass('zc-dialog-button-confirm').removeClass('zc-dialog-button-alert').html(`<button class="zc-dialog-confirm" type="button">确认</button> <button class="zc-dialog-cancel" type="button">取消</button>`)
this.setSize(option)
$('body').append(this.$temp)
}
var dialog = new Dialog();
$('.a1').click(function(){
dialog.alert({
title: '非模态窗口',
content: '<p>这是一个非模态窗口,并且不带按钮</p>'
})
})
$('.a2').click(function(){
dialog.confirm({
title: '非模态窗口',
content: '<p>确定要删除吗？</p>'
})
})
持续更新~~~
网友评论