用 css 类包装自定义 webpart答案

【问题标题】：Wrap custom webpart with a css class用 css 类包装自定义 webpart
【发布时间】：2012-03-18 19:11:49
【问题描述】：

我正在尝试在 SharePoint 中为自定义 Web 部件添加品牌。我正在尝试向 ms-WPHeader 类添加一些按钮，为此我想用 div 包装整个自定义 Web 部件或向其添加一个 css 类。我无法在我的自定义 Web 部件 xsl 中执行此操作，因为我正在尝试更改 sharepoint 中的一些标准行为。

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

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

【问题讨论】：

标签： sharepoint

【解决方案1】：

您没有提到您是如何创作 Web 部件的，我将尝试介绍几种可能性：

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

您可以简单地用 DIV 或类似的东西包装您的 WebPart（或包装整个 WP 区域） <div id="customWP"><WebPartPages:WebPartZone .../></div>
如果您有权访问 XSL（考虑 DataFormWebPart 或类似的），您可以将 <xsl:template name="dvt_1"> 与您的 DIV 进行内部包装，它在 WP 的所有情况下都可见，即使在空结果中也是如此。

如果这是一个 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>

在 Visual Studio 中，您可能会使用 Visual Web 部件，并且用户控件可以轻松地用您的 DIV 包装
可以在mix中添加jQuery并通过Title找到WP：
```
$("h3.ms-WPTitle span:contains('Web Part Title')").closest("td[id*=_WebPartWP]").addClass("myCustomWP")
```
现在您的 WP 将有一个 .myCustomWP 完全包装它

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

【讨论】：

正是我需要将 css 添加到我的 web partzone。我在我的页面 layout.html 中将样式添加到 <div data-name="WebPartZone" class="custom_class">，它就像一个魅力。 :)

【解决方案2】：

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

【讨论】：

【解决方案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);
        }

问候，

佩德罗

Mixit.nl

【讨论】：