如何在SharePoint 2010站点上为预览窗格编写JavaScript/jQuery？

Question

我将一些JavaScript代码添加到内容编辑器web部件中，以影响列表中出现的日期的颜色。该列表是使用预览窗格设计设置的，需要对多个条目应用javascript代码。

javascript选择日期，并根据日期与当前日期的关系来决定日期是否需要绿色、黄色或红色。当加载预览窗格时，javascript在预览窗格中显示的第一个条目正确工作，但在选择其他条目时，颜色不会根据需要更改。要将JavaScript条件条件应用于列表中的每个条目，需要在javascript中添加/更改哪些内容？

下面是页面上的列表：

页面上的列表

下面是放置在内容编辑器web部件中的JavaScript：

<script src="/agencies/wtc/cop/wtctasks/SiteAssets/jquery-1.8.1.min.js"></script><script>

$(document).ready(
function ()
{
       $("div.ms-ppleft table tr td.ms-vb-title").trigger("onfocus");
}
)




//Added by Philip Speroni on April 22, 2016 to apply color styling to dates that are within 30 days of the current date


_spBodyOnLoadFunctionNames.push("FormatDates");

function FormatDates()
{
var contentTable = document.getElementById("MSO_ContentTable");
var tables = contentTable.getElementsByTagName("TABLE");
var formTable;

// find the table we need to work with

for (i = 0; i < tables.length; i++)
{
    if (tables[i].summary.trim() == "Training Records")
    {
        var innerTables = tables[i].getElementsByTagName("TABLE");

        for (j = 0; j < innerTables.length; j++)
        {
            if (innerTables[j].className == "ms-formtable")
            {
                formTable = innerTables[j];
                break;
            }
        }

        break;
    }
}

// if we found the correct table, then find the right cells

if (formTable)
{
    for (i = 0; i < formTable.rows.length; i++)
    {
        var currentRow = formTable.rows[i];

        if (currentRow.cells[0].innerText == "Active Shooter" || currentRow.cells[0].innerText == "AT Level 1" || currentRow.cells[0].innerText == "CTIP" || currentRow.cells[0].innerText == "Cyber Awareness" || currentRow.cells[0].innerText == "HIPAA" || currentRow.cells[0].innerText == "No Fear" || currentRow.cells[0].innerText == "OPSEC" || currentRow.cells[0].innerText == "OPSEC for SmartPhone's & Tablets" || currentRow.cells[0].innerText == "Security Orientation/Refresher" || currentRow.cells[0].innerText == "SHARP" || currentRow.cells[0].innerText == "SHARP - F2F" || currentRow.cells[0].innerText == "Social Networking" || currentRow.cells[0].innerText == "TARP")
        {
            //selects the cell data that needs to be styled
            var cellToStyle = currentRow.cells[1];
            var cellContents = cellToStyle.innerText;

            //creates today's date for comparison to the date in the cell
            var today = new Date();
            var todayParsed = Date.parse(today);

            //creates a date out of the date as a string on the page
            var dateToBeStyled = Date.parse(cellContents);

            //finds the difference in milliseconds between the current date and the date in the cell
            var difference = dateToBeStyled - todayParsed;

            //decides whether to apply styling based on if the dates are within 30 days of each other
            if (difference > 2592000000) {
                cellToStyle.style.color = "#009900";

            }

            if (difference < 2592000000 && difference > 259200000) {
                cellToStyle.style.color = "#cda400";
                cellToStyle.style.fontWeight = "bold";
            }

            if (difference < 259200000) {
                cellToStyle.style.color = "#f00";
                cellToStyle.style.fontWeight = "bold";
            }

        }
    }
}
}</script>

非常感谢你的帮助。

Answer 1

一种方法可能是将您的FormatDates方法设置为每当用户悬停在项目标题上时就触发。

var titles = document.querySelectorAll(".ms-vb-title");
for(var i = 0, len = titles.length; i < len; i++){
    var method = titles[i].attachEvent ? "attachEvent" : "addEventListener";
    titles[i][method]((titles[i].attachEvent ? "on" : "")+"mouseenter",FormatDates);
}

上面的代码将FormatDates方法附加到每个项标题的mouseenter事件(假设标题由CSS类ms-vb-title修饰)。