как показать div под выделенным текстовым полем

Question

мне не нужны какие-либо календари, датеры или таймеры .. я просто хочу знать ...

Может кто-нибудь сказать, пожалуйста, как появляются элементы div, когда пользователь нажимает на некоторыеконкретные текстовые поля ...

см. по этой ссылке .. http://pttimeselect.sourceforge.net/example/index.html

я не хочу показывать календарь или указатель времени .. но могут быть некоторые изображения с некоторыми деталями .. чтоэто не часть вопроса .. я просто хочу показать какой-то div с данными "blabla" ...

Спасибо

Ох .. я нашел это ..

Я понял .. в jquery я нашел метод "offset ();"что далее дает мне свои 'левые и верхние значения .. .. Спасибо

АЛЬХАМДУЛИЛЛА

Answer 1

Что ж, лучший способ, который я могу придумать, - это использовать JQuery и генерировать div на лету, когда на ваш элемент нажимают.

Элемент div должен быть абсолютно позиционирован и установлен для отображения: нет (если вы хотите эффект слайда). Это быстрый пример, который я сделал для показа div:

$('.moreInfo').click(function(){
  var data = "Whatever data you want to show in the div";
  var div = $('<div />').text(data)
                        .css('display', 'none')
                        .css('position', 'absolute')
                        .css('top', $(this).outerHeight() + $(this).offset().top)
                        .css('left', $(this).position().left)
                        .css('width', '200px')
                        .css('height', '300px')
                        .css('border', '1px solid #000');
  $(this).after(div);
  div.slideDown(500);
});

(CSS также может быть отдельным CSS-правилом и изменен по вашему усмотрению, за исключением атрибутов 'top' и 'left')

Это открывает новый div для каждого клика, поэтому вы, возможно, захотите проверить, существует ли div, а затем удалите его.

Answer 2

Самый простой способ - определить функции для поля ввода по фокусу и размытости:

<input id="sampleInput" type="text" onfocus="showDiv()" onblur="hideDiv()" />
<div id="content" style="position:absolute;top:0;left:0;visible:false;">...</div>

РЕДАКТИРОВАТЬ: Вот некоторый psuedocode, с которого можно начать

//This will give you the distance from the top of the page to the input box
inputTop =  inputElement.offsetTop;     

//This will give yout he height of the input element    
inputHeight = inputElement.offsetHeight;

//Now set the top of the content div to be the sum of the offsets:
contentDiv.style.top = inputTop + inputHeight;

//Now show the content div
contentDiv.style.visible = "true";