Question

我希望在使用Javascript和jQuery 鼠标悬停图像 caladd.gif 时，将所有href="javascript:void(0)"替换为href="http://google.com"。

摘要：这意味着只要鼠标位于图片上方，它就会触发 Javascript或jQuery将href更改为其他链接。

HTML：

<div id="AsynchronousViewDefault_CalendarView">
<div class="ms-acal-header">
<div>
    <table class="ms-acal-month">
    </table>
    <div class="ms-acal-vlink">
        <table>
            <tbody>
                <tr>
                    <td><a href="javascript:void(0)" title="Add" evtid="new_item">
                        <img border="0" src="/_layouts/images/caladd.gif">Add</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

使用Javascript：

$(document).ready(function () {
        var abc = $("#AsynchronousViewDefault_CalendarView").find('a[title="Add"][evtid="new_item"]').hover(
          function () {
              $(this).attr('href', 'http://share/Lists/Calendar.aspx?P=P1');
          }
        );
    });

Answer 1

当事件处理程序绑定到mouseover JavaScript事件时，尚未生成日历视图的指定方法的主要问题。

建议您查看一种不同的方法，您可以自定义Calendar控件的行为和属性，而不是修改Calendar的DOM。

如何自定义日历新项链接

New Item链接的呈现模板在sp.ui.applicationpages.calendar.js：

中定义

<a evtid=\"new_item\" title=\"{1}\" href=\"javascript:void(0)\"/><span class=\"ms-addcolumn-span\"><img class=\"ms-addcolumn-icon\" border=\"0\" src=\"{2}\"/></span>{0}</a>

可以覆盖渲染模板，以下代码示例演示了如何将日历New Item href属性设置为https://www.google.com/calendar/render

function setNewItemUrl(url)
{
   //get New Item template      
   var newItemTemplate = SP.UI.ApplicationPages.CalendarVirtualItem.prototype.$7l_0;
   //override template
   SP.UI.ApplicationPages.CalendarVirtualItem.prototype.$7l_0 = newItemTemplate.replace('javascript:void(0)',url);
}

function registerAddItemLink() 
{           
   setNewItemUrl('https://www.google.com/calendar/render');
}
ExecuteOrDelayUntilScriptLoaded(registerAddItemLink,"SP.UI.ApplicationPages.Calendar.js");

用法：

在日历页面上添加CEWP
将指定的JavaScript代码插入Content属性

注意：已在SharePoint 2013中进行过测试

使用Javascript进行鼠标悬停时如何替换所有href元素

1 个答案:

如何自定义日历新项链接