面向编程----造轮子 - 《Javascript 随笔》

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;}

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;
}

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>'
  })
})

持续更新~~~