dialog
class Dialog {
constructor(options) {
this.options = options
this.init()
}
get template() {
let {title,content} = this.options
let template = `
<div class="xingkong_dialog">
<div class="xingkong_dialog_wrapper">
<header>${title}</header>
<main>${content}</main>
<footer></footer>
</div>
</div>
`
return template
}
generateButton(){
let {title,content,buttons} = this.options
let footer_buttons = buttons.map((buttonOption)=>{
var $btn = $('<button></button>')
$btn.text(buttonOption.text)
$btn.on('click',buttonOption.action)
return $btn
})
return footer_buttons
}
init(){
let $dialog = $(this.template)
$dialog.find("footer").append(this.generateButton())
this.$dialog = $dialog
}
open(){
$('body').find("x")
this.$dialog.appendTo('body')
}
close(){
this.$dialog.detach()
}
}
/////////////////////// 用户调用
//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 id="x">点击</button>
</body>
</html>
//js
x.onclick = function(){
var dialog = new Dialog({
title: '标题',
content: '<b>欢迎</b>',
className: 'userDialog',
buttons: [{
text: '确定',
action: function() {
setTimeout(() => {
dialog.close()
}, 3000)
}
}, {
text: '取消',
action: function() {
dialog.close()
}
}, ]
})
dialog.open()
}
sticky
class Sticky {
constructor(selector, n) {
this.$el = $(selector)
this.offsetY = n || 0
this.addPlaceHolder()
this.cacheOffset()
this.listenScroll()
}
cacheOffset() {
this.offsets = []
this.$el.each((i, e) => {
this.offsets[i] = $(e).offset()
})
}
addPlaceHolder() {
this.$el.each((i, e) => {
$(e).wrap('<div class="sticky--wrapper"></div>')
$(e).parent().height($(e).height())
})
}
listenScroll() {
$(window).on('scroll', (e) => {
let scrollY = window.scrollY;
this.$el.each((i, e) => {
if (scrollY + this.offsetY > this.offsets[i].top) {
$(e).addClass("sticky").css({top:this.offsetY})
} else {
this.$el.removeClass("sticky")
}
})
})
}
}
/////// 用户
//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 id="topbar">
topbar
</div>
<main>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
<p>段落7</p>
<p>段落15</p>
<button>button</button>
<p>sadsfasdf</p>
</main>
</body>
</html>
//js
new Sticky("button",60)
new Sticky("#topbar")
网友评论