jQuery timepicker 在 img 点击时调用
现在,通过单击输入来调用 jQuery timepicker 组件。
这是 timepicker 配置:
<script>
...
oScript.text += "var timeId = '#' + '<portlet:namespace/>' + '_time';";
oScript.text += "$j(timeId).timePicker({startTime:new Date(0, 0, 0, 0, 0, 0), step: 30});";
...
</script>
这是 timepicker 的 jsp 部分(具有特定 id 的输入):
<input id="<portlet:namespace/>_time" name="time" size="6" autocomplete="off" value="${eventTime}"
<img id="time-img" class="ui-timepicker" src="${eventTimeImage}" alt="..." title="..."/>
所以这可以正常工作。
如果要处理 img 上的点击,那么 js 会出现错误,该 id“未定义”,但 id 与结果 HTML 中呈现的相同
这是 IMG 标记的修改代码,以便调用 timepicker:
<img id="time-img" onClick="jQuery(<portlet:namespace/>_time).timePicker({startTime:new Date(0, 0, 0, 0, 0, 0), step: 30});" src="${eventTimeImage}"/>
尝试了带引号的 id,相同的结果。
Timepicker 是否可行?我的意思是用 onClick 调用它。 还是加载过一次?
For now jQuery timepicker component is invoked wit click on input.
This is timepicker config:
<script>
...
oScript.text += "var timeId = '#' + '<portlet:namespace/>' + '_time';";
oScript.text += "$j(timeId).timePicker({startTime:new Date(0, 0, 0, 0, 0, 0), step: 30});";
...
</script>
This is jsp part for timepicker(input with specific id):
<input id="<portlet:namespace/>_time" name="time" size="6" autocomplete="off" value="${eventTime}"
<img id="time-img" class="ui-timepicker" src="${eventTimeImage}" alt="..." title="..."/>
So this works OK.
If to handle click on img, that js error sad, that id "is not defined", but id is the same as rendered in resulting HTML
This is modified code for IMG tag,in order to invoke timepicker:
<img id="time-img" onClick="jQuery(<portlet:namespace/>_time).timePicker({startTime:new Date(0, 0, 0, 0, 0, 0), step: 30});" src="${eventTimeImage}"/>
Tried id with quotation, the same result.
Is it possible for Timepicker at all? i mean invoke it with onClick.
Or it's loaded once?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我想回应到目前为止还没有人做过。
因此,解决方案似乎更简单,将 Timepicker 调用挂在 onClick 上。
您只需点击图像即可聚焦输入:
感谢插件的作者:Timepicker 站点
因此,此解决方案可用于其他类似的情况,例如日期选择器等。
I wish to respond as far nobody done.
So ,the solution appeared to be much simpler,that hang Timepicker invocation on onClick.
Yo need just focus input with click on image:
Thanks to author of plugin:Timepicker site
So this solution may be used in other similar cases, with datepickers etc.
另一种可能性(也许更简单)是使用该图像作为该字段的背景图像。然后,当用户单击图像时,他们实际上是在单击输入,因此选择器会根据需要显示。该解决方案不需要 JS 代码。例如:
Another possibility (perhaps more simple) is to use the image as the background-image for the field. Then, when the user clicks the image, they are really clicking the input, so the picker appears as desired. This solution requires no JS code. For example: