http://www.endusersharepoint.com/2009/02/16/jquery-for-everyone-aop-in-action-loadtip-gone-wild/
Basically, I have adapted it to instead of showing a on-mouse flyout intended for a Calendar, you can set it to flyout on a list item. So below, all it was adapted onto the code was that there was a simple org chart. On mouseover it would fetch the details of a particular team member whose data is held in a list.
<script type="text/javascript">
//check if jQuery already exists
if(typeof jQuery=="undefined"){
//set the path to the jQuery library to use
//var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/";
//if internet then its this file
var jQPath="/SiteCollectionDocuments/";
//jquery-1.3.2.min.js
//add the reference to the page and evaluate
document.write("<script src='",jQPath,"jquery-1.3.2.min.js' type='text/javascript'><\/script>");
}
</script>
<script type="text/javascript">
//check if AOP already exists
if(typeof $.aop=="undefined"){
(function(){var E=1;var B=2;var G=3;var C=4;var F=true;var A=function(K,L,J){var H=K[L];var I;if(J.type==E){I=function(){var M=H.apply(this,arguments);return J.value.apply(this,[M,L])}}else{if(J.type==B){I=function(){J.value.apply(this,[arguments,L]);return H.apply(this,arguments)}}else{if(J.type==C){I=function(){return J.value.apply(this,arguments)}}else{if(J.type==G){I=function(){var M={object:this,args:arguments};return J.value.apply(M.object,[{arguments:M.args,method:L,proceed:function(){return H.apply(M.object,M.args)}}])}}}}}I.unweave=function(){K[L]=H;pointcut=K=I=H=null};K[L]=I;return I};var D=function(I,H){var K=(typeof (I.target.prototype)!="undefined")?I.target.prototype:I.target;var J=[];if(H.type!=C&&typeof (K[I.method])=="undefined"){for(var L in K){if(K[L]!=null&&K[L] instanceof Function&&L.match(I.method)){J[J.length]=A(K,L,H)}}if(J.length==0){throw"No method: "+I.method}}else{J[0]=A(K,I.method,H)}return F?J:J[0]};jQuery.aop={after:function(I,H){return D(I,{type:E,value:H})},before:function(I,H){return D(I,{type:B,value:H})},around:function(I,H){return D(I,{type:G,value:H})},introduction:function(I,H){return D(I,{type:C,value:H})},setup:function(H){F=H.regexMatch}}})();
}
</script>
<script type="text/javascript">
/*
* Copyright (c) 2008 Paul Grenier (endusersharepoint.com)
* Licensed under the MIT (MIT-LICENSE.txt)
*/
//function to handle error in IE
function handleError(){
return true;
}
//global variable for the loadTip container
var loadTip;
//global variable for AOP after advices
var advicesAfter=new Array();
//function to create the loadTip container
function createLoadTip(){
var html="<span>click to close </span>"
+"<img style='vertical-align:text-top;' "
+"src='/_layouts/images/menudark.gif' alt=''/>";
//set loadTip
loadTip=$(document.createElement("div")).attr("id","loadTip")
.html(html).appendTo("body");
//create content area
$(document.createElement("div")).attr("id","tipContent")
.appendTo("#loadTip");
//set AOP advice to get data from ExpGroupRenderData
//arguments(htmlToRender[0], groupName[1], isLoaded[2])
$.aop.around({target:window,method:"ExpGroupRenderData"},
function(invocation){
if (invocation.arguments[2]=="true"){
var group="#tbod"+invocation.arguments[1]+"_";
//set groupName data to loadTip
$.data(loadTip[0],"groupName",group);
}
return invocation.proceed();
}
);
}
//function to bind events to elements
function loadTipEvent(e,a,delay){
//add target data to element
$.data(e,"dispTarget",a);
//bind mouseenter event
$(e).mouseenter(function(event){
//create position variables
var x = event.pageX+10;
var winx = $(window).width();
var y = event.pageY;
var winy = $(window).height();
var ly;
var lx;
//set loadTip out of window
//height fix 2009-02-17: pg (1/3)
loadTip.css({"top":-1000, "left":-1000, "height":""});
//check to see if this target was already loaded
if($.data(loadTip[0],"dispTarget")&&$.data(loadTip[0],"dispTarget")==$.data(e,"dispTarget")){
ly = loadTip.height();
lx = loadTip.width();
//if the box would run off the page, adjust position
if (ly+y > winy) y=y-ly-10;
if (lx+x > winx) x=x-lx-20;
//part of height fix for big boxes 2009-02-17: pg (2/3)
if (y < 0) y=0;
if (ly > winy) loadTip.css({"overflow-y":"auto","height":winy});
//show loadTip
loadTip.css({"top":y, "left":x}).show();
}else{
//if a timer was started, stop
if(loadTip.timer)clearTimeout(loadTip.timer);
//start the delay timer for a data load
loadTip.timer = setTimeout(function(){
//&Force=1 prevents redirection on mysites, other pages ignore
//load ms-formtable into content area
$("#tipContent").load(a+"&Force=1 .ms-formtable", function(){
//after data loads, remove width attributes from tds
loadTip.find("td").removeAttr("width");
ly = loadTip.height();
lx = loadTip.width();
//if the box would run off the page, adjust position
if (ly+y > winy) y=y-ly-10;
if (lx+x > winx) x=x-lx-20;
//part of height fix for big boxes 2009-02-17: pg (3/3)
if (y < 0) y=0;
if (ly > winy) loadTip.css({"overflow-y":"auto","height":winy});
//the following line supports calcHTML columns 2009-03-03: pg (1/2)
$("#tipContent td[id='SPFieldCalculated']").each(function(){$(this).html($(this).text())});
//show loadTip
loadTip.css({"top":(y), "left":x}).show();
//add target data to loadTip
$.data(loadTip[0],"dispTarget",a);
});
},delay);
}
});
//bind mouseleave event
$(e).mouseleave(function(event){
if(loadTip.timer)clearTimeout(loadTip.timer);
});
//set loadTip to close when clicked
loadTip.click(function(){
loadTip.hide();
});
}
//function to find elements
function initLoadTip(keyword,group,delay){
//if the loadTip box does not exist, create it
if(typeof loadTip=="undefined")createLoadTip();
//use the main content zone as default
if(!group)group="#MSO_ContentTable";
//set a default delay for data loads
if(!delay)delay=50;
//if no keyword, find links to documents
//requires change of view on some OOB web parts
if(!keyword)keyword="initDocs";
//for documents...
if(keyword=="initDocs"){
//find tables with dref and no inner links pointing to the DispForm
//this prevents double binding
var arrayList=$(group+" table[dref]:not(:has(a[href*='DispForm']))");
$.each(arrayList,function(i,e){
//build a link to the DispForm
var a="/"+escapeProperly($(e).attr("dref"))
+"/Forms/DispForm.aspx?ID="
+$(e).attr("id");
//find the link to the document
var e=$(e).find("a");
//if this link has no dispTarget data
//prevents multiple bindings
if (!($.data(e,"dispTarget"))){
//bind events
loadTipEvent(e,a,delay);
}
});
}else{
//find elements matching keyword in the link
var arrayList=$(group+" a[href*='"+keyword+"']");
$.each(arrayList,function(i,e){
//remove any bookmarks from the link
var a=$(e).attr("href").split("#")[0];
//if this link has no dispTarget data
//prevents multiple bindings
if(!($.data(e,"dispTarget"))){
//bind events
loadTipEvent(e,a,delay);
}
});
}
//check the advices array to see if an advice was loaded for that keyword
if ($.inArray(keyword,advicesAfter)==-1){
//add the keyword to the advices array
advicesAfter.push(keyword);
//create an advice after ExpGroupRenderData
$.aop.after({target:window,method:"ExpGroupRenderData"},
function(){
//get the groupName data from loadTip
var group=$.data(loadTip[0],"groupName");
//if loadTip has groupName data, reinitialize elements for that keyword
//after ExpGroupRenderData renders new html
//loaded by expanding a group
if(group)initLoadTip(keyword,group,delay);
}
);
}
}
$(function(){
//handle the first error in IE
window.onerror=handleError;
//example of loadTip with links to DispForm,aspx (the keyword)
//using the default content zone with 10 millisecond delay
//Only for calendar libraries's links to dispform
initLoadTip("/DispForm.aspx","",10);
//uncomment to make all SharePoint details links show hover flyout details (was default settings)
//initLoadTip("Calendar/DispForm.aspx","",10);
//example of loadTip with userdisp (the keyword)
////using the default content zone and default .5 second delay
//Commented out because no flyouts wanted for Username details display
//initLoadTip("userdisp");
//example of loadTip for documents using defaults
initLoadTip();
});
//empty function to override the SharePoint system
//MoveToViewDate functionality
function MoveToViewDate(strIn1, strIn2)
{
if (strIn2 == null)
{
MoveToViewDateOriginal(strIn1, strIn2);
}
}
function MoveToViewDateOriginal(strdate, view_type)
{
var wUrl=window.location.href;
if (strdate !=null)
wUrl=StURLSetVar2(wUrl,"CalendarDate",escapeProperly(strdate));
if (view_type !=null)
wUrl=StURLSetVar2(wUrl,"CalendarPeriod",view_type);
SubmitFormPost(wUrl, true);
}
// Hide flyout when user clicks on anywhere on the document.
$(document).click(function(e)
{
loadTip.hide();
});
</script>
<!-- loadTip CSS -->
<style type="text/css">
#loadTip{
backg/round: #E2DEC5;
background: #bde7c6;
color: #fff;
bor/der: 1px solid #4E321C;
border: 1px solid #006939;
font-size: 10px;
padding: 3px;
width: 342px;
display: none;
position: absolute;
text-align: right;
}
#tipContent {
background: #fff;
padding: 3px;
}
#idAttachmentsRow{
display:none;
}
#loadTip span
{
display:none
}
#loadTip img
{
display:none
}
</style>
No comments:
Post a Comment