Einführung in Kapselungsbeispiele des benutzerdefinierten Bullet-Box-Plug-Ins von js

Lassen Sie uns zunächst unsere Gedanken klären. Natives Javascript implementiert tatsächlich die Methode „alert()“, aber das wird die Ausführung des Programms vorübergehend unterbrechen und reicht aus, um Sie hässlich zu machen! Legen Sie diese also beiseite und denken Sie sorgfältig darüber nach. Tatsächlich besteht der Popup-Rahmen aus zwei P-Schichten und einer darunter schwebenden Maskierungsschicht (Maskenschicht), die alle Elemente abdeckt, und es ist am besten, durchscheinend zu sein. Der andere Teil ist der Hauptteil des Popup-Felds. Er muss im Allgemeinen horizontal und vertikal zentriert sein und enthält normalerweise einen Titel. Wenn es sich um ein modales Feld handelt, gibt es normalerweise eine Bestätigung /Abbrechen-Taste. Schließlich gibt es beim Aufklappen und Schließen einige Animationseffekte.

Popup-Layer-Eingabeaufforderungsinformationen, dies ist die häufigste Anforderung in der mobilen Front-End-Entwicklung. Sie denken vielleicht an einige beliebte Popup-Box-Plug-Ins, wie das klassische artDialog, das coole Sweetalert, usw.

Aber langsam werden Sie feststellen, dass die Anpassungsanforderungen normalerweise höher sind. Die für die Anpassung aufgewendete Zeit ist möglicherweise nicht so hoch wie die der manuellen Kapseln Sie eine Popup-Komponente, die Ihren eigenen Entwicklungsgewohnheiten entspricht, sodass die spätere Entwicklungseffizienz erheblich verbessert wird.

Sie können also selbst eines kapseln und es in die öffentlichen Js im Projekt einfügen. Wenn Sie es selbst schreiben können, versuchen Sie, keine Plug-Ins zu verwenden....

Einige Standardattributwerte

durchlaufen ein foreach Schleife, ähnlich der eingehenden opts Beim Erben des Attributs defaultOpts entspricht die Ausführung der before()-Methode vor dem Aufrufen des Popup-Felds einigen Vorbereitungsarbeiten

var defaultOpts = {
        title: '',//标题
        content: '',//内容 文字 || html
        height: 50,//默认屏幕（父级）的50%
        width: 80,//默认屏幕（父级）的80%
        type: 'alert-default',//弹框类型
        effect: 'fadeIn',//出现效果，默认下跌落
        delayTime: 500,//效果延时时间，默认.5s
        autoClose: false,//自动关闭
        autoTime: 2000, //自动关闭时间默认2s
        autoEffect: 'default',//关闭效果
        ok: '确定',
        okCallback: function(){},//确定回调
        cancel: '取消',
        cancelCallback: function(){},//取消回调
        before : function() {
          console.log('before')
        }, 
        close: function() {
          console.log('close')
        },
        blankclose: false//空白处点击关闭
      }

    for (i in defaultOpts) {
      if (opts[i] === undefined) {
        opts[i] = defaultOpts[i]
      }
    }
　　
　　opts.before && opts.before()

Dom Struktur

Definieren Sie ein Array-Objekt, das das DOM-Element der Popup-Box enthält. Alert-Maske ist die Vollbildmaskenebene und Alert-Content ist der Hauptinhaltsbereich Das Popup-Feld wird schließlich über die Funktion .join('') in HTML konvertiert. Anschließend wird es mit der append()-Methode von jquery an das Ende des Body-Knotens angehängt.

