jQuery timepicker вызывает по клику img - PullRequest
Новая
       14

jQuery timepicker вызывает по клику img

0 голосов
/ 01 декабря 2009

На данный момент компонент jQuery 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>

Это часть JSP для таймера (ввод с определенным идентификатором): 

<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 печальна, этот идентификатор "не определен", но идентификатор такой же, как и в конечном HTML-коде

Это модифицированный код для тега IMG, чтобы вызвать средство выбора времени: 

<img id="time-img" onClick="jQuery(<portlet:namespace/>_time).timePicker({startTime:new Date(0, 0, 0, 0, 0, 0), step: 30});" src="${eventTimeImage}"/>

Попробовал идентификатор с кавычками, тот же результат.

Возможно ли это вообще для Timepicker? я имею в виду вызвать его с помощью onClick. Или он загружается один раз?

Ответы [ 2 ]

2 голосов
/ 02 декабря 2009

Я хочу ответить, пока никто не сделал.

Итак, решение оказалось намного проще, чем повесить вызов Timepicker на onClick.

Вам нужно просто сфокусировать ввод, щелкнув по изображению: 

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

Спасибо автору плагина: Timepicker site

Таким образом, это решение может быть использовано в других подобных случаях, с указателями даты и т. Д.

0 голосов
/ 10 мая 2010

Другая возможность (возможно, более простая) - использовать изображение в качестве фона для поля. Затем, когда пользователь щелкает изображение, он действительно щелкает по входу, поэтому средство выбора отображается по желанию. Это решение не требует кода 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>
...