交互式网络组件比您想象的要容易-css教程-PHP中文网

交互式网络组件比您想象的要容易

在我的上一篇文章中，我们看到Web组件并不像看起来那么可怕。我们查看了一个超级简单的设置，并制作了僵尸约会服务配置文件，并配有自定义元素。我们重复了每个配置文件的元素，并使用元素填充了每个配置文件的元素。

这就是一切在一起的方式。

那很酷，很有趣（嗯，无论如何我都很开心……），但是如果我们将这个想法进一步互动，该怎么办。我们的僵尸个人资料很棒，但是对于您来说，这是一种有用的，后的世界末日约会经历，您知道，“喜欢”僵尸，甚至给他们发消息。这就是我们将在本文中做的。我们将挥动另一篇文章。（对僵尸来说，挥动会是合适的吗？）

文章系列

网络组件比您想象的要容易
交互式网络组件比您想象的要容易
（你在这里）
在WordPress中使用Web组件比您想象的要容易
带有Web组件的内置元素比您想象的要容易
上下文感知的网络组件比您想象的要容易
Web组件伪级和伪元素比您想象的要容易

本文假定有关Web组件的基本知识水平。如果您是这个概念的新手，那完全可以 - 上一篇文章应该为您提供所需的一切。前进。阅读。我会等待。 * Twiddles拇指*准备好了吗？好的。

首先，对原始版本的更新

让我们暂停一秒钟（好的，也许更长），看看:: lotted（）伪元素。在上一篇文章出版之后，这引起了我的注意（谢谢，玫瑰！），它解决了我遇到的封装问题（尽管不是全部）。如果您还记得的话，我们在组件的之外有一些CSS样式，以及

但这就是::插槽发挥作用。我们像这样声明选择器中的元素：

 ::插槽（img）{
  宽度：100％；
  最大宽度：300px;
  身高：自动；
  保证金：0 1EM 0 0;
}

登录后复制

现在，将选择放置在任何插槽中的任何交互式网络组件比您想象的要容易元素。这有很大帮助！

但这并不能解决我们所有的封装困境。虽然我们可以直接在插槽中选择任何内容，但我们不能选择插槽中元素的任何后代。因此，如果我们有一个带孩子的插槽（例如僵尸配置文件的兴趣部分），我们将无法从元素中选择它们。另外，当::插槽具有很好的浏览器支持时，有些事情（例如选择一个伪元素，例如，:: slotted（span）::之后）会在一些浏览器（您好，Chrome）中工作，但在其他浏览器中不起作用（您好，Safari）。

因此，虽然它不是完美的，但是::插槽确实提供了比以前更多的封装。这是已更新的约会服务，以反映以下内容：

返回交互式Web组件！

我想做的第一件事是添加一些动画来调味。让我们让我们的僵尸个人资料图片逐渐消失并翻译成负载。

当我第一次尝试此操作时，我使用img和:: llotted（img）选择器直接为图像做动画。但是我得到的只是野生动物园的支持。 Chrome和Firefox不会在插入的图像上运行动画，但是默认图像可以很好地动画。为了使它起作用，我用.pic类将插槽包裹在DIV中，然后将动画应用于DIV。

 .pic {
  动画：Picfadein 1s 1s易于前进；
  变换：翻译（20px）;
  不透明度：0;
}

@keyframes picfadein {
  来自{不透明度：0;变换：翻译（20px）; }
  到{不透明：1;变换：translatey（0）; }
}

登录后复制

“喜欢”僵尸

那可爱的僵尸不是“喜欢”的东西吗？我的意思是从用户的角度来看。这似乎至少应该拥有在线约会服务。

我们将添加一个复选框“按钮”，该复选框在单击时启动心脏动画。让我们在.info div的顶部添加此HTML：

 <input type="“复选框”"> 喜欢 <label></label>

登录后复制

这是我在一起的心脏SVG。我们知道僵尸爱事物很可怕，所以他们的心将是夏普勒的灼热的阴影：

 <svg viewbox="“" xmlns="”" http: fill-rule="”" fiendodd clip-rule="”" stroke-line line join="“" fill="”＃7aff00“/"> </svg>

登录后复制

这是添加到模板的

 #trigger：checked .likebtn {
  /*检查.likeBtn的状态。翻转未检查状态的前景/背景颜色。 */
  背景色：＃960B0B;
  颜色：#fff;
}

＃扳机 {
  /*将带有for for for属性的标签附加到输入的标签后，单击标签检查/取消选中框，以便我们删除复选框。 */
  显示：无；
}

。心 {
  / *从如此小的人开始，这是几乎看不见的 */
  变换：比例尺（0.0001）;
}

@keyframes heartanim {
  / *心脏动画 */
  0％{变换：比例尺（0.0001）; }
  50％{变换：比例（1）; }
  85％，100％{变换：比例（0.4）; }
}

#trigger：检查〜.heart {
  / *检查复选框启动动画 */
  动画：1S心anim易于启动前进；
}

登录后复制

那里几乎是标准的HTML和CSS。没有什么幻想或坚定的网络组件。但是，嘿，它有效！而且由于它是一个复选框，因此“与僵尸不同”和“喜欢”的僵尸一样容易。

消息传递僵尸

如果您是一位准备好混合的世界末日的单身，并看到一个与您的个性和兴趣相匹配的僵尸，那么您可能想给他们发消息。（请记住，僵尸并不关心外观 - 他们只对您的胸罩感兴趣。）

