jQuery UI accordion and tabs

Aug 18, 2011 at 6:20 PM
Edited Aug 18, 2011 at 7:18 PM

I know you're wanting to create something without dependencies, but I thought I'd throw this out there anyway and see what you thought. However, I can't figure out how to post XSL in a discussion post. How would I go about doing that?

Edited: here's the XSL.  Each of these go through a list and return the HTML that jQuery UI is looking for to make the widget work.  As they are, you'd have to do a little editing to update the select in the value-ofs, but maybe you know of a way to generalize that.

Accordion:

<xsl:template name="dvt_1">
  <xsl:variable name="dvt_StyleName">Table</xsl:variable>
  <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
  <xsl:variable name="dvt_RowCount" select="count($Rows)" />
  <xsl:variable name="dvt_IsEmpty" select="$dvt_RowCount = 0" />
  <xsl:choose>
    <xsl:when test="$dvt_IsEmpty">
      <xsl:call-template name="dvt_1.empty" />
    </xsl:when>
    <xsl:otherwise>
        <div id="accordion">
          <xsl:call-template name="accordionMarkup">
            <xsl:with-param name="Rows" select="$Rows" />
          </xsl:call-template>
        </div>
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>
<xsl:template name="accordionMarkup">
  <xsl:param name="Rows" />
  <xsl:for-each select="$Rows">
    <h3>
      <a href="#">
        <xsl:value-of select="@Title" />
      </a>
    </h3>
    <div>
      <xsl:value-of select="@panelText" disable-output-escaping="yes" />
    </div>
  </xsl:for-each>
</xsl:template>
<xsl:template name="dvt_1.empty">
  <xsl:variable name="dvt_ViewEmptyText">No items.</xsl:variable>
  <table border="0" width="100%">
    <tr>
      <td class="ms-vb">
        <xsl:value-of select="$dvt_ViewEmptyText" />
      </td>
    </tr>
  </table>
</xsl:template>

Tabs:

<xsl:template name="dvt_1">
  <xsl:variable name="dvt_StyleName">Table</xsl:variable>
  <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
  <xsl:variable name="dvt_RowCount" select="count($Rows)" />
  <xsl:variable name="dvt_IsEmpty" select="$dvt_RowCount = 0" />
  <xsl:choose>
    <xsl:when test="$dvt_IsEmpty">
      <xsl:call-template name="dvt_1.empty" />
    </xsl:when>
    <xsl:otherwise>
        <div id="tabs">
          <xsl:call-template name="tabsList">
            <xsl:with-param name="Rows" select="$Rows" />
          </xsl:call-template>
          <xsl:call-template name="tabsPanels">
            <xsl:with-param name="Rows" select="$Rows" />
          </xsl:call-template>
        </div>
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>
<xsl:template name="tabsList">
  <xsl:param name="Rows" />
  <ul>
    <xsl:for-each select="$Rows">
      <li><a href="{concat('#tabs-',@ID)}"><xsl:value-of select="@Title" /></a></li>
    </xsl:for-each>
  </ul>
</xsl:template>
<xsl:template name="tabsPanels">
  <xsl:param name="Rows" />
  <xsl:for-each select="$Rows">
    <div id="{concat('tabs-',@ID)}">
      <xsl:value-of select="@panelText" disable-output-escaping="yes" />
    </div>
  </xsl:for-each>
</xsl:template>
<xsl:template name="dvt_1.empty">
  <xsl:variable name="dvt_ViewEmptyText">No items.</xsl:variable>
  <table border="0" width="100%">
    <tr>
      <td class="ms-vb">
        <xsl:value-of select="$dvt_ViewEmptyText" />
      </td>
    </tr>
  </table>
</xsl:template>

Coordinator
Aug 18, 2011 at 6:48 PM
You should be able to simply paste it in.

M
>
Aug 18, 2011 at 8:01 PM
Updated my post to add the code.


From: [email removed]
To: [email removed]
Date: Thu, 18 Aug 2011 11:49:04 -0700
Subject: Re: jQuery UI accordion and tabs [SPXSLT:269600]

From: sympmarc
You should be able to simply paste it in.

M
>
Read the full discussion online.
To add a post to this discussion, reply to this email (SPXSLT@discussions.codeplex.com)
To start a new discussion for this project, email SPXSLT@discussions.codeplex.com
You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe on CodePlex.com.
Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at CodePlex.com
Aug 19, 2011 at 1:16 PM

Very nice CarlosT.  I can't wait to try this out.  I use jQueryUI more and more, so anything to help that along is great.

Coordinator
Aug 19, 2011 at 1:19 PM

Seems like a good blog post, but not an SPServices thing, right? CarlosT: Do you have a blog post about this? If you don't, maybe I could use it to get it out there? Total credit, of course.

M.

Aug 19, 2011 at 2:02 PM
Edited Aug 19, 2011 at 2:03 PM

Marc, 

This is definitely *not* an SPServices thing.

^_^

Aug 19, 2011 at 4:05 PM
sympmarc wrote:

Seems like a good blog post, but not an SPServices thing, right? CarlosT: Do you have a blog post about this? If you don't, maybe I could use it to get it out there? Total credit, of course.

M.

I don't have a blog, so please feel free to post about this.  I've gotten a lot of useful stuff from your blog, so it's nice to give a little back.

I agree that it wouldn't be a function for SPServices, but I was thinking it could maybe fit with the SharePoint XSL Templates.  I did see an earlier discussion where you said you wanted no dependencies in SPXSLT, so I don't know if you'd want to include these since they require jQuery UI to be useful.

Also, if you see places where the XSL could be improved, please go for it.  I can't claim to be an XSL ninja, so I may very well be doing something less than optimally.

Aug 19, 2011 at 5:32 PM

By the way, I have some pictures of the results if that would be useful to you.

Coordinator
Aug 19, 2011 at 6:48 PM

That would be great. If you don't mind, please send them to me in email, which you can get here.

Also let me know how you'd like me to refer to you in any blog post(s) that I do.

Thanks,
M.