在文本框下動態放置Div來顯示選項

我有一個網頁，我試圖在搜索框中放置一個搜索feature.along，我放置了一個image.When用戶單擊圖像時我想顯示一個小div與一些內容（各種過濾器選項，如「搜索聯繫人，搜索電子郵件，搜索垃圾等」）。我想把div放在搜索框的下面。現在我想知道我應該把這個div放在我的HTM標記中？我想知道如何將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>

來源

2009-11-12 Shyju

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-14 02:26:53 Ben

項目1.這沒有多大意義的，你把新的div既然你會把它定位：絕對的;並顯示：無;並且會將其從文檔流中移除。然後，當它被定位並顯示時，它會顯示出你放置的位置。（請參閱答案1.）

來源

2009-11-14 02:30:45 Don

在擔心javascript之前，請將您的搜索選項div設置爲您想要的所有頁面，就像它是靜態頁面一樣。不過，將該div設置爲相對於某個容器的position: absolute;，以便當它出現時，它不會弄亂它周圍的其他元素。當絕對定位時，它在HTML代碼中的位置並不重要 - 除了位於容器的內部，因爲CSS會將其放置在您想要的位置。

當您對佈局感到滿意時，將該div設置爲display: none;，然後設置javascript以在點擊圖像時顯示它。你可能最好用某種框架來幫助解決這個問題。在jQuery的，舉例來說，你可以使用這樣的事情：

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

的<a>登記點擊是沒有必要的。

來源

2009-11-14 02:34:26 carillonator

在文本框下動態放置Div來顯示選項

回答

相關問題