让我们在僵尸“喜欢”之后透露一个消息按钮。类似按钮是复选框的事实再次派上用场，因为我们可以使用其检查状态来有条件地显示使用CSS的消息选项。这是HERT SVG下方添加的HTML。只要它是兄弟姐妹，它几乎可以走到任何地方。

 <button>消息</button>

登录后复制

检查#trigger复选框后，我们可以将消息传递按钮显示到视图：

 #trigger：检查〜.messagebtn {
  显示：块;
}

登录后复制

到目前为止，我们已经做得很好，避免了复杂性，但是我们需要在这里找到一点JavaScript。如果我们单击“消息”按钮，我们希望能够给僵尸介绍，对吗？虽然我们可以将HTML添加到我们的中，但出于演示目的，让我们使用一些JavaScript即时构建它。

我的第一个假设是，我们可以在模板中添加<script>元素，创建一个封装的脚本，然后以我们的快乐方式添加。是的，那行不通。模板中实例化的任何变量都会多次实例化，很好，JavaScript关于彼此无法区分的变量的浮躁。 *摇晃拳头在Cranky JavaScript*</script>

您可能会做一些更聪明的事情，然后说：“嘿，我们已经为此元素做了一个JavaScript构造函数，所以为什么不将JavaScript放在那里呢？”好吧，我比我更聪明。

让我们这样做，然后将JavaScript添加到构造函数。我们将添加一个侦听器，一旦单击，就会创建并显示一个表格以发送消息。这是构造函数现在的样子，聪明的裤子：

 customelements.define（'Zombie-Profile'，，
类扩展htmlelement {
  constructor（）{
    极好的（）;
    让profile = document.getElementById（'zprofiletemplate'）;
    让myprofile = profile.content;
    const shadowroot = this.attachshadow（{
      模式：“打开”
    }）。附录（myprofile.clonenode（true））;

    //“新”代码
    //获取消息按钮和DIV包装配置文件以供以后使用
    令msgbtn = this.shadowroot.queryselector（'。messagebtn'），
        profilel = this.shadowroot.queryselector（'。profile-wrapper'）;
    
    //添加活动听众
    msgbtn.addeventlistener（'click'，function（e）{

      //创建我们需要构建形式的所有元素
      令formel = document.createelement（'form'），
          主题= document.createelement（'输入'），
          objecterLabel = document.createelement（'label'），
          contentel = document.createelement（'textarea'），
          contentlabel = document.createelement（'label'），
          submitel = document.createelement（'输入'），
          CloseBtn = document.CreateeLement（'button'）;
        
      //设置表单元素。动作只是我构建的页面，该页面吐出了您提交给您的内容
      formel.setAttribute（'方法'，'post'）;
      FORMEL.SETATTRIBUTE（'Action'，'https://johnrhea.com/undead-form-practice.php'）;
      FORMEL.CLASSLIST.ADD（'Hello'）;

      //设置关闭按钮，以便我们可以关闭消息，如果我们害羞
      CloseBtn.innerHtml =“ X”;
      collectbtn.addeventlistener（'click'，function（）{
        formel.remove（）;
      }）;

      //设置表单字段和标签
      subjectel.setAttribute（'type'，'text'）;
      subjectel.setAttribute（'name'，'subj'）;
      subjectlabel.setAttribute（'for'，'subj'）;
      subjectlabel.innerhtml =“主题：”;
      contentel.setAttribute（'name'，'cntnt'）;
      contentLabel.setAttribute（'for'，'cntnt'）;
      contentLabel.innerhtml =“消息：”;
      submitel.setAttribute（'type'，'submit'）;
      Submitel.setAttribute（'value'，'发送消息'）;

      //将所有Elments以形式放置
      FORMEL.APPENDCHILD（CLOSSBTN）;
      FORMEL.APPENDCHILD（主题标签）;
      formel.appendchild（主题）;
      formel.appendchild（contentLabel）;
      formel.appendchild（contentel）;
      formel.appendchild（submitel）;

      //将表格放在页面上
      ProfileL.AppendChild（Formel）;
    }）;
  }
}）;

登录后复制

到目前为止，一切都很好！

在我们称其为一天之前，我们需要解决最后一件事。没有什么比第一次尴尬的介绍更糟糕的了，因此，通过将僵尸的名称添加到默认消息文本中，让那些后世界末日的约会车轮润滑。对于用户来说，这是一个很好的便利。

由于我们知道元素中的第一个跨度始终是僵尸的名称，因此我们可以抓住它并将其内容粘贴在变量中。（如果您的实现是不同的，并且元素的顺序跳来跳去，则可能需要使用类来确保您始终获得正确的选择。）

令zname = this.getElementsBytagName（“ span”）[0] .innerhtml;

登录后复制

然后在活动侦听器中添加此内容：

 contentel.innerhtml =“ hi” zname“，\ ni喜欢您的braaains ...”;

登录后复制

那还不错，是吗？现在，我们知道交互式网络组件与僵尸约会场景一样不纳入……好吧，您知道我的意思。一旦克服了了解Web组件的结构的最初障碍，它就会变得更加有意义。现在，您拥有交互式网络组件技能，让我们看看您可以想到什么！其他哪些组件或互动将使我们的僵尸约会服务更好？做到并在评论中分享。

以上是交互式网络组件比您想象的要容易的详细内容。更多信息请关注PHP中文网其他相关文章！