Динамическое размещение Div под текстовым полем для отображения параметров - PullRequest
Новая
       9

Динамическое размещение Div под текстовым полем для отображения параметров

1 голос
/ 12 ноября 2009

У меня есть веб-страница, на которой я пытаюсь добавить функцию поиска. Наряду с окном поиска, я добавляю изображение. Когда пользователь нажимает на изображение, я хочу показать небольшой div с некоторым содержимым (например, различные параметры фильтра " поиск в контактах, поиск по электронной почте, поиск в корзине и т. д.). Я хочу разместить div чуть ниже поля поиска. Теперь я хочу знать, где я должен поместить этот div в мою разметку HTM? Мне интересно, как я могу поместить div в точку скулы. (Что-то вроде autosuggest). Как мне справиться с этим в javscript? Моя конечная цель - показать Div под окном поиска (текстовое поле), когда пользователь нажимает на изображение (функция showSearchOptions) 

<div class="divSearchBar">         

        <div id="searchSelect" style="float:left; width:25px;">             
            <a onclick="showSearchOptions();" href="javascript:;">
                    <img id="searchImg" class="searchMore" border="0" src="Images/searchMore.gif"/>
             </a>               
        </div>
       <div class="searchInputDiv">
            <input type="text" style="border: 1px solid red; padding: 1px 0px 0px 3px;"   value="" name="search" id="search"/>
      </div>
 </div>

Ответы [ 3 ]

3 голосов
/ 14 ноября 2009 
function getPosition(n,endNode){
    var left = 0;
    var top =0;
    var node = n;
    done=false;
    while(!done){
        if(node.offsetLeft!=null)
            left += node.offsetLeft;
        if(node.offsetTop!=null)
            top += node.offsetTop;
        if(node.offsetParent){
            node = node.offsetParent;
        }else{
            done = true;
        }
        if(node == endNode)
            done = true;
    }
    done=false;
    node = n;
    while(!done){
        if(document.all && node.style && parseInt(node.style.borderLeftWidth)){
            left += parseInt(node.style.borderLeftWidth);
        }
        if(document.all && node.style && parseInt(node.style.borderTopWidth)){
            top += parseInt(node.style.borderTopWidth);
        }

        if(node.scrollLeft){
            left -= node.scrollLeft;
        }
        if(node.scrollTop)
            top -= node.scrollTop;
        if(node.parentNode)
            node = node.parentNode;
        else
            done=true;
    }
    return new Array(left, top);
}


function showSearchOptions(){
   var tmp = document.getElementById("mysearchoptions");
   var searchbox = document.getElementById("searchInputDiv"); // add that id, not just class name to html
   var pos = getPosition(searchbox);
   tmp.style.left = pos[0] + "px";
   tmp.style.top = (pos[1] + searchbox.offsetHeight) + "px";
   tmp.style.visibility = "visible";
 }
0 голосов
/ 14 ноября 2009

Прежде чем беспокоиться о javascript, настройте страницу с помощью опции поиска div там, где вы хотите, как если бы это была статическая страница. Установите для этого div значение position: absolute; относительно некоторого контейнера, чтобы при его появлении он не мешал другим элементам вокруг него. При позиционировании абсолютно не имеет значения, где он находится в вашем HTML-коде - кроме как внутри контейнера, который position: relative; - так как CSS разместит его там, где вы хотите.

Если вы довольны макетом, установите для этого div значение display: none;, а затем настройте JavaScript, чтобы он отображался при нажатии на изображение. Вы, вероятно, лучше всего с какой-то рамкой, чтобы помочь с этим. Например, в jQuery вы бы использовали что-то вроде этого: 

$('img#searchImg').click(function() {
     $('div#searchOptions').show();
});

<a> для регистрации клика не требуется.

0 голосов
/ 14 ноября 2009

Пункт 1. Неважно, куда вы поместите новый div, так как вы сделаете его позицией: абсолютным; и отображать: нет; и это удалит его из потока документов. Затем, когда он позиционируется и отображается, он просто покажет, где вы его положили. (См. Ответ 1.)

...