美文网首页
jquery 轮子

jquery 轮子

作者: xingkong_s | 来源:发表于2018-08-10 15:16 被阅读7次

    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")
    

    相关文章

      网友评论

          本文标题:jquery 轮子

          本文链接:https://www.haomeiwen.com/subject/fczkbftx.html