var alertHtml = [
        &#39;<section class="alert-main" id="alertMain">&#39;,
          &#39;<p class="alert-mask li-opacity" id="alertMask"></p>&#39;,
          &#39;<p class="alert-content &#39;+ opts.type +&#39;" id="alertContent">&#39;,
          opts.content +&#39;</p>&#39;,
        &#39;</section>&#39;
      ]

    $(&#39;body&#39;).append(alertHtml.join(&#39;&#39;))

Stellen Sie die Höhe und Breite ein, horizontal und vertikal zentriert

Ich verwende hier eine feste Positionierung und dann die Höhe wird in übergeben Die Höhe (Prozentsatz), der Abstand zwischen der Oberkante und dem oberen Rand des Bildschirms beträgt 100 – die eingehende Höhe/2, wodurch eine vertikale Zentrierung erreicht wird, und das Gleiche gilt für die Breite. Diese Methode der horizontalen und vertikalen Zentrierung ist meiner Meinung nach aufgrund langjähriger Praxis auch die einfachste und praktischste. Natürlich gibt es viele Methoden 🎜>

Der letzte Satz besteht darin, der Maskenebene eine Animationsausführungszeit zuzuweisen, um den Einblendeffekt zu erzielen. Weitere Informationen finden Sie im CSS unten @-webkit-keyframes opacity

var $alertContent = $('#alertContent'),
      $alertMain = $('#alertMain');

    $alertContent.css({
      'height': opts.height + '%',
      'top': (100 - opts.height)/2 + '%',
      'width': opts.width + '%',
      'left': (100 - opts.width)/2 + '%'
    })

    $('.li-opacity').css({
      '-webkit-animation-duration' : opts.delayTime/1000 + 's'
    })

Bounce-Frame-Effekt

Ich habe hier vier Effekte implementiert, nämlich fadeIn fallend und sideLeft fliegend von der linken Eingabetaste , Skalenverstärkung und Info-Eingabeaufforderung. Wie Sie sehen können, habe ich ein Sammlungsobjekt definiert, die entsprechenden CSS-Attribute platziert und dann durch zwei setTimeout einheitlich Werte

var effect = {
      'fadeIn': 'top',
      'fadeInStart': '-100%',
      'fadeInValue': (100 - opts.height)/2 + '%',
      'sideLeft': 'left',
      'sideLeftStart': '-100%',
      'sideLeftValue': (100 - opts.width)/2 + '%',
      'scale': '-webkit-transform',
      'scaleStart': 'scale(0)',
      'scaleValue': 'scale(1)',
      'info': '-webkit-transform',
      'infoStart': 'scale(1.2)',
      'infoValue': 'scale(1)'
    }

    setTimeout(function(){
      $alertContent.css(effect[opts.effect],effect[opts.effect + 'Start']).addClass('alert-show')

      setTimeout(function(){
        $alertContent.css(effect[opts.effect], effect[opts.effect + 'Value'])
        opts.close && opts.close()
      },10)
    },opts.delayTime)

blank zugewiesen Funktionen Zum Schließen auf eine beliebige Stelle klicken

Normalerweise ist es erforderlich, auf die leere Stelle des Popup-Felds zu klicken. Dies kann mit einem Klick-Ereignis erfolgen ist auf dem vorherigen Selektor. jquery hat uns so viel Komfort gegeben ... Um das Klicken auf andere Elemente der Seite zu verhindern und zu verhindern, dass Ereignisse auftauchen, ist das Standardverhalten der Komponente. ..

if(opts.blankclose) {
      $('.alert-main :not(.alert-content)').on('click',function(event){
        $alertMain.remove()
        opts.close && opts.close()
        event.stopPropagation()
        event.preventDefault()
      })
    }

Automatisch schließen

Wenn autoClose wahr ist und autoTime größer als Null ist, verwenden Sie ein Verzögerungsereignis, um Popup-Box automatisch schließen

if(opts.autoClose && opts.autoTime > 0) {
      setTimeout(function(){$alertMain.remove()},opts.autoTime)
      opts.close && opts.close()
    }

Demo:

css

html

@-webkit-keyframes opacity {
      0% {
        opacity: 0; /*初始状态 透明度为0*/
      }
      50% {
        opacity: 0; /*中间状态 透明度为0*/
      }
      100% {
        opacity: 1; /*结尾状态 透明度为1*/
      }
    }

    .li-opacity {
      -webkit-animation-name: opacity; /*动画名称*/
      -webkit-animation-iteration-count: 1; /*动画次数*/
      -webkit-animation-delay: 0s; /*延迟时间*/
    }
    .alert-mask {
      position: fixed;
      height: 100%;
      width: 100%;
      left: 0%;
      top: 0%;
      z-index: 9998;
      background-color: rgba(0,0,0,.7);
    }
    .alert-content {
      position: fixed;
      box-sizing: border-box;
      border-radius: 4px;
      z-index: 9999;
      -webkit-transition: .4s;
      -moz-transition: .4s;
      transition: .4s;
      display: none;
    }
    .alert-show {
      display: block;
    }
    .alert-default {
      background-color: white;
    }

js

<p class="alert" data-flag="fadeIn">fadeIn</p>
<p class="alert" data-flag="sideLeft">sideLeft</p>
<p class="alert" data-flag="scale">scale</p>
<p class="alert" data-flag="info">info</p>

Rendering

require.config({
  jquery:'component/jquery/jquery-3.1.0.min',
  liAlert: 'li/li-alert',//常用弹框组件
})

require(['jquery'],function($){
    require(['liAlert'],function(){
      $('.alert').on('click',function(event){
        $.alert({
          content: &#39;<h1 style="display:flex;justify-content:center;">我是弹框</h1>&#39;,
          effect: $(event.currentTarget).attr(&#39;data-flag&#39;),
          blankclose: true,
          //autoClose: true
        })
      })
    })
  })

Das obige ist der detaillierte Inhalt vonEinführung in Kapselungsbeispiele des benutzerdefinierten Bullet-Box-Plug-Ins von js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!