SharePoint 2010サイトのプレビューペインにJavaScript/jQueryを書き込む方法は？

Question

コンテンツエディタWebパーツにJavaScriptコードを追加して、リストに表示される日付の色に影響を与えます。リストはプレビューペインのデザインで設定され、javascriptコードを適用する必要がある複数のエントリがあります。

JavaScriptは日付を選択し、今日の日付との関係に基づいて日付が緑、黄色または赤である必要があるかどうかを決定します。 javascriptは読み込まれたときにプレビューウィンドウに表示される最初の項目で正しく機能しますが、他の項目が選択されている場合は必要に応じて色が変更されません。リスト内の個々の項目にJavaScriptコンディショニングを適用するには、JavaScriptで何を追加/変更する必要がありますか？ここで

リストはページ上の次のようになります。ここでは

The list on the page

は、コンテンツエディタ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

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); 
} 

上記のコードでは、各項目のタイトル（タイトルはCSSクラスms-vb-titleが施されてい仮定）のmouseenterイベントにFormatDates方法を添付する。