jquery - 共享点 2010 : Image preview on hover in New Item Form

标签 jquery css sharepoint-2010 sharepoint-designer

我从 spjsblog 中改编了以下代码在我的 SharePoint 网站上工作。该代码是一个 Jquery 脚本,用于在用户将鼠标悬停在列表中的链接上时在预览 Pane 中显示图像。

<script type="text/javascript" src="../../Javascript/jquery-1.4.2.min.js"></script>  

<script type="text/javascript">  



function imagePreview(){  

arrOfImageTypes = ['jpg','jpeg','gif','png'];  

$("table.ms-listviewtable td.ms-vb2 a").hover(function(e){  

var href = this.href;  
var img = href.substring(href.lastIndexOf('.')+1).toLowerCase();  

if(href.indexOf('http')==0 && $.inArray(img,arrOfImageTypes)>-1){  

   $("body").append("<img id='preview' src='"+ this.href +"' alt='Image preview' />");     

}  

 var obj = $("#preview");          
 var offset = $(this).offset();  
 var winHeight = $(window).height();  
 var winWidth = $(window).width();  
 var scrollLeft = $(window).scrollLeft();  
 var scrollTop = $(window).scrollTop();  
 var objHeight = obj.outerHeight();  
 var objWidth = obj.width()+15;  

 if(((winWidth+scrollLeft)-offset.left)<objWidth){  

      offset.left=((winWidth+scrollLeft)-objWidth);  

 }  

 var maxHeight = (winHeight+scrollTop)-offset.top;  

 if(objHeight>maxHeight){  

     if(offset.top-scrollTop>objHeight){  

         offset.top=offset.top-objHeight-20;  

      }  

     height = (objHeight<winHeight)?objHeight:winHeight;  

  }                              

  obj.css({"position":"absolute","top":(offset.top+20)+"px","left":offset.left+20}).fadeIn("fast");                          

 },  

 function(){  

     $("#preview").remove();  

 });           

 };  

 // Call the script on page load  

 $(document).ready(function(){  

     imagePreview();  

 });  

我正在尝试进一步调整它以适用于我在新元素表单中包含的链接。该链接指向引用表 (jpeg),因此用户在填写字段时可以使用某些元素代码。

如何让这段代码在悬停在链接上时显示预览 Pane ?我相信变化发生在函数的第二行,但我不确定如何在代码中引用该字段。

最佳答案

对于那些想知道我想出了如何以新的元素形式进行这项工作的人。我更改了以下代码行:

$("table.ms-listviewtable td.ms-vb2 a").hover(function(e){  

$("td.ms-vb2 a").hover(function(e){  

关于jquery - 共享点 2010 : Image preview on hover in New Item Form,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17449227/

相关文章:

HTML CSS 框样式

Sharepoint 使用工作流更改 Sharepoint Designer 中的内容类型

javascript - 为什么这个 jQuery 不向下滑动/显示隐藏(向上滑动)的元素?

SharePoint 2010 发布网站 - 如何在不通过工作流的情况下启用发布

jquery - 在 contenteditable 中交替字体颜色

jquery - 在 JQueryUI datepicker 提交表单中输入 key

ajax - 当 ajax 调用失败时,如何阻止 Bootstrap x-editable 更新已编辑字段?

css - 无法删除填充CSS

Javascript - 未捕获的类型错误 : Cannot read property 'value' of undefined

php - 当我在 YII 中使用 CListView 小部件时,我整个网站的字体大小都会发生变化。 (我使用 flowtype 进行字体缩放)