-3

我一直在对 jQuery 的 Datepicker 插件进行一些研究。我很好奇他是如何创建节点并修改它们的。

我发现很有趣：

@ 113:   this.dpDiv = bindHover($('<div id="' + this._mainDivId + '" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>'));

bindHover 函数的考虑并不重要，它接受引用并委托一些事件，例如鼠标悬停等。

有趣的是 id 属性，它说 this._mainDivId 所以我检查了它并...

@ 34:       this._mainDivId = 'ui-datepicker-div'; // The ID of the main datepicker division

没有使用唯一的 id，它是一个集合 id。我认为它必须是独一无二的，因为通常一个页面上使用的日期选择器不止一个。

这是 jQuery，它必须是一个好习惯......我只是不知道为什么或如何这有帮助。

4

3 回答 3

3

这是通过向两个输入添加日期选择器生成的 html。请参阅以下示例：http: //jsfiddle.net/AC5Py/

<body>
<input id="picker1" class="hasDatepicker">
<input id="picker2" class="hasDatepicker">
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="position: absolute; top: 21px; left: 168.7px; z-index: 1; display: block;">
</body>

似乎只有一个日期选择器组件被添加到页面中，并且它被指定为页面上建立的日期选择器的每个输入重用。基本上，他们正在重用为日历生成的标记。

于 2013-01-13T23:57:23.453 回答
3

查看源代码，看起来虽然页面上可能有许多 datepicker 实例，但一次只打开一个 datepicker 窗口（参见示例）。每个日期选择器都使用相同的dpDiv元素来显示其内容，因此 div 被赋予一个唯一的 ID。

于 2013-01-13T23:57:48.047 回答
1

当您通过 jquery 将 datepicker 添加到输入时，它是这样完成的

$('#startDate').datePicker({..});

唯一的 id 是startDate jquery 将在呈现特定日期选择器时处理 id 和类的更改。一次只能显示一个日期选择器，我不会担心具有相同 id 的不同元素，只要您不自己给它们相同的 id - 一切都会好起来的

于 2013-01-13T23:57:01.607 回答