2

I have a webpage where i am trying to put a search feature.along with the search box, i put an image.When user clicks on the image i want to show a small div with some content(various filter options like "search in contacts,search in emails,search in trash etc").I want to place the div just below the search box. Now i want to know where should i place this div in my HTM markup ? I am wondering how can i place the div on a purticular position. (Some thing like the autosuggest).How do i handle this in javscript ? My ultimate objective is to show the Div under the searchbox (text box) when user clicks on the image (showSearchOptions function ) 

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

3 回答 3

3 
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";
 }
于 2009-11-14T02:26:53.523 回答
0

第 1 项。将新 div 放在哪里并不重要，因为您会将其设置为 position: absolute; 并显示：无；这将从文档流中删除它。然后当它被定位和显示时，它会简单地显示在你放置它的地方。（见答案 1。）

于 2009-11-14T02:30:45.810 回答
0

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

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

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

<a>不需要注册点击。

于 2009-11-14T02:34:26.023 回答