如何解決我的jquery插件問題？

Question

我想用一個名爲ancensor的jquery插件。

的plugnin頁面http://jque.re/plugins/image-galleries-decks/ascensor/#/Home

我有類似

<nav class='navbar navbar-default' role='navigation '> 
    <ul class='alinks list-inline links-to-floor'> 
    <li class="list-group-item"><a href='#' class="ascensorLink ascensorLink1">test1</a></li> 
     <li class="list-group-item"><a href='#' class="ascensorLink ascensorLink2" >test2</a></li> 
     <li class="list-group-item"><a href='#' class="ascensorLink ascensorLink3">test3</a></li> 
     <li class="list-group-item"><a href='#' class="ascensorLink ascensorLink4">test4</a></li> 
     <li class="list-group-item"><a href='#' class="ascensorLink ascensorLink5">test5</a></li> 
    </ul> 
    </nav> 

    <div id='ascensorBuilding'> 
    <div class='ascensorFloor1' style=''> 
       test here 
    </div> 
    <div class='ascensorFloor2' style='height:1200px; width:1000px; background-color:red;'> 
       blog hree oooo 
    </div> 
    <div class='ascensorFloor3' style='height:1200px; width:1000px; background-color:red;'> 
    aaagg 
    </div> 
    <div class='ascensorFloor4' style='height:1200px; width:1000px; background-color:red;'> 
    dddd 
    </div> 
    <div class='ascensorFloor5' style='height:1200px; width:1000px; background-color:red;'> 
    ddd 
    </div> 




     <script src="/lib/jquery-1.8.0.min.js"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> 
     <script src="/lib/jquery.ascensor.js"></script> 
     <script src="/lib/bootstrap/js/bootstrap.min.js"></script> 

<script> 
    $(function() { 

    $('#ascensorBuilding').ascensor({ 
    AscensorName: 'ascensor', 
     AscensorFloorName: '1.0 | 1.1 | 1.3 | 4.3 | 5.4 | 5.5 | 5.6 | 7.6 | 8.6 | 8.7 | 8.8 | 8.9 | 10.2', 
     Time: 9000, 
     WindowsOn: 1, 
     Direction: "chocolate", 
     AscensorMap: '1|1 & 2|1 & 3|1 & 3|2 & 3|3 & 4|3 & 5|3 & 3|4 & 3|5 & 4|5 & 5|5 & 6|5 & 3|6', 
     Easing: 'easeInOutQuad', 
     KeyNavigation: true, 
     Queued: false, 
     QueuedDirection: "y" 
     }) 
    }); 

</script> 

我按照插件頁面方向，但仍然無法得到它的工作。有人可以幫我解決嗎？非常感謝！

Answer 1

您正在設置每個樓層類到ascensorFloorX。您需要將id改爲這些值。您可以通過查看所鏈接頁面的來源來查看一個有效的示例。

I.e.這

<div class='ascensorFloor1' style=''> 
    ^

應該是這個

<div id='ascensorFloor1' style=''> 
    ^

此外，您<div id='ascensorBuilding'>缺少結束標記。

Answer 2

根據文檔。您應該首先嚐試使用<section>，並在工作時更改它以滿足您的需求。

HTML鏈接

<li><a class="ascensorLink ascensorLink1"></a></li> 
<li><a class="ascensorLink ascensorLink2"></a></li> 

HTML內容

<div id="ascensorBuilding"> 
     <section> 
      //floor one content here 
     </section> 

     <section> 
      //floor two content here 
     </section> 

     <section> 
      //floor three content here 
     </section> 
    </div> 

JAVASCRIPT

$('#ascensorBuilding').ascensor({ 
    AscensorName:'ascensor', 
    ChildType:'section', 
    AscensorFloorName:'Home | Implementation ', 
    Time:1000, 
    WindowsOn:1, 
    Direction:'chocolate', 
     AscensorMap:'2|1 & 2|2 & 3|2 & 2|3 & 2|4 & 1|4 & 2|5', 
     Easing:'easeInOutQuad', 
     KeyNavigation:true, 
     Queued:false, 

});