mdl-stepper javascript 和 HTML

Question

我复制并粘贴了代码 I found here。当我尝试一步（按继续）时，它不想移动，实际上它什么也没做。

我正在使用 Smarty PHP 并将 JavaScript 和 CSS 放在网站的 header 区域 - jQuery 我正在使用我有在底部。

{literal}
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  <!-- style -->
  <style>
    @-webkit-keyframes FadeIn {
    0% {
      opacity: 0; }
    100% {
      opacity: 100; } }
  @-moz-keyframes FadeIn {
    0% {
      opacity: 0; }
    100% {
      opacity: 100; } }
  @-o-keyframes FadeIn {
    0% {
      opacity: 0; }
    100% {
      opacity: 100; } }
  @keyframes FadeIn {
    0% {
      opacity: 0; }
    100% {
      opacity: 100; } }
  @-webkit-keyframes FadeInFromBottom {
    0% {
      height: 0;
      padding-top: 84px;
      background-color: white;
      color: white; }
    25% {
      color: white; } }
  @-moz-keyframes FadeInFromBottom {
    0% {
      height: 0;
      padding-top: 84px;
      background-color: white;
      color: white; }
    25% {
      color: white; } }
  @-o-keyframes FadeInFromBottom {
    0% {
      height: 0;
      padding-top: 84px;
      background-color: white;
      color: white; }
    25% {
      color: white; } }
  @keyframes FadeInFromBottom {
    0% {
      height: 0;
      padding-top: 84px;
      background-color: white;
      color: white; }
    25% {
      color: white; } }
  /* STEPPER */
  .mdl-stepper {
    position: relative;
    font-family: "Roboto", sans-serif;
    background-color: white;
    display: block;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    padding: 24px 0;
    max-width: 720px;
    width: 100%;
    border-radius: 2px; }
    .mdl-stepper > li {
      list-style: none; }

  /* STEPPER ON SMALL SCREENS */
  @media only screen and (max-width: 375px) {
    .mdl-stepper {
      width: 100vw; }

    .mdl-grid .mdl-cell .mdl-stepper {
      margin-left: -16px; } }
  /* STEP */
  .mdl-step {
    position: relative; }
    .mdl-step:not(:last-child) {
      margin-bottom: 24px; }
      .mdl-step:not(:last-child).is-active {
        margin-bottom: 36px; }
      .mdl-step:not(:last-child) .mdl-step__label-indicator:after {
        content: '';
        position: absolute;
        top: 12px;
        left: 0;
        width: 1px;
        min-height: 40px;
        background-color: rgba(0, 0, 0, 0.1);
        margin: 32px 4px 0 37px; }
    .mdl-step .mdl-step-error-message {
      display: none; }
    .mdl-step > * {
      -webkit-animation: FadeIn 0.5s ease-in-out;
      -moz-animation: FadeIn 0.5s ease-in-out;
      -ms-animation: FadeIn 0.5s ease-in-out;
      animation: FadeIn 0.5s ease-in-out; }

  /* STEP ACTIVE */
  .mdl-step.is-active .mdl-step__title {
    font-weight: bold; }
  .mdl-step.is-active .mdl-step__content {
    display: block; }
  .mdl-step.is-active .mdl-step__label-indicator {
    background-color: #2196F3;
    color: white; }
  .mdl-step.is-active:not(:last-child) .mdl-step__label-indicator:after {
    height: 442px; }
  .mdl-step.is-active .mdl-step__actions {
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    display: flex;
    justify-content: flex-start; }
    .mdl-step.is-active .mdl-step__actions [data-stepper-next] {
      order: 1;
      margin-right: 8px; }
    .mdl-step.is-active .mdl-step__actions [data-stepper-cancel] {
      order: 2; }
    .mdl-step.is-active .mdl-step__actions [data-stepper-skip] {
      order: 3;
      margin-left: auto; }
    .mdl-step.is-active .mdl-step__actions [data-stepper-back] {
      order: 4;
      margin-left: auto; }

  /* STEP MOD COMPLETED */
  .mdl-step--completed .mdl-step__label-indicator {
    background-color: #2196F3; }

  /* STEP MOD ERROR */
  .mdl-step--error .mdl-step__title {
    color: #F44336; }
  .mdl-step--error .mdl-step-error-message {
    display: block;
    color: #F44336;
    font-weight: normal; }
  .mdl-step--error .mdl-step__label-indicator {
    background-color: #F44336 !important;
    font-weight: bold; }

  /* STEP MOD OPTIONAL */
  /* STEP MOD TRANSIENT */
  .mdl-step--transient .mdl-step__content {
    overflow: hidden !important; }

  /* STEP LABEL */
  .mdl-stepper:not(.mdl-stepper--horizontal) .mdl-step__label:hover, .mdl-stepper:not(.mdl-stepper--horizontal) .mdl-step__label:active, .mdl-stepper:not(.mdl-stepper--horizontal) .mdl-step__label:focus {
    background-color: rgba(0, 0, 0, 0.06); }

  .mdl-step__label {
    position: relative;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    display: flex;
    cursor: pointer;
    margin-bottom: 8px;
    padding: 8px 24px 24px 24px;
    align-items: center; }

  /* STEP LABEL MOD WITH SUBLABEL */
  .mdl-step__label--with-sublabel {
    align-items: baseline; }

  /* STEP TITLE */
  .mdl-step__title {
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    display: flex;
    flex-flow: column nowrap;
    order: 2;
    width: 100%; }

  /* STEP TITLE MESSAGE */
  .mdl-step__title-message {
    position: absolute;
    font-size: 12px;
    opacity: .7;
    font-weight: 400;
    top: 28px; }

  /* STEP LABEL INDICATOR */
  .mdl-step__label-indicator {
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    display: flex;
    order: 1;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 100%;
    color: white;
    margin-right: 12px;
    margin-bottom: auto; }
    .mdl-step__label-indicator > :first-child {
      -webkit-display: flex;
      -moz-display: flex;
      -ms-display: flex;
      display: flex;
      font-size: 15px;
      width: 28px;
      height: 28px;
      align-items: center;
      justify-content: center; }

  /* STEP CONTENT */
  .mdl-step__content {
    display: none;
    height: 320px;
    width: inherit;
    overflow: auto;
    margin-left: 64px;
    margin-right: 24px; }

  /* STEP ACTIONS */
  .mdl-step__actions {
    display: none;
    padding-top: 16px;
    height: 48px;
    margin-left: 64px;
    margin-right: 24px; }
    .mdl-step__actions [data-stepper-next].mdl-button--raised.mdl-button--colored {
      background-color: #2196F3;
      box-shadow: none; }

  /* STEP TRANSIENT */
  .mdl-step__transient {
    position: absolute;
    top: 68px;
    left: 64px;
    z-index: 2;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    display: flex;
    width: calc(100% - 88px);
    height: 320px;
    transition: 0.3s all ease-in-out; }

  /* STEP TRANSIENT OVERLAY */
  .mdl-step__transient-overlay {
    content: '';
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: rgba(255, 255, 255, 0.8); }

  /* STEP TRANSIENT LOADER */
  .mdl-step__transient-loader {
    z-index: 4;
    margin: auto; }

  /* STEPPER MOD HORIZONTAL */
  @media only screen and (min-width: 841px) {
    .mdl-stepper--horizontal {
      -webkit-display: flex;
      -moz-display: flex;
      -ms-display: flex;
      display: flex;
      flex-direction: row;
      align-items: baseline;
      max-width: 840px;
      padding: 0;
      min-height: 576px;
      /* HORIZONTAL STEP */
      /* HORIZONTAL STEP LABEL */
      /* HORIZONTAL STEP CONTENT */
      /* HORIZONTAL STEP ACTIONS */
      /* STEPPER MOD HORIZONTAL + MOD LINEAR */ }
      .mdl-stepper--horizontal:before {
        content: '';
        background-color: transparent;
        width: 100%;
        min-height: 84px;
        box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
        position: absolute;
        top: 0;
        left: 0; }
      .mdl-stepper--horizontal > .mdl-step {
        position: static;
        -webkit-display: flex;
        -moz-display: flex;
        -ms-display: flex;
        display: flex;
        justify-content: center;
        align-items: initial;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        max-height: 84px;
        overflow: hidden;
        /* STEP MOD COMPLETED */ }
        .mdl-stepper--horizontal > .mdl-step.is-active.mdl-step--transient:before {
          content: attr(data-step-transient-message);
          -webkit-animation: FadeInFromBottom 0.3s cubic-bezier(0, 0, 0, 0.99);
          -moz-animation: FadeInFromBottom 0.3s cubic-bezier(0, 0, 0, 0.99);
          -ms-animation: FadeInFromBottom 0.3s cubic-bezier(0, 0, 0, 0.99);
          animation: FadeInFromBottom 0.3s cubic-bezier(0, 0, 0, 0.99);
          position: absolute;
          padding-left: 24px;
          display: flex;
          font-size: 16px;
          justify-content: flex-start;
          align-items: center;
          width: calc(100% - 24px);
          height: 84px;
          background-color: white;
          top: 0;
          left: 0;
          z-index: 9; }
        .mdl-stepper--horizontal > .mdl-step .mdl-step__transient {
          top: 0;
          left: 0;
          width: 100%;
          height: 100%; }
        .mdl-stepper--horizontal > .mdl-step:not(:first-child):not(:last-child) {
          margin: auto auto; }
        .mdl-stepper--horizontal > .mdl-step:not(:last-child) {
          flex: 1; }
        .mdl-stepper--horizontal > .mdl-step:not(:last-child):after {
          content: '';
          position: relative;
          flex: 1;
          top: 42px;
          width: 168px;
          margin-left: -12px;
          height: 1px;
          background-color: rgba(0, 0, 0, 0.1); }
        .mdl-stepper--horizontal > .mdl-step.mdl-step--completed .mdl-step__title > .mdl-step__title-text {
          font-weight: bold; }
        .mdl-stepper--horizontal > .mdl-step:not(:last-child) > .mdl-step__label > .mdl-step__label-indicator:after {
          display: none; }
      .mdl-stepper--horizontal .mdl-step__label {
        top: -48px;
        flex: initial;
        margin: 0;
        padding: 24px;
        min-height: 132px;
        transition: 0.025s border-radius linear; }
        .mdl-stepper--horizontal .mdl-step__label:hover {
          background-color: rgba(0, 0, 0, 0.06); }
        .mdl-stepper--horizontal .mdl-step__label:active {
          padding: 12px;
          margin: 12px;
          border-radius: 100%; }
        .mdl-stepper--horizontal .mdl-step__label > .mdl-step__title {
          width: initial; }
        .mdl-stepper--horizontal .mdl-step__label > .mdl-step__title > * {
          max-width: 120px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis; }
        .mdl-stepper--horizontal .mdl-step__label > .mdl-step__title > .mdl-step__title-message {
          position: relative;
          top: 0;
          line-height: 14px; }
        .mdl-stepper--horizontal .mdl-step__label > .mdl-step__label-indicator {
          margin-top: auto; }
      .mdl-stepper--horizontal .mdl-step > .mdl-step__content {
        position: absolute;
        top: 84px;
        left: 0;
        width: calc(100% - 48px);
        height: calc(100% - 192px);
        margin: 24px; }
      .mdl-stepper--horizontal .mdl-step > .mdl-step__actions {
        position: absolute;
        top: calc(100% - 84px);
        left: 0;
        margin: 0;
        padding: 24px;
        width: calc(100% - 48px); }
        .mdl-stepper--horizontal .mdl-step > .mdl-step__actions [data-stepper-next] {
          order: 4;
          margin-left: 8px;
          margin-right: 0;
          color: #2196F3;
          background-color: transparent; }
        .mdl-stepper--horizontal .mdl-step > .mdl-step__actions [data-stepper-cancel] {
          order: 3;
          margin-left: auto; }
        .mdl-stepper--horizontal .mdl-step > .mdl-step__actions [data-stepper-skip] {
          order: 2;
          margin-left: auto; }
        .mdl-stepper--horizontal .mdl-step > .mdl-step__actions [data-stepper-back] {
          order: 1;
          margin-left: 0;
          margin-right: auto; }
      .mdl-stepper--horizontal.mdl-stepper--linear > .mdl-step:not(.mdl-step--completed):not(.is-active) .mdl-step__title > .mdl-step__title-text {
        opacity: .5; } }
  </style>
  {/literal}
  <!-- markup -->
  <div class="mdl-cell mdl-cell--12-col" id="stepper-non-linear">
                <h1 class="stepper-subtitle">Non-linear stepper</h1>
                <p class="stepper-guideline-quote">Non-linear steppers allow users to enter a multi-step flow at any point.</p>

                <div class="stepper-snippet" id="snippet-stepper-nonlinear"><!-- markup -->
  <ul class="mdl-stepper" id="demo-stepper-nonlinear" data-upgraded=",MaterialStepper">
    <li class="mdl-step is-active">
      <span class="mdl-step__label">
                <span class="mdl-step__title">
                  <span class="mdl-step__title-text">Title of step 1</span>
      </span>
      <span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">1</span></span></span>
      <div class="mdl-step__content">
      </div>
      <div class="mdl-step__actions">
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
        Continue
      </button>
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel="" data-upgraded=",MaterialButton,MaterialRipple">
              Cancel
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-back="" disabled="" data-upgraded=",MaterialButton,MaterialRipple">
              Back
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
      </div>
    </li>
    <li class="mdl-step">
      <span class="mdl-step__label">
            <span class="mdl-step__title">
              <span class="mdl-step__title-text">Title longer than it should be</span>
      </span>
      <span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">2</span></span></span>
      <div class="mdl-step__content"></div>
      <div class="mdl-step__actions">
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next data-upgraded=",MaterialButton,MaterialRipple">
              Continue
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel="" data-upgraded=",MaterialButton,MaterialRipple">
              Cancel
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-back="" data-upgraded=",MaterialButton,MaterialRipple">
              Back
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
      </div>
    </li>
    <li class="mdl-step">
      <span class="mdl-step__label">
            <span class="mdl-step__title">
              <span class="mdl-step__title-text">Title of step 3</span>
      </span>
      <span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">3</span></span></span>
      <div class="mdl-step__content"></div>
      <div class="mdl-step__actions">
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next="" data-upgraded=",MaterialButton,MaterialRipple">
              Continue
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel="" data-upgraded=",MaterialButton,MaterialRipple">
              Cancel
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-back="" data-upgraded=",MaterialButton,MaterialRipple">
              Back
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
      </div>
    </li>
  </ul>
{literal}
  <!-- script -->
  <script>
    (function () {
      // Select stepper container element
      var stepperElement = document.querySelector("ul.mdl-stepper");
      var Stepper;
      var steps;

      if (!stepperElement) return;

      // Get the MaterialStepper instance of element to control it.
      Stepper = stepperElement.MaterialStepper;

      if (!Stepper) {
        console.error('MaterialStepper instance is not available for selector: ' + selector + '.');
        return;
      }
      steps = stepperElement.querySelectorAll('.mdl-step');

      for (var i = 0; i < steps.length; i++) {
        // When user clicks on [data-stepper-next] button of step.
        steps[i].addEventListener('onstepnext', function (e) {
          // {element}.MaterialStepper.next() change the state of current step to "completed"
          // and move one step forward.
          Stepper.next();
        });
        // When user clicks on [data-stepper-back] button of step.
        steps[i].addEventListener('onstepback', function (e) {
          Stepper.back();
        });
      }


    })();

  </script>
{/literal}
</div>

  </div>

Answer 1

确保您已按以下顺序加载：

Material 设计精简版 JS。
MDL 步进器 JS。
您的自定义 JS 代码。

脚本应如下所示：

 <!-- Material Design Lite -->
 <script src="./material.min.js"></script>
 <!-- MDL Stepper component -->
 <script src="./stepper.min.js"></script>
 <script>
   // Your custom code here. 
 </script>

在您的自定义代码中，您可以进行一些检查以了解问题出在哪里：

// Select your stepper element.  
var stepperElement = document.querySelector('ul.mdl-stepper');
var Stepper;

// Check if MDL Component Handler is loaded.
if (typeof componentHandler !== 'undefined') {
  // Get the MaterialStepper instance of element to control it.          
  Stepper = stepperElement.MaterialStepper;

  if (Stepper) {
    // Moves the stepper to the next step for test.
    Stepper.next();
  } else {
    // Fail 1.
  }
} else {
  // Fail 2.
}

失败 1：您已加载 Material Design Lite JS，但未加载 MDL Stepper。

失败 2：Material Design Lite javascript 未加载或由于其他原因 MDL componentHandler 对象在全球范围内不可用，您此时无法使用（注册and/or升级）Stepper组件。

也许你跳过了 include CSS & JS 或基本用法的某些部分。转到 get started 页面再看一遍。

如果有的话，您可以分享浏览器控制台上显示的消息。

更新

我用关于基本用法和组件处理程序的更多信息更新了 README：https://github.com/ahlechandre/mdl-stepper

Answer 2

遇到了同样的问题，解决方案是：将您的代码包装在 window.addEventListener('load', function ()

中

<!-- Material Design Lite JS -->
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<!-- MDL Component JS -->
<script defer src="./stepper.min.js"></script>
<script>
  (function () {
    window.addEventListener('load', function () {
      // Your custom code in "onload" callback.
   });
  })();
</script>

mdl-stepper javascript 和 HTML

mdl-stepper javascript and HTML

html

javascript

css

smarty3

material-design-lite