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类。）

所以，在官方slider example page中，这个：

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

从头开始创建JQuery UI小部件

1 个答案: