Creating a tabbed (like jQuery UI) archive

rathersplendid · 2010-03-10 10:23:35

I wanna create an archive that displays on a single page that is in tabs similar to jQuery UI tabs

I have been through various options, using <txp:if_different> a lot but I cannot seem to figure it out…

The desired html output would be something like this:

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">2010</a></li>
		<li><a href="#tabs-2">2009</a></li>
		<li><a href="#tabs-3">2008</a></li>
	</ul>
	<div id="tabs-1" class="2010">
		<ul>
			<li><txp:permlink>Title 1</txp:permlink></li>
			<li><txp:permlink>Title 2</txp:permlink></li>
			<li><txp:permlink>Title 3</txp:permlink></li>
			<li><txp:permlink>Title 4</txp:permlink></li>
			<li><txp:permlink>Title 5</txp:permlink></li>
			<li><txp:permlink>Title 6</txp:permlink></li>
		</ul>
	</div>
	<div id="tabs-2" class="2009">
		<ul>
			<li><txp:permlink>Title 1</txp:permlink></li>
			<li><txp:permlink>Title 2</txp:permlink></li>
			<li><txp:permlink>Title 3</txp:permlink></li>
			<li><txp:permlink>Title 4</txp:permlink></li>
		</ul>
	</div>
	<div id="tabs-3" class="2008">
		<ul>
			<li><txp:permlink>Title 1</txp:permlink></li>
			<li><txp:permlink>Title 2</txp:permlink></li>
			<li><txp:permlink>Title 3</txp:permlink></li>
			<li><txp:permlink>Title 4</txp:permlink></li>
		</ul>
	</div>
</div>

At the moment I am using an enhanced version of the basic txp archive provided on the textpattern FAQs but it is only a simple version in a straight, long list.

Here’s my stab at it:

<!-- Tabs -->
<txp:article_custom limit="999" section="dates" wraptag="ul" break="" class="date_list" sort="Posted desc" time="past">
	<txp:if_different>
    	<li class="year"><a href="#tabs-"><txp:posted format="%Y" /></a></li>
    </txp:if_different>
</txp:article_custom>
<!-- Tab Contents -->
<txp:article_custom limit="999" section="dates" wraptag="" break="" class="" sort="Posted desc" time="past">
	<txp:if_different>
		<div id="tabs-1">
			<ul>
				<li><txp:permlink>Title 1</txp:permlink></li>
			</ul>
		</div>
    </txp:if_different>
</txp:article_custom>

Can it be done?

jakob · 2010-03-10 12:24:45

I did something similar recently using the smaller jquery tools library. The markup is almost identical.

You’re nearly there except that your second if_different is only needed for the div and ul and you need to use txp:if_first_article and txp:if_last_article to cater for the first and last cases respectively.

For the sequential numbering of the tabs your could use one of the numbering plugins such as rvm_counter but I just use a simple php variable and increment it by one. Theoretically if they don’t need to be consecutively numbered but just match, you can simply use the year <a href="#tabs-<txp:posted format="%Y" />"><txp:posted format="%Y" /></a> and further down <div id="tab-<txp:posted format="%Y" />" class="<txp:posted format="%Y" />">.

This is untested but I think you get the idea:

<!-- Tabs -->
<txp:php>global $i;$i = 0;</txp:php>
<txp:article_custom limit="999" section="dates" wraptag="ul" break="" class="date_list" sort="Posted desc" time="past">
   <txp:if_different>
       <li class="year"><a href="#tabs-<txp:php>global $i;$i++;echo $i;</txp:php>"><txp:posted format="%Y" /></a></li>
    </txp:if_different>
</txp:article_custom>
<!-- Tab Contents -->
<txp:php>global $i;$i = 0;</txp:php>
<txp:article_custom limit="999" section="dates" wraptag="" break="" class="" sort="Posted desc" time="past">
   <txp:if_different>
      <txp:if_first_article><txp:else/>
         </ul>
      </div>
      </txp:if_first_article>
      <txp:if_last_article><txp:else/>
      <div id="tab-<txp:php>global $i;$i++;echo $i;</txp:php>" class="<txp:posted format="%Y" />">
         <ul>
      </txp:if_last_article>
   </txp:if_different>
            <li><txp:permlink><txp:title /></txp:permlink></li>
</txp:article_custom>

rathersplendid · 2010-03-11 21:26:57

Jakob, thank you so much for replying and please excuse my lack of response – things have been a bit hectic this end. i will test this now and let you know how it goes.

rathersplendid · 2010-03-12 22:38:44

Jacob, your solution produced a long list of articles with just the year (one per article), and another list with the content of each article within it’s own #tab-n div. I have tried modifying it to no avail and am stuck for ideas…

Thanks again, I gues I may have to try something else.

jakob · 2010-03-13 09:56:25

Does it work if you take out the counter and replace it with the year as suggested as an alternative? It may be that the incrementing number might be the reason for every entry appearing as a distinct (i.e. different) entry. Here’s a slightly modified version (also tweaked if_first/if_last):

<!-- Tabs -->
<txp:article_custom limit="999" section="dates" wraptag="ul" break="" class="date_list" sort="Posted desc" time="past">
   <txp:if_different>
       <li class="year"><a href="#tab-<txp:posted format="%Y" />"><txp:posted format="%Y" /></a></li>
    </txp:if_different>
</txp:article_custom>
<!-- Tab Contents -->
<txp:article_custom limit="999" section="dates" wraptag="" break="" class="" sort="Posted desc" time="past">
   <txp:if_different>
      <txp:if_first_article><txp:else/>
         </ul>
      </div>
      </txp:if_first_article>
      <div id="tab-<txp:posted format="%Y" />" class="<txp:posted format="%Y" />">
         <ul>
   </txp:if_different>
            <li><txp:permlink><txp:title /></txp:permlink></li>
</txp:article_custom>
         </ul>
      </div>

If that doesn’t work, you can mail me a link/login I can help experiment (I don’t have a setup with sufficient articles to test it with here).

Textpattern CMS

Textpattern CMS support forum

#1 2010-03-10 10:23:35

Creating a tabbed (like jQuery UI) archive

#2 2010-03-10 12:24:45

Re: Creating a tabbed (like jQuery UI) archive

#3 2010-03-11 21:26:57

Re: Creating a tabbed (like jQuery UI) archive

#4 2010-03-12 22:38:44

Re: Creating a tabbed (like jQuery UI) archive

#5 2010-03-13 09:56:25

Re: Creating a tabbed (like jQuery UI) archive

Board footer