有人可以解释一下这个 jquery datepicker 示例吗
这是该网站的链接: http://www.kelvinluck.com/assets/jquery/datePicker /v2/demo/datePickerClickInput.html
我正在查看名为“日期 1”的文本框。
该文本框旁边有一个小日历图标。单击后,日期选择器将打开。是什么让这行得通?我似乎无法弄清楚。
我理解文本框是如何工作的,因为它有一个名为 .date-pick 的类,它使用 jquery 获取 datepicker 函数。
但日历是通过一个名为 dp-choose-date 的类来应用的。我在源代码中找不到这个类。
我想我在这里有点困惑。
Here is a link to the site:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerClickInput.html
I'm looking at the text box called date 1.
There is a little calendar icon next to the text box. When it's clicked, the datepicker opens. What makes this work? I can't seem to figure it out.
I understand how the text box works because it has a class called .date-pick which gets the datepicker function with the jquery.
But the calendar is applied with a class called dp-choose-date. No where in the source can I find this class.
I think I'm confused a little here.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
该类由日期选择器插件应用,可能使用
addClass
函数。该插件在初始化时可能会创建一个DIV
(id=;dp-popup'
),其中包含当前月份的必要值。该DIV
是隐藏的 (display:none
),但在首次初始化时仍然具有 dp-popup 类。当您单击文本框或单击按钮时,系统会为这些事件分配一个事件处理程序(文本框为focus
,按钮为click
),用于设置DIV
不被隐藏,并且还将其放置在文本框的正下方。我没有深入研究代码,但稍微看了一下标记,我怀疑它是如何工作的。
The class is being applied by the date picker plug-in, probably using the
addClass
function. The plug-in, when it's initialized, probably creates aDIV
(id=;dp-popup'
) that has the necessary values for the current month. ThatDIV
is hidden (display:none
) but still has the class of dp-popup when first initialized. When you click in the textbox or click the button, there's an event handler assigned to those events (focus
for the textbox,click
for the button) that sets the display style of theDIV
to not be hidden and it also positions it right below the text box.I didn't dig into the code a whole lot, but looking at the markup a little, that's how I suspect it's working.