jquery - SharePoint 搜索和搜索范围框相互堆叠

Question

我有一个要品牌化的 SharePoint 网站，其中一个请求是将搜索控件和搜索文本字段放在彼此之上(内联？)。我在网上看到一些 jQuery 魔术翻转这些框的位置以改变外观，如下所述: http://labs.steveottenad.com/reskinrestyle-the-sharepoint-2010-advanced-search-box/

我想要做的是将带有下拉菜单的搜索控件放置在文本输入框的顶部，以便它们相互堆叠。虽然上述文章使用了 jQuery，但我认为 CSS 也可以用来完成我的请求。

这是我现在搜索区域的主页代码。我认为它有点乱，我知道这没有帮助..所以我很难识别哪个 div 是哪个搜索组件。

<td style="width: 2px">
<div id="s4-searcharea" class="s4-search s4-rp"></div>
<div class="customSearch">
    <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
<SPSWC:SearchBoxEx id="SearchBox" runat="server" 
GoImageUrl="/_layouts/images/gosearch.gif" 
GoImageUrlRTL="/_layouts/images/gosearch.gif" 
DropdownModeEx=ShowDD 
DropdownWidth="120"
UseSiteDefaults="true"      
QueryPromptString="Keyword(s)"
FrameType="None" WebPart="true" __WebPartId="{551E15C2-XXX}"/>
</asp:ContentPlaceHolder>                       
    </div>
    </td>

我在想我将需要使用 display:inline 属性并可能为两个类分配一个 z-index 值？任何帮助设置都会很棒。

Answer 1

我是您在问题中引用的文章的作者。我确信这已经得到解决，但对于将来可能偶然发现它的任何人，您将需要使用 javascript/jquery 来更改搜索控件的标记。默认情况下，范围下拉列表位于不同的表格单元格中，您无法单独使用 CSS 获得堆叠外观。尝试这样的事情:

var scopedropdown = $('.ms-sbscopes select');
$('.ms-sbrow .ms-sbcell').eq(1).prepend(scopedropdown);

我知道使用 .eq() 是 hacky，但 SP2010 没有为您需要定位的单元格提供唯一类。一旦你将范围下拉列表放入正确的单元格中，就可以使用 CSS 去城里让它看起来像你想要的那样。如果您想要搜索框下方的下拉列表，您也可以使用 .append() 而不是 .prepend() 。

另请注意，搜索按钮包含在不同的单元格中，因此您可能对下拉菜单的宽度有一些疑问。