sharepoint 2010:如何修改search box的样式

方法一,使用jQuery修改search box的icon

1.sharepoint 2010的master page上,search box是使用DelegateControl来生成的,  

   <div id="s4-searcharea" class="s4-search s4-rp">
   <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
    <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
   </asp:ContentPlaceHolder>
   </div>

实际上是:
< a id="ctl00_PlaceHolderSearchArea_ctl01_S3031AEBB_go" title="Search" href="javascript:S3031AEBB_Submit()">

<img title="Search" class="srch-gosearchimg" οnmοuseοver="this.src=‘\u002f_layouts\u002fimages\u002fgosearchhover15.png ‘” οnmοuseοut="this.src='this.src='\u002f_layouts\u002fimages\u002fgosearch15.png’“ alt="Search"  style="border-width:0px;" />

</a>
2.按照Sharepoint 2010:如何在Master page引用jQuery文章添加jQuery引用,此处将采用jQuery来修改go search的图片。

3.在Master page中添加

<script type="text/javascript">
  $("document").ready(function() {
        $(".srch-gosearchimg").attr({src:"/_layouts/images/CustomStyles/gosearch.gif", alt:"go search"}).removeAttr("onmouseover").removeAttr("onmouseout");
     });
</script>
进行转换image和去除"onmouseout”和"onmouseover"属性。

4.完毕。

方法二,按照参考资料1,操作过,但是没有成功获取图片地址。

若有更好的方法,请留言,谢谢!

参考资料:

1.http://labs.steveottenad.com/reskin-restyle-a-sharepoint-2010-search-box/

2.http://blogs.msdn.com/b/pavankumar/archive/2009/03/24/customizing-small-search-box.aspx

3.http://www.hectorportillo.com/2010/05/go-search-sharepoint/

 

 

发布了35 篇原创文章 · 获赞 0 · 访问量 4万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章