jQueryのステップ基本的な例では、ボディが間違った場所に配置されています

jQueryのステップBasic Exampleをドキュメントから取得しようとしていますが、bodyTagセクションを下からではなくステップの右側に配置します。どんな考え？jQueryのステップ基本的な例では、ボディが間違った場所に配置されています

すべてが正常にロードされ、コンソールエラーはありません。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Steps Test</title> 
    <link rel="stylesheet" href="Content/jquery.steps.css" /> 
</head> 
<body> 

    <script type="text/javascript" src="Scripts/jquery-3.1.1.min.js"></script>  
    <script type="text/javascript" src="Scripts/jquery.steps.min.js"></script>  

    <div id="example-basic"> 
     <h3>Keyboard</h3> 
     <section> 
      <p>Try the keyboard navigation by clicking arrow left or right!</p> 
     </section> 
     <h3>Effects</h3> 
     <section> 
      <p>Wonderful transition effects.</p> 
     </section> 
     <h3>Pager</h3> 
     <section> 
      <p>The next and previous buttons help you to navigate through your content.</p> 
     </section> 
    </div> 

    <script type="text/javascript"> 

     $(function() { 
      $("#example-basic").steps({ 
       headerTag: "h3", 
       bodyTag: "section", 
       transitionEffect: "slideLeft", 
       autoFocus: true 
      }); 
     }) 
    </script> 

</body> 
</html>

出典

2016-10-04 Matthew Lock

あなたはライブラリが付属していますカスタムCSSで少しを再生する必要があります。あなたはこれだけのように、display: inline-block;とwidth: 100%;を設定することにより、.wizard > .contentを変更する必要があります！

$(function() { 
 
    $("#example-basic").steps({ 
 
    headerTag: "h3", 
 
    bodyTag: "section", 
 
    transitionEffect: "slideLeft", 
 
    autoFocus: true 
 
    }); 
 
})

/* 
 
    Common 
 
*/ 
 

 
.wizard, 
 
.tabcontrol 
 
