Question

我有一个网页，我试图在搜索框中放置搜索功能。我放了一个图像。当用户点击图像时，我想显示一个带有一些内容的小div（各种过滤器选项，如“搜索联系人，搜索电子邮件，搜索垃圾等“）。我想将div放在搜索框下方。现在我想知道我应该在HTM标记中放置这个div？我想知道如何将div置于特定位置。（有些像autosuggest）。如何在javscript中处理这个？我的最终目标是在用户点击图片（showSearchOptions函数）时在搜索框（文本框）下显示Div

<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>

Answer 1

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";
 }

Answer 2

项目1.你把新div放在哪里并不重要，因为你会把它放在位置：绝对;并显示：无;这将从文档流中删除它。然后，当它被定位和显示时，它将只显示你放置它的位置。（见答案1）。

Answer 3

在担心javascript之前，请使用您想要的搜索选项div设置所有页面，就好像它是一个静态页面一样。但是，相对于某个容器，将div设置为position: absolute;，这样当它出现时，它不会弄乱周围的其他元素。绝对定位时，HTML代码中的位置并不重要 - 除了position: relative;的容器内部 - 因为CSS会将其定位在您想要的位置。

如果您对布局感到满意，请将该div设置为display: none;，然后设置javascript以在单击图像时显示该ID。你最好用某种框架来帮助解决这个问题。例如，在jQuery中，您可以使用以下内容：

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

用于注册点击的<a>不是必需的。

在文本框下动态放置Div以显示选项

3 个答案: