mdl-stepper JavaScript und HTML

Ich kopierte und klebte den Code I found here. Wenn ich versuche und trete (drücke weiter), will es sich nicht bewegen, es tut nichts.mdl-stepper JavaScript und HTML

Ich benutze Smarty PHP und setze das JavaScript und CSS in den Kopfbereich der Website - jQuery ich benutze ich habe, dass an der Unterseite.

{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>

Quelle

2016-06-15 RussellHarrower

Stellen Sie sicher, dass Sie in dieser Reihenfolge geladen:

Material Design Lite JS.
MDL Stepper JS.
Ihr benutzerdefinierter JS-Code.

Die Skripte sollte wie folgt aussehen:

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

In Ihrem eigenen Code, Sie einige Prüfungen tun können, zu wissen, wo das Problem ist:

// 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. 
}

Ausfallen 1: Sie haben Material Design Lite JS geladen, aber nicht der MDL Stepper.

Ausfallen 2: Material Design Lite Javascript nicht geladen wird oder aus einem anderen Grunde MDL componentHandler Objekt ist nicht global verfügbar und sie können nicht (Register und/oder Upgrade) Stepper Komponente an dieser Stelle.

Vielleicht übersprungen Sie ein Teil von include CSS & JS oder grundlegende Verwendung. Geht zur get started Seite und sieht noch einmal.

Wenn vorhanden, können Sie die Nachricht teilen, die in der Browserkonsole angezeigt wird. https://github.com/ahlechandre/mdl-stepper

Quelle

2016-06-16 22:40:11

hatte das gleiche Problem und die Lösung ist:

UPDATE

ich die Readme mit mehr Informationen über grundlegende Verwendung und Komponenten Handler aktualisiert wickeln Sie den Code in 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>

Quelle

2016-06-19 00:52:31

Antwort

Verwandte Themen