{ 
 
    display: block; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.wizard a, 
 
.tabcontrol a 
 
{ 
 
    outline: 0; 
 
} 
 

 
.wizard ul, 
 
.tabcontrol ul 
 
{ 
 
    list-style: none !important; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.wizard ul > li, 
 
.tabcontrol ul > li 
 
{ 
 
    display: block; 
 
    padding: 0; 
 
} 
 

 
/* Accessibility */ 
 
.wizard > .steps .current-info, 
 
.tabcontrol > .steps .current-info 
 
{ 
 
    position: absolute; 
 
    left: -999em; 
 
} 
 

 
.wizard > .content > .title, 
 
.tabcontrol > .content > .title 
 
{ 
 
    position: absolute; 
 
    left: -999em; 
 
} 
 

 

 

 
/* 
 
    Wizard 
 
*/ 
 

 
.wizard > .steps 
 
{ 
 
    position: relative; 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
.wizard.vertical > .steps 
 
{ 
 
    display: inline; 
 
    float: left; 
 
    width: 30%; 
 
} 
 

 
.wizard > .steps .number 
 
{ 
 
    font-size: 1.429em; 
 
} 
 

 
.wizard > .steps > ul > li 
 
{ 
 
    width: 25%; 
 
} 
 

 
.wizard > .steps > ul > li, 
 
.wizard > .actions > ul > li 
 
{ 
 
    float: left; 
 
} 
 

 
.wizard.vertical > .steps > ul > li 
 
{ 
 
    float: none; 
 
    width: 100%; 
 
} 
 

 
.wizard > .steps a, 
 
.wizard > .steps a:hover, 
 
.wizard > .steps a:active 
 
{ 
 
    display: block; 
 
    width: auto; 
 
    margin: 0 0.5em 0.5em; 
 
    padding: 1em 1em; 
 
    text-decoration: none; 
 

 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 

 
.wizard > .steps .disabled a, 
 
.wizard > .steps .disabled a:hover, 
 
.wizard > .steps .disabled a:active 
 
{ 
 
    background: #eee; 
 
    color: #aaa; 
 
    cursor: default; 
 
} 
 

 
.wizard > .steps .current a, 
 
.wizard > .steps .current a:hover, 
 
.wizard > .steps .current a:active 
 
{ 
 
    background: #2184be; 
 
    color: #fff; 
 
    cursor: default; 
 
} 
 

 
.wizard > .steps .done a, 
 
.wizard > .steps .done a:hover, 
 
.wizard > .steps .done a:active 
 
{ 
 
    background: #9dc8e2; 
 
    color: #fff; 
 
} 
 

 
.wizard > .steps .error a, 
 
.wizard > .steps .error a:hover, 
 
.wizard > .steps .error a:active 
 
{ 
 
    background: #ff3111; 
 
    color: #fff; 
 
} 
 

 
.wizard > .content 
 
{ 
 
    background: #eee; 
 
    display: block; 
 
    margin: 0.5em; 
 
    min-height: 35em; 
 
    overflow: hidden; 
 
    position: relative; 
 
    width: auto; 
 

 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 

 
.wizard.vertical > .content 
 
{ 
 
    display: inline; 
 
    float: left; 
 
    margin: 0 2.5% 0.5em 2.5%; 
 
    width: 65%; 
 
} 
 

 
.wizard > .content > .body 
 
{ 
 
    float: left; 
 
    position: absolute; 
 
    width: 95%; 
 
    height: 95%; 
 
    padding: 2.5%; 
 
} 
 

 
.wizard > .content > .body ul 
 
{ 
 
    list-style: disc !important; 
 
} 
 

 
.wizard > .content > .body ul > li 
 
{ 
 
    display: list-item; 
 
} 
 

 
.wizard > .content > .body > iframe 
 
{ 
 
    border: 0 none; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.wizard > .content > .body input 
 
{ 
 
    display: block; 
 
    border: 1px solid #ccc; 
 
} 
 

 
.wizard > .content > .body input[type="checkbox"] 
 
{ 
 
    display: inline-block; 
 
} 
 

 
.wizard > .content > .body input.error 
 
{ 
 
    background: rgb(251, 227, 228); 
 
    border: 1px solid #fbc2c4; 
 
    color: #8a1f11; 
 
} 
 

 
.wizard > .content > .body label 
 
{ 
 
    display: inline-block; 
 
    margin-bottom: 0.5em; 
 
} 
 

 
.wizard > .content > .body label.error 
 
{ 
 
    color: #8a1f11; 
 
    display: inline-block; 
 
    margin-left: 1.5em; 
 
} 
 

 
.wizard > .actions 
 
{ 
 
    position: relative; 
 
    display: block; 
 
    text-align: right; 
 
    width: 100%; 
 
} 
 

 
.wizard.vertical > .actions 
 
{ 
 
    display: inline; 
 
    float: right; 
 
    margin: 0 2.5%; 
 
    width: 95%; 
 
} 
 

 
.wizard > .actions > ul 
 
{ 
 
    display: inline-block; 
 
    text-align: right; 
 
} 
 

 
.wizard > .actions > ul > li 
 
{ 
 
    margin: 0 0.5em; 
 
} 
 

 
.wizard.vertical > .actions > ul > li 
 
{ 
 
    margin: 0 0 0 1em; 
 
} 
 

 
.wizard > .actions a, 
 
.wizard > .actions a:hover, 
 
.wizard > .actions a:active 
 
{ 
 
    background: #2184be; 
 
    color: #fff; 
 
    display: block; 
 
    padding: 0.5em 1em; 
 
    text-decoration: none; 
 

 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 

 
.wizard > .actions .disabled a, 
 
.wizard > .actions .disabled a:hover, 
 
.wizard > .actions .disabled a:active 
 
{ 
 
    background: #eee; 
 
    color: #aaa; 
 
} 
 

 
.wizard > .loading 
 
{ 
 
} 
 

 
.wizard > .loading .spinner 
 
{ 
 
} 
 

 

 

 
/* 
 
    Tabcontrol 
 
*/ 
 

 
.tabcontrol > .steps 
 
{ 
 
    position: relative; 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
.tabcontrol > .steps > ul 
 
{ 
 
    position: relative; 
 
    margin: 6px 0 0 0; 
 
    top: 1px; 
 
    z-index: 1; 
 
} 
 

 
.tabcontrol > .steps > ul > li 
 
{ 
 
    float: left; 
 
    margin: 5px 2px 0 0; 
 
    padding: 1px; 
 

 
    -webkit-border-top-left-radius: 5px; 
 
    -webkit-border-top-right-radius: 5px; 
 
    -moz-border-radius-topleft: 5px; 
 
    -moz-border-radius-topright: 5px; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
} 
 

 
.tabcontrol > .steps > ul > li:hover 
 
{ 
 
    background: #edecec; 
 
    border: 1px solid #bbb; 
 
    padding: 0; 
 
} 
 

 
.tabcontrol > .steps > ul > li.current 
 
{ 
 
    background: #fff; 
 
    border: 1px solid #bbb; 
 
    border-bottom: 0 none; 
 
    padding: 0 0 1px 0; 
 
    margin-top: 0; 
 
} 
 

 
.tabcontrol > .steps > ul > li > a 
 
{ 
 
    color: #5f5f5f; 
 
    display: inline-block; 
 
    border: 0 none; 
 
    margin: 0; 
 
    padding: 10px 30px; 
 
    text-decoration: none; 
 
} 
 

 
.tabcontrol > .steps > ul > li > a:hover 
 
{ 
 
    text-decoration: none; 
 
} 
 

 
.tabcontrol > .steps > ul > li.current > a 
 
{ 
 
    padding: 15px 30px 10px 30px; 
 
} 
 

 
.tabcontrol > .content 
 
{ 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 35em; 
 
    overflow: hidden; 
 
    border-top: 1px solid #bbb; 
 
    padding-top: 20px; 
 
} 
 

 
.tabcontrol > .content > .body 
 
{ 
 
    float: left; 
 
    position: absolute; 
 
    width: 95%; 
 
    height: 95%; 
 
    padding: 2.5%; 
 
} 
 

 
.tabcontrol > .content > .body ul 
 
{ 
 
    list-style: disc !important; 
 
} 
 

 
.tabcontrol > .content > .body ul > li 
 
{ 
 
    display: list-item; 
 
} 
 
.wizard > .content{ 
 
    display: inline-block; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script> 
 
<div id="example-basic"> 
 
    <h3>Keyboard</h3> 
 
    <section> 
 
    <p>Try the keyboard navigation by clicking arrow left or right!</p> 
 
    </section> 
 
    <h3>Effects</h3> 
 
    <section> 
 
    <p>Wonderful transition effects.</p> 
 
    </section> 
 
    <h3>Pager</h3> 
 
    <section> 
 
    <p>The next and previous buttons help you to navigate through your content.</p> 
 
    </section> 
 
</div>

出典

2016-10-04 07:48:22 Ionut

おかげでこれだけはドキュメントにあった.IF！ –

ここにCSSの修正もありますが、あなたの方がはるかに簡単です：https://github.com/rstaib/jquery-steps/issues/6 –

私はあなたのためにうれしいです。それがあなたのニーズに合っていると思えば答えを受け入れてください。ありがとうございました。 – Ionut

jQueryのステップ基本的な例では、ボディが間違った場所に配置されています

答えて

関連する問題