jQuery timepicker 在 img 点击时调用

发布于 2024-08-12 19:43:55 字数 991 浏览 5 评论 0原文

现在，通过单击输入来调用 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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我的鱼塘能养鲲 2024-08-19 19:43:55

我想回应到目前为止还没有人做过。

因此，解决方案似乎更简单，将 Timepicker 调用挂在 onClick 上。

您只需点击图像即可聚焦输入：

<img id="time-img" onClick="jQuery('#<portlet:namespace/>_time').focus()"/>

感谢插件的作者：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:

<img id="time-img" onClick="jQuery('#<portlet:namespace/>_time').focus()"/>

Thanks to author of plugin:Timepicker site

So this solution may be used in other similar cases, with datepickers etc.

回复收藏 0 原文

糖果控 2024-08-19 19:43:55

另一种可能性（也许更简单）是使用该图像作为该字段的背景图像。然后，当用户单击图像时，他们实际上是在单击输入，因此选择器会根据需要显示。该解决方案不需要 JS 代码。例如：

<input type="text" id="demo" />
<style type="text/css">
  #demo
  {
    background-image:url("image.png");
    background-position:right center;
    background-repeat:no-repeat;
  }
</style>

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:

<input type="text" id="demo" />
<style type="text/css">
  #demo
  {
    background-image:url("image.png");
    background-position:right center;
    background-repeat:no-repeat;
  }
</style>

回复收藏 0 原文

~没有更多了~