使用jquery步驟的Summernote

Question

試圖將summernote editor轉換爲使用jquery steps並獲得第二個文本區域的嚮導形式。 我不擅長js，可能是腳本衝突嗎？

Answer 1

其實很簡單。使用此代碼：

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

 
    $('#summernote').summernote({ 
 
    \t height: 300, 
 
    \t minHeight: null, 
 
    \t maxHeight: null, 
 
    \t focus: true 
 
    }); 
 
});

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

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

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

 
.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 .5em .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: .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% .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: #fbe3e4; 
 
    border: 1px solid #fbc2c4; 
 
    color: #8a1f11 
 
} 
 

 
.wizard>.content>.body label { 
 
    display: inline-block; 
 
    margin-bottom: .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 .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: .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>.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 
 
} 
 

 
@media(max-width: 600px) { 
 
    .wizard>.steps>ul>li { 
 
     width:50% 
 
    } 
 

 
    .wizard>.steps a,.wizard>.steps a:hover,.wizard>.steps a:active { 
 
     margin-top: .5em 
 
    } 
 

 
    .wizard.vertical>.steps,.wizard.vertical>.actions { 
 
     display: block; 
 
     float: none; 
 
     width: 100% 
 
    } 
 

 
    .wizard.vertical>.content { 
 
     display: block; 
 
     float: none; 
 
     margin: 0 .5em .5em; 
 
     width: auto 
 
    } 
 
} 
 

 
@media(max-width: 480px) { 
 
    .wizard>.steps>ul>li { 
 
     width:100% 
 
    } 
 
}

<!-- include libraries(jQuery, bootstrap) --> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
 

 
<!-- include summernote css/js--> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet"> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script> 
 

 
<script src="http://zikro.gr/dbg/html/jquery-steps/jquery.steps/jquery.steps.min.js"></script> 
 

 
<div id="example-basic"> 
 
    <h3>Keyboard</h3> 
 
    <section> 
 
     <div id="summernote">Hello Summernote</div> 
 
    </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>

你也試試我的鏈接與這個例子：http://zikro.gr/dbg/html/jquery-steps/