javascript - 从头开始创建 JQuery UI 小部件

Question

目前 JQuery UI 小部件工厂http://wiki.jqueryui.com/w/page/12138135/Widget%20factory提供了构建自定义小部件的所有信息但是我想知道在哪里可以找到如何从头开始创建小部件直到绘制必要时小部件。这让我想到了一个问题，各种 JQuery UI 小部件是否也是从头开始构建的，我们用来附加它们的各种 html 标签是否仅用于功能目的？

Answer 1

jQuery UI 小部件通常在具有小部件基本需求的现有 DOM 元素上调用，这取决于小部件是什么，甚至可以是一个空元素，比如一个空 DIV。

小部件经常以它为基础，并创建许多子元素来正确呈现自己。除非您调用destroy小部件，否则它们将保留在那里，您甚至可以随时覆盖它们的样式等。

一个完美的例子是滑块小部件。您可以将所有参数传递给小部件并在空 DIV 左右调用它，它确实创建了所有必需的子元素，如句柄和其他部分，并且 jQuery UI 的 CSS 框架已经为这些创建的元素提供了样式（基于在小部件创建它们时添加到它们的 CSS 类上）。

因此，在官方滑块示例页面中，这是：

<style>
    #demo-frame > div.demo { padding: 10px !important; }
    </style>
    <script>
    $(function() {
        $( "#slider" ).slider();
    });
    </script>

<div class="demo">

<div id="slider"></div>

</div>

生成：

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