2012-07-18 74 views
1

我想將動態內容添加到JQuery Accordion容器。我的代碼差不多的作品,但有一個問題。Jquery Accordion未重構內容

Screenshot

我無法弄清楚如何獲得第一容器識別新的圖像。它的行爲就像容器中沒有任何東西。我懷疑這與用Javascript加載圖像有關,但我不是專家!我的猜測是有些不合適的。所有按鈕仍然起作用,手風琴在所有其他區域都應如其行。我試圖設置不同的參數,例如autoheight,clearStyle等。沒有什麼適合我的。這裏的修整商品:

HTML

......... 

<section id="rightMenu"> 
    <div id="addHolder"> 
     <h3 class="topHeader"><a href="#">Quick Pick</a></h3> 
      <ul id="quickPick"></ul> 

     <h3><a href="#">Notes</a></h3> 
     <div> 
      <p> 
      ...... 
      </p> 
     </div> 
     <h3><a href="#">Quiz</a></h3> 

     <div> 
      <p> 
      ..... 
      </p> 
     </div> 
     <h3><a href="#">Image Options</a></h3> 

     <div></div> 
......... 

<script src="js/jquery-1.7.2.min.js"></script> 
<script src="js/jquery-ui-1.8.21.custom.min.js"></script> 
<script src="js/modernizr.js"></script> 
<script src="js/modUI.js"></script> 
<script src="js/imageProvider.js"></script> 
<script> 
window.onload = imageProvider.initLinks; 
$(document).ready(modUI.modAccord); 
</script> 

JS - modUI.js

var modUI = { 
init: function(){ 
}, 
modAccord: function(){ 
    $("#addHolder").accordion({ 
     autoHeight: true, 
     navigation: true, 
     clearStyle: true 
    }); 
} 
}; 

JS - imageProvider.js

var imageProvider = { 

thisPic:0, 

initLinks:function() { 
    imageProvider.imageList(14, 2); 
    document.getElementById("nextPic").onclick = imageProvider.processNext; 
    document.getElementById("prevPic").onclick = imageProvider.processPrev; 

}, 

    .... 

multiDimensionArray:function (rows, columns) { 
    var myArray = new Array(rows); 
    for (var i = 0; i < rows; i++) { 
     myArray[i] = new Array(columns); 
     for (var j = 0; j < columns; j++) { 
      myArray[i][j] = ""; 
     } 
    } 
    return (myArray); 
}, 

    ..... 

imageList:function (qty, data) { 
    var imageData = imageProvider.multiDimensionArray(qty, data); 
    var filePath = './images/mods/angiograph/head/'; 
    var imgPrefix = 'Ag'; 
    var imageType = '.jpg'; 


    for (var i = 0; i < qty; i++) { 
     imageData[i][1] = filePath + imgPrefix + (i + 1) + imageType; 
    } 

    for (var j = 0; j<imageData.length; j++){ 
      $("<li>", { html:'<img src="' + imageData[j][1] + '" width="75" height="75"/>'}).appendTo("#quickPick"); 
    } 

} 
}; 

CSS

#mainSection #rightMenu { 
position: absolute; 
width: 15%; 
height: 90%; 
left:65%; 
top: 5%; 
background-color: #d3cbbd; 

-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 

-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, .75); 
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, .75); 
box-shadow: 0px 0px 15px rgba(0, 0, 0, .75); 
} 

#mainSection #imageHolder img{ 
position: absolute; 
width: 63%; 
height: 70%; 
left: 15%; 
top: 15%; 
} 

#mainSection #rightMenu #addHolder{ 
position: absolute; 
width: 100%; 
height: 100%; 
left:0; 
top: 0; 
} 

#mainSection #rightMenu #addHolder h3.topHeader { 

position: relative; 
top: -1px; 
-webkit-border-radius: 10px; 

-moz-border-radius-topleft: 10px; 
-moz-border-radius-topright: 10px; 

border-top-left-radius: 10px; 
border-top-right-radius: 10px; 
} 

#mainSection #rightMenu #addHolder p{ 
font-size: 1.1em; 
font-family: verdana, sans-serif; 
} 

#mainSection #rightMenu #addHolder #quickPick{ 
position: absolute; 
list-style: none; 
top: 6em; 
left: .1em; 
height: 30%; 
} 

#mainSection #rightMenu #addHolder li{ 
display: inline; 
float: left; 
margin-left: .2em; 
} 

.ui-accordion { width: 100%; } 
.ui-accordion .ui-accordion-header { 
cursor: pointer; 
position: relative; 
margin-top: 1px; 
background-color: #456f74; 

} 
.ui-accordion .ui-accordion-li-fix { display: inline; } 
.ui-accordion .ui-accordion-header-active { 
border-bottom: 0 !important; 
background-color: #eb5937; 
} 
.ui-accordion .ui-accordion-header a { 
display: block; 
font-family: verdana, sans-serif; 
font-size: 1em; 
padding: .65em .65em .65em 1em; 
text-decoration: none; 
color: #f5f5f5; 

} 
.ui-accordion-icons .ui-accordion-header a { 
padding-left: .5em; 
} 
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } 
.ui-accordion .ui-accordion-content { 
padding: 1em 1em; 
border-top: 0; 
margin-top: -25px; 
position: relative; 
top: 0; 
overflow: auto; 
display: inline-block; 

} 

回答

1

不宜<ul id="quickPick"></ul>真的<div><ul id="quickPick"></ul></div>

+0

你說得對!好眼睛。謝謝你的幫助。 – atomSmasher 2012-07-18 06:31:55