javascript - 调整代码以在 Sharepoint 中扩展 Web 部件

标签 javascript jquery html css sharepoint

我正在尝试调整我在网上找到的一些代码,以在 Sharepoint 网站的 Web 部件旁边创建一个展开按钮。此代码的问题是默认情况下所有 Web 部件都已展开,您必须单击才能折叠它。我只想让我的常见问题解答 (WebPartWPQ7) Web 部件折叠起来,用户可以通过单击将其展开。其他 Web 部件不需要展开/折叠按钮。

<script type="text/javascript">
//
// Expand/Collapse Buttons
//

function WPToggle(thisId, ImageId) {
    if (document.getElementById(thisId).style.display == "none") {
        document.getElementById(thisId).style.display = "";
        document.getElementById(ImageId).src = "/_layouts/images/minus.gif";
    } else {
        document.getElementById(thisId).style.display = "none";
        document.getElementById(ImageId).src = "/_layouts/images/plus.gif";
    }
}

function ExpandCollapseBody() {
    var i = 1;
    var WPid = "WebPartWPQ1";
    var WPtitleid = "WebPartTitleWPQ1";
    var Toggleid = "ToggleImage1";
    do {
        try {
            document.getElementById(WPtitleid).innerHTML = '<IMG id="' + Toggleid + '" onClick="WPToggle(\'' + WPid + '\',\'' + Toggleid + '\')" alt="Expand/Collapse" style="margin:6px 5px 0px 2px; float:left; cursor:pointer;" src="/_layouts/images/minus.gif" />' + document.getElementById(WPtitleid).innerHTML;
            if (document.getElementById(WPid).style.display == "none") {
                document.getElementById(Toggleid).src = "/_layouts/images/plus.gif";
            }
        } catch (err) {}
        i = i + 1;
        WPid = "WebPartWPQ" + i;
        WPtitleid = "WebPartTitleWPQ" + i;
        Toggleid = "ToggleImage" + i;
    } while (document.getElementById(WPid))
}

_spBodyOnLoadFunctionNames.push("ExpandCollapseBody()");
</script>

最佳答案

如果您想隐藏第 7 个 Web 部件,只需将 if (i == 7) WPToggle(WPid, ToggleId); 添加到初始化函数即可。在您标记问题时使用 jquery 稍微调整您的代码,我认为您可以使用它:

function WPToggle(thisId, ImageId) {
    var isVisible = $('#' + thisId).is(':visible');
    $('#' + thisId).toggle(!isVisible);

    var img = isVisible ?  'plus' : 'minus';
    $('#' + ImageId).attr('src', '/_layouts/images/' + img + '.gif');
}

function ExpandCollapseBody() {
    var i = 1;
    do {
        var WPid = 'WebPartWPQ' + i;
        var WPtitleid = 'WebPartTitleWPQ' + i;
        var Toggleid = 'ToggleImage' + i;
        var htmlImg = '<img id="' + Toggleid + '" alt="Expand/Collapse" style="margin:6px 5px 0px 2px; float:left; cursor:pointer;" src="/_layouts/images/minus.gif" />';
        var wpTitle = $('#' + WPtitleid).data('idx', i);
        wpTitle
            .html(htmlImg + wpTitle.html())
            .click(function() {
                var idx = $(this).data('idx');
                WPToggle('WebPartWPQ' + idx, 'ToggleImage' + idx);
            });
            if (i == 7) WPToggle(WPid, Toggleid);
        i++;
    } while ($('#WebPartWPQ' + i).length == 1)
}

_spBodyOnLoadFunctionNames.push("ExpandCollapseBody()");

关于javascript - 调整代码以在 Sharepoint 中扩展 Web 部件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48233713/

相关文章:

jquery - 如果没有在 css 中设置字体,html 中元素的默认字体是什么

jquery - 如何对加载的按钮应用单击操作

javascript - jQuery UI Slider 不改变默认值

javascript - Ember JS : Computed Property returning NaN

javascript - 我如何证明我添加的类(class)有效?

javascript - JQuery 提交显示对话框

html - 如何在TD元素中垂直对齐图像和文本?

javascript - ruby on rails 显示登陆页面不同于本地主机和 html 文件

html - 获取 SQL 数据库邮件以格式化具有 2 列的 HTML 表

javascript - Jquery 在解析大型 csv 文件时崩溃