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()&lt;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()&lt;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()&lt;5">
          var slideitem<xsl:value-of select="position()"/>={title:'<xsl:value-of select='translate(Keywords,"&apos;","¥")' />',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()&lt;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/

转载于:https://www.cnblogs.com/geek007/archive/2009/04/10/1433011.html