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

我没有Sharepoint安装我可以测试它，但我觉得有必要尝试;）。如果你可以让你的搜索框看起来像演示的搜索框，那么这段代码可以让你有一个很好的开始，使用CSS来获得漂亮的垂直堆叠外观。

     <script type="text/javascript">
            $(function(){
                //Hide Default search Icon
                $('.srch-gosearchimg').hide();  
//removed the line below, your html template included it already
                //$('.ms-sbplain').wrap('<div class="customSearchBox">');   
    //save the current 'scopes' drop down, we're about to delete its current location
                var scopes = $('.ms-sbscopes').clone();
    //delete the standard 'scopes' drop down
                $('.ms-sbscopes').remove();
    //wrap our scopes Copy in a Div.  change this class with css to position it correctly.

//removed this line, let's just get it to show up again.
//                    scopes.wrap("<div class=''>");
    //this code sticks the 'scopes' dd ahead of the '.ms-sbplain' item, not behind it like the demo
                $('.customSearchBox').prepend(scopes);
            });     
        </script>

Answer 2

如果您正在使用样式，则需要查看html而不是aspx代码。对于这种事情，我通常使用FireBug或Chrome Inspect Element来查找有效的样式，然后将它们复制到母版样式表。

你可以单独用css做你想做的事，虽然我怀疑你仍然需要jquery，就像你找到的例子一样--css不能重新排序元素或删除表。

Answer 3

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

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

我知道使用.eq（）很麻烦，但是SP2010没有为你需要定位的单元格提供唯一的类。将范围下拉列表放入正确的单元格后，使用CSS转到城镇，以便按照您想要的方式进行查找。如果您希望在搜索框下方显示下拉列表，也可以使用.append（）而不是.prepend（）。

另请注意，搜索按钮包含在其他单元格中，因此您可能会遇到与下拉列表宽度有关的问题。

SharePoint搜索和搜索Scrope框堆叠在一起

3 个答案: