jQuery Akkordeon von $ ("div id = \" Akkordeon \ ">

Question

Ich verwende GWTQuery und GWTQuery-UI, aber ich denke, es wäre das gleiche für JQuery-UI arbeiten.

Wie kann ich ein Akkordeon erstellen ohne das Akkordeon in dem HTML-doc definieren?

zB

$("<div id=\"accordion\"> <h3><a href=\"#\">Section 1</a></h3><div><p>Mauris.</p></div><h3><a href=\"#\">Section 2</a></h3><div><p>Sed non urna.</p></div><h3><a href=\"#\">Section 3</a></h3><div><p>Nam enim risus.</p><ul><li>List item one</li><li>List item two</li>li>List item three</li></ul></div><h3><a href=\"#\">Section 4</a></h3><div><p>Cras dictum.</p><p>Suspendisse</p></div></div>"); 
    $("#accordion").as(Ui).accordion(); 

Dies überhaupt Text zeigen pflegt. Wenn ich es zu einem Panel-hängen, erhalte ich nur den Text mit dem Abschnitt, aber kein Akkordeon.

Danke

Edit: Erstellen einer leeren div Akkordeon in der HTML-Datei, fügen Sie die Zeichenfolge

$("#accordion") 
      .append("<h3><a href=\"#\">Section 1</a></h3><div><p>Section 1 text here.</p></div>"); 
    $("#accordion") 
      .append("<h3><a href=\"#\">Section 2</a></h3><div><p>Section 2 text here.</p></div>"); 
    $(absolutePanel_1.getElement()).append(
      $("#accordion").as(Ui).accordion()); 

und fügen Sie ihn in einem GWT-Panel arbeitet.

Answer 1

Sie können das Akkordeon in JavaScript erstellen, aber Sie müssen es an ein Element anhängen, damit es auf der Seite angezeigt wird.

Sehen Sie diese jsFiddle für eine Demonstration. Hier ist der Code:

<script type="text/javascript"> 
    $(function(){ 

     //get the accordion container 
     var $accordion = $("#accordion");  

     //append elements to the accordion 
     $accordion.append("<h3><a href=\"#\">Section 1</a></h3><div><p>Section 1 text here.</p></div>"); 
     $accordion.append("<h3><a href=\"#\">Section 2</a></h3><div><p>Section 2 text here.</p></div>"); 

     //turn it into an accordion 
     $accordion.accordion();   

    }); 
</script> 
<div id="accordion"></div> 

Answer 2

Wenn Sie Ihr neues jQuery-Objekt auf eine Variable gesetzt werden Sie in der Lage sein, die accordion() Methode zu nennen, wie folgt aus:

var $div = $("<div id=\"accordion\"><h3><a href=\"#\">Section 1</a></h3><div><p>Mauris.</p></div><h3><a href=\"#\">Section 2</a></h3><div><p>Sed non urna.</p></div><h3><a href=\"#\">Section 3</a></h3><div><p>Nam enim risus.</p><ul><li>List item one</li><li>List item two</li>li>List item three</li></ul></div><h3><a href=\"#\">Section 4</a></h3><div><p>Cras dictum.</p><p>Suspendisse</p></div></div>"); 
$div.accordion(); 

Allerdings kann es sein, Funktionen, die accordion() Anwendungen, die auf dem Element verlassen über das DOM erreichbar sein, so dass dies immer noch nicht funktioniert, da ich es nicht getestet habe.

Der Punkt davon ist auf mich jedoch verloren, da ich nicht den Punkt sehe, Zeit zu verbringen, ein Akkordeon auf einem Element zu schaffen, das nicht gesehen werden kann?