用css类包装自定义Web部件

Question

我正在尝试在SharePoint中创建自定义web部件的品牌。我正在尝试向类msWPHeader添加一些按钮，为此，我想用div包装整个自定义web部件，或者向其添加css类。我无法在自定义web部件xsl中做到这一点，因为我正在尝试更改sharepoint中的一些标准行为。

我已经尝试了很多方法，但现在我正在使用jQuery添加按钮和高度。

如何添加类或包装我的自定义web部件？

Answer 1

您没有提到如何编写Web部件，我将尝试介绍几种可能性：

通过SharePoint Designer（听起来像是因为您提到了XSL，除非它是一个可以在浏览器中编辑的搜索Web部件）

1. 你可以简单地用DIV或类似的东西包装你的WebPart（或者包装整个WP区域）<div id="customWP"><WebPartPages:WebPartZone .../></div>

2. 如果您有权访问XSL（考虑DataFormWebPart或类似功能），则可以使用DIV对<xsl:template name="dvt_1">进行内包装，它在WP的所有情况下都是可见的，即使在空结果中也是如此。

3. 如果这是一个ContentQueryWP，您将需要编辑样式库中的Header.xsl文件，并创建一个新的头（并在工具部分中设置它）：

   <xsl:template name="CustomBranded" match="*[@GroupStyle='CustomBranded']" mode="header">
     <div class="groupheader item MYCUSTOMWP">
     <xsl:call-template name="OuterTemplate.GetGroupName">
         <xsl:with-param name="GroupName" select="@*[name()=$Group]"/>
         <xsl:with-param name="GroupType" select="$GroupType"/>
     </xsl:call-template>
   </div>
   

4. 在Visual Studio中，您可能会使用Visual Web部件，并且用户控件可以很容易地用DIV 包装

5. jQuery可以添加到混合物中，并通过标题找到WP：

   $("h3.ms-WPTitle span:contains('Web Part Title')").closest("td[id*=_WebPartWP]").addClass("myCustomWP")
   

   现在你的WP将有一个.myCustomWP包装它完全

这些都是我能从脑海中记住的。

Answer 2

通过JavaScript添加所需的类（您可以通过Web部件添加）

Answer 3

我这样做了好几次，从来没有遇到过问题。首先，你必须在你的visual studio项目中映射Layouts文件夹，然后在那里插入CSS（但我想你已经这样做了）

然后你必须在你的代码后面这样做：

CssLink cssLink = new CssLink();
cssLink.DefaultUrl="/_layouts/PROJECTNAME/styles/FILE.css";
        if (!this.Page.Header.Controls.Contains(cssLink)) {
            this.Page.Header.Controls.Add(cssLink);
        }

问候，

Pedro

Mixit.nl