jQuery UI-Widgets werden normalerweise für ein vorhandenes DOM-Element aufgerufen, das die grundlegenden Anforderungen für das Widget erfüllt. Je nachdem, was das Widget ist, kann es sich sogar um ein leeres Element handeln.
Sehr oft nimmt das Widget das als Grundlage und erstellt eine Reihe von untergeordneten Elementen, um sich richtig zu rendern. Wenn Sie nicht destroy für das Widget aufrufen, bleiben diese erhalten, und Sie können ihre Stile usw. sogar überschreiben.
Ein perfektes Beispiel ist das Schieberegler-Widget. Sie können alle Parameter an das Widget übergeben und es nur auf einem leeren DIV aufrufen. Es werden alle erforderlichen untergeordneten Elemente wie das Handle und andere Teile erstellt, und das CSS-Framework von jQuery UI stellt bereits das Design für diese erstellten Elemente bereit in den CSS-Klassen, die das Widget ihnen beim Erstellen hinzufügt).
Also, in der offiziellen slider example page, dies:
<style>
#demo-frame > div.demo { padding: 10px !important; }
</style>
<script>
$(function() {
$("#slider").slider();
});
</script>
<div class="demo">
<div id="slider"></div>
</div>
erzeugt, dass:
<div class="demo">
<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%; "></a></div>
</div>