Introduction aux exemples d'encapsulation du plug-in js custom bullet box

Tout d’abord, faisons le tri dans nos réflexions. Le javascript natif implémente effectivement la méthode alert(), mais cela interrompra temporairement le fonctionnement du programme et a de quoi vous enlaidir ! Alors mettez-les de côté et réfléchissez-y attentivement, en fait, le cadre contextuel est composé de deux couches P et d'un calque de masquage (couche de masque) flottant en dessous, couvrant tous les éléments, et il est préférable d'être translucide. L'autre est la partie principale de la boîte contextuelle. Généralement, elle doit être centrée horizontalement et verticalement et contient généralement un titre. Le contenu principal doit être personnalisable. S'il s'agit d'une boîte modale, il y a généralement une confirmation. /bouton Annuler. Enfin, il y a quelques effets d'animation lors de l'ouverture et de la fermeture.

Informations d'invite de couche contextuelle, c'est l'exigence la plus courante dans le développement frontal mobile. Vous pouvez penser à certains plug-ins de boîtes contextuelles populaires, tels que le classique artDialog, le cool Sweetalert, etc.

Mais lentement, vous constaterez que les exigences de personnalisation sont généralement plus élevées. Les plug-ins contextuels généraux ne peuvent répondre qu'à la plupart des exigences. Le temps consacré à la personnalisation n'est pas aussi bon que manuellement. en encapsulant un qui convient à vos propres habitudes de développement, de sorte que l'efficacité du développement ultérieur soit grandement améliorée.

Vous pouvez donc en encapsuler un vous-même et le mettre dans le js public du projet. Si vous pouvez l'écrire vous-même, essayez de ne pas utiliser de plug-ins....

Certaines valeurs d'attribut par défaut

passent par un foreach boucle, similaire aux opts entrants Héritant de l'attribut defaultOpts, la méthode before() exécutée avant d'appeler la boîte pop-up équivaut à un travail de préparation

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 structure

Définissez un objet tableau, qui contient l'élément DOM de la boîte contextuelle, le masque d'alerte est le calque de masque plein écran et le contenu d'alerte est la zone de contenu principale de ​​. la boîte contextuelle. Enfin, le tableau est converti en HTML via la fonction .join('') Utilisez ensuite la méthode append() de jquery pour l'ajouter à la fin du nœud du corps.

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

La hauteur et la largeur sont définies, centrées horizontalement et verticalement

J'utilise ici le positionnement fixe, puis le la hauteur est passée en La hauteur (pourcentage), la distance entre le haut et le haut de l'écran est de 100-la hauteur entrante/2, obtenant ainsi un centrage vertical, et il en va de même pour la largeur. Cette méthode de centrage horizontal et vertical est aussi ce que je pense être la plus simple et la plus pratique basée sur une pratique à long terme. Elle est compatible avec différentes tailles d'écran. Bien sûr, il existe de nombreuses méthodes. 🎜>

La dernière phrase consiste à attribuer un temps d'exécution d'animation au calque de masque pour obtenir l'effet de fondu. Pour plus de détails, voir le CSS ci-dessous @-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'
    })

Effet de cadre de rebond

J'ai implémenté quatre effets ici, à savoir fadeIn tombant et sideLeft volant depuis la gauche Entrez, mettez à l’échelle l’amplification et les informations d’invite d’informations. Comme vous pouvez le voir, j'ai défini un objet de collection, placé respectivement les attributs CSS correspondants, puis attribué des valeurs uniformément

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 via deux setTimeout fonctions Cliquez n'importe où pour fermer

Normalement, l'exigence est de cliquer sur l'espace vide de la boîte contextuelle pour fermer la boîte contextuelle. Cela peut être fait avec un événement en un seul clic. est sur le sélecteur précédent. jquery nous a donné trop de commodité. ...Bien sûr, en fin de compte, afin d'éviter de cliquer sur d'autres éléments de la page et d'éviter que des événements ne bouillonnent, le comportement par défaut du composant est . ..

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

Fermer automatiquement

Lorsque autoClose est vrai et autoTime est supérieur à zéro, utilisez un événement de retard pour ferme automatiquement la boîte pop-up

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

Démo :

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>

Rendu

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!