sharepoint中使用xslt构建Spotlight（焦点图效果）
XML<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="SpotLight_Xslt.xslt"?>
<NewDataSet>
<Table1>
<ListId>73260C71-CC69-4AE0-A3BE-9B1549BE4F55</ListId>
<WebId>3623996D-281F-4262-B2E8-925A137D5390</WebId>
<ID>7</ID>
<Keywords />
<ServerUrl>/</ServerUrl>
<URL>http://G.CN, http://G.CN</URL>
<FileRef>7;#123456/img3.jpg</FileRef>
<EncodedAbsUrl>http://win-vm-ma:7619/</EncodedAbsUrl>
<Description>Returns%20a%20GUID%20that%20represents%20the%20encoded%20search%20URL%20for%20the%20specified%20Windows%20SharePoint%20Services%20object.</Description>
<FileLeafRef>7;#img3.jpg</FileLeafRef>
<Created>2009-04-01 11:40:49</Created>
<Author>1073741823;#System Account</Author>
</Table1>
<Table1>
<ListId>73260C71-CC69-4AE0-A3BE-9B1549BE4F55</ListId>
<WebId>3623996D-281F-4262-B2E8-925A137D5390</WebId>
<ID>6</ID>
<Keywords />
<ServerUrl>/</ServerUrl>
<URL>http://WWW.GOOGLE.COM, http://WWW.GOOGLE.COM</URL>
<FileRef>6;#123456/img2.jpg</FileRef>
<EncodedAbsUrl>http://win-vm-ma:7619/</EncodedAbsUrl>
<Description>LinkFilename%2CEncodedAbsUrl%2CModified%2CDocIcon%2CFileRef%2CAuthor%2CTitle</Description>
<FileLeafRef>6;#img2.jpg</FileLeafRef>
<Created>2009-04-01 11:40:48</Created>
<Author>1073741823;#System Account</Author>
</Table1>
<Table1>
<ListId>73260C71-CC69-4AE0-A3BE-9B1549BE4F55</ListId>
<WebId>3623996D-281F-4262-B2E8-925A137D5390</WebId>
<ID>5</ID>
<Keywords />
<ServerUrl>/</ServerUrl>
<URL>http://126.COM, http://126.COM</URL>
<FileRef>5;#123456/img1.jpg</FileRef>
<EncodedAbsUrl>http://win-vm-ma:7619/</EncodedAbsUrl>
<Description>Google%21%0D%0A%0D%0AI%27ve%20set%20up%20the%20webpart%20so%20that%20the%20title%20of%20the%20document%20is%20a%20hyperlink%20to%20the%20encodedabsurl%20field.%20This%20give%20a%20link%20directly%20to%20the%20
</Description><FileLeafRef>5;#img1.jpg</FileLeafRef>
<Created>2009-04-01 11:40:48</Created>
<Author>1073741823;#System Account</Author>
</Table1>
</NewDataSet>
Code<xsl:stylesheet version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.Sharepoint.WebControls">
<xsl:output method="html" indent="yes" />
<xsl:param name="EnumColor" select="1" />
<xsl:param name="EnumSize" select="1" />
<xsl:param name="EnumNote" select="0" />
<xsl:template match="/">
<xsl:text disable-output-escaping="yes">
<![CDATA[
<link rel="stylesheet" href="/_LAYOUTS/SpotLight_Resources/SpotLight_Xslt_Style.css" type="text/css" media="screen" />
<script type="text/javascript" src="/_LAYOUTS/SpotLight_Resources/_mootools.js"> </script>
<script type="text/javascript" src="/_LAYOUTS/SpotLight_Resources/_class.noobSlide.js"> </script>
]]>
</xsl:text>
<xsl:choose>
<xsl:when test="$EnumSize=0">
<style type="text/css">
<![CDATA[
.SpotLightmask
{
width: 708px;
_width: 710px;
height: 270px;
}
#SpotLightbox span img
{
width: 710px;
height: 270px;
}
div .div_control
{
width: 710px;
}
div .div_control #span_info
{
padding-left: 320px;
}
]]>
</style>
<script type="text/javascript">
var spotlightsize=710;
</script>
</xsl:when>
<xsl:otherwise>
<style type="text/css">
<![CDATA[
.SpotLightmask
{
width: 468px;
_width: 470px;
height: 240px;
}
#SpotLightbox span img
{
width: 470px;
height: 240px;
}
div .div_control
{
width: 470px;
}
div .div_control #span_info
{
padding-left: 210px;
}
]]>
</style>
<script type="text/javascript">
var spotlightsize=470;
</script>
</xsl:otherwise>
</xsl:choose>
<script type="text/javascript">
var spotlightcolor;
<xsl:if test="$EnumColor=0">
spotlightcolor="green";
</xsl:if>
<xsl:if test="$EnumColor=1">
spotlightcolor="orange";
</xsl:if>
<xsl:if test="$EnumColor=2">
spotlightcolor="yellow";
</xsl:if>
<xsl:if test="$EnumColor=3">
spotlightcolor="blue";
</xsl:if>
<xsl:if test="$EnumColor=4">
spotlightcolor="purple";
</xsl:if>
document.write(<![CDATA['<style type="text/css">']]>);
document.write(<![CDATA['div .div_control{background: url(/_LAYOUTS/SpotLight_Resources/']]>);
document.write(spotlightcolor);
document.write(<![CDATA['_right.gif) bottom right no-repeat;}']]>);
document.write(<![CDATA['div .div_control .span_left{background: url(/_LAYOUTS/SpotLight_Resources/']]>);
document.write(spotlightcolor);
document.write(<![CDATA['_left.gif) bottom left no-repeat;}']]>);
document.write(<![CDATA['div .div_control #span_info{background: url(/_LAYOUTS/SpotLight_Resources/']]>);
document.write(spotlightcolor);
document.write(<![CDATA['_shim.gif) bottom left repeat-x;}']]>);
document.write(<![CDATA['</style>']]>);
</script>
<div class="SpotLightmask">
<div id="SpotLightbox">
<xsl:for-each select="NewDataSet/Table1">
<xsl:sort data-type="number" order="descending" select="ID"/>
<xsl:if test="position()<5">
<span>
<xsl:element name="a">
<xsl:attribute name="href">
<xsl:value-of select="substring-before(URL,',')"/>
</xsl:attribute>
<xsl:element name="img">
<xsl:attribute name="src">
<xsl:value-of select="ServerUrl"/>
<xsl:value-of select="substring-after(FileRef,';#')" />
</xsl:attribute>
<xsl:attribute name="alt">Photo</xsl:attribute>
</xsl:element>
</xsl:element>
</span>
</xsl:if>
</xsl:for-each>
</div>
<div id="spotlightinfo" class="info">
<xsl:choose>
<xsl:when test="$EnumNote=1">
<xsl:attribute name="style">
display:none;
</xsl:attribute>
</xsl:when>
</xsl:choose>
</div>
</div>
<div class="div_control">
<span style="float:left;" class="span_left"></span>
<div id="span_info">
<xsl:for-each select="NewDataSet/Table1">
<xsl:sort data-type="number" order="descending" select="Prioritys"/>
<xsl:if test="position()<5">
<div>
<span>
<xsl:element name="img">
<xsl:attribute name="src">
<xsl:if test="$EnumColor=0">
/_LAYOUTS/SpotLight_Resources/green_off.gif
</xsl:if>
<xsl:if test="$EnumColor=1">
/_LAYOUTS/SpotLight_Resources/orange_off.gif
</xsl:if>
<xsl:if test="$EnumColor=2">
/_LAYOUTS/SpotLight_Resources/yellow_off.gif
</xsl:if>
<xsl:if test="$EnumColor=3">
/_LAYOUTS/SpotLight_Resources/blue_off.gif
</xsl:if>
<xsl:if test="$EnumColor=4">
/_LAYOUTS/SpotLight_Resources/purple_off.gif
</xsl:if>
</xsl:attribute>
<xsl:attribute name="alt">
<xsl:value-of select="position()"/>
</xsl:attribute>
</xsl:element>
</span>
</div>
</xsl:if>
</xsl:for-each>
</div>
</div>
<script type="text/javascript">
window.addEvent('domready', function(){
<xsl:for-each select="NewDataSet/Table1">
<xsl:sort data-type="number" order="descending" select="ID"/>
<xsl:if test="position()<5">
var slideitem<xsl:value-of select="position()"/>={title:'<xsl:value-of select='translate(Keywords,"'","¥")' />',link:'<xsl:value-of select="substring-before(URL,',')" />',imagelink:'<xsl:value-of select="ServerUrl"/><xsl:value-of select="substring-after(FileRef,';#')" />',description:'<xsl:value-of select='Description' />',itemindex:<xsl:value-of select="position()-1" />};
</xsl:if>
</xsl:for-each>
var SlideObjectItems=new Array();
<xsl:for-each select="NewDataSet/Table1">
<xsl:sort data-type="number" order="descending" select="ID"/>
<xsl:if test="position()<5">
SlideObjectItems[<xsl:value-of select="position()-1"/>]=slideitem<xsl:value-of select="position()"/>;
</xsl:if>
</xsl:for-each>
var spotlightinfo = $('SpotLightbox').getNext().setOpacity(0.6);
var slbox = new noobSlide({
box: $('SpotLightbox'),
items: SlideObjectItems,
interval: 5000,
startItem: 1,
size: spotlightsize,
handles: $ES('div', 'span_info'),
autoPlay: true,
onWalk: function(currentItem,currentHandle){
spotlightinfo.empty();
this.handles.each(function(item,index){
spotlightinfo.innerHTML=unescape(currentItem.description);
item.getElementsBySelector("img").setProperty('src','/_LAYOUTS/SpotLight_Resources/'+spotlightcolor+'_off.gif');
});
currentHandle.getElementsBySelector("img").setProperty('src','/_LAYOUTS/SpotLight_Resources/'+spotlightcolor+'_on.gif');
}
});
slbox.next();
});
</script>
</xsl:template>
</xsl:stylesheet>
效果和相关的js在 http://www.efectorelativo.net/laboratory/noobSlide/
