Using jQuery UI Tabs and TXP - what's the best implementation?

rathersplendid · 2009-02-19 02:15:35

I have a txp site and and have used jQuery UI’s tabs extensively for the content. Most, if not all content that’s inside the jQuery tabs are hardcoded, but I would really like to use articles to control the content of each tab.

The site will largely be static, but I need to have the option of updating the content using txp’s interface.

So, Do I create a new article for each tab? But some tabs have two disitinct, different contents – should there be an article for each column (for want of a better word) as well?

or

Do I just keep the static code and edit it in the page source.

Is there a plugin that might help me out?

Any and all help is appreciated.

maniqui · 2009-02-19 03:22:38

Yes, it’s possible, and there are possible some different ways to achieve this.
Probably, there will be a few things that will be still hardcoded somewhere (not the content itsekf, but maybe the corresponding article id).

I mean, you could try a totally dynamically (!= hardcoded) solution, although it may be a little hard to mix/alternate the one-article-per-tab with the two-articles-on-one-tab in a dynamic fashioned way.
So, maybe, a semi-dynamic/semi-hardcoded approach will be the first approach you should try, and then refine over it.

How to do it?
Let’s try first a simple version.
Off the top of my head:

1. First, move each piece of hardcoded content (currently, the content on each tab) to an article (on content/tab per article).
Use the tab name as the article title.

2. Then, to create the “tabs” (the clickable tabs, aka, the table of contents)

<txp:article wraptag="ul" class="ui-tabs-nav">
<li><a href="#tab-<txp:article_id />"><txp:title /></a></li>
</txp:article>

That should be enough to generate a functional list of tabs. You can refine them later, if needed, adding more dynamically generated attributes (example: different id attribute values for each li).

3. Then, create each ui-tabs-panel

<txp:article>
<div id="tab-<txp:article_id />" class="ui-tabs-panel">
<txp:body />
</div>
</txp:article>

@rathersplendid, I think that is something to begin with. :D

rathersplendid · 2009-02-19 09:08:47

maniqui thank you, I will give that a try and let you know how it goes.

Cheers

rathersplendid · 2009-02-19 14:27:45

I have now implemented the tabs. It was, in fact, a relatively simple thing to do, but I was coming at it from the wrong angle, so thank you for enlightening me.

I used what you gave me and elaborated on it – here goes:

To create the tabs I used

<div id="tabs">
	<txp:chh_article_custom limit="4" listform="tabMenu" section="home" sortby="position" sortdir="asc" />			
<div class="fix"></div>

I needed to install the chh_article_custom and the stm_srticle_order plugins so that I was able to order them (by drag and drop) easily. I also limited it to 4 because that was all I needed.

The code for the tabMenu form, used above is:

<txp:if_first_article>
	<ul id="tabMenu">
</txp:if_first_article>
	<li><a href="#tabs-<txp:article_id />"><txp:title /></a></li>
<txp:if_last_article>
	</ul>
</txp:if_last_article>

For the tab content, I then added:

<txp:article_custom section="home">
	<div id="tabs-<txp:article_id />" class="tabs">
		<txp:body />
	</div>
</txp:article>

Is is pretty similar to maniqui’s example but I need for it to be section-aware, so I used article_custom instead.

Just as maniqui said, I created a new article for each tab, using the title as the name of the tab.

To solve the two columns in one tab problem, I basically created a post that used a lot of textile formatting. It’s not ideal, but I can now edit my site’s content easily. Now, if only textile’s support for definition list was any good, I’d be able to have the whole site set up in this way. (And I have tried the modified textile file for this, but it never seemed to work properly)

@maniqui, thank you. I hope others will get some use from this.

MattD · 2009-02-19 16:52:46

Care to share how it turned out?

rathersplendid · 2009-02-19 16:55:54

The site isn’t live yet, so I’m afraid not.

Sorry Matt

rathersplendid · 2009-02-23 19:00:07

To those that may care, I have completed the said site and it is now Live for all to see.

It is a new service of mine called txp:coder , we convert designs and existing website into Textpattern based sites. I would love to know what you all think of it and if it could be improved in any way.

Cheers

jakob · 2009-02-23 21:31:29

Zander, your new site looks, well “rather splendid” !

jstubbs · 2009-02-23 21:47:12

Nice work Zander! Bookmarked.

maniqui · 2009-02-23 22:02:26

Love it, really.

BTW, the original tip to create tabs could be also done by using article_url_title instead of txp:article_id.
#my-tab-title may look nicer on the status bar than #tabs-XX.

Last edited by maniqui (2009-02-23 22:02:41)

rathersplendid · 2009-02-23 22:55:42

Thanks guys for all your responses; I’ve been thinking about doing it for a while and now finally got round to implementing it.

maniqui wrote:

BTW, the original tip to create tabs could be also done by using article_url_title instead of txp:article_id.
#my-tab-title may look nicer on the status bar than #tabs-XX.

That is a good idea, I may look into it.

redbot · 2009-02-23 23:04:52

Very nice! (And I dare to say I’d like to see something in the same vein – of course with different colours – for the txp homepage).

Textpattern CMS

Textpattern CMS support forum

#1 2009-02-19 02:15:35

Using jQuery UI Tabs and TXP - what's the best implementation?

#2 2009-02-19 03:22:38

Re: Using jQuery UI Tabs and TXP - what's the best implementation?

#3 2009-02-19 09:08:47

Re: Using jQuery UI Tabs and TXP - what's the best implementation?

#4 2009-02-19 14:27:45

Re: Using jQuery UI Tabs and TXP - what's the best implementation?

#5 2009-02-19 16:52:46

Re: Using jQuery UI Tabs and TXP - what's the best implementation?

#6 2009-02-19 16:55:54

Re: Using jQuery UI Tabs and TXP - what's the best implementation?

#7 2009-02-23 19:00:07

Re: Using jQuery UI Tabs and TXP - what's the best implementation?

#8 2009-02-23 21:31:29

Re: Using jQuery UI Tabs and TXP - what's the best implementation?

#9 2009-02-23 21:47:12

Re: Using jQuery UI Tabs and TXP - what's the best implementation?

#10 2009-02-23 22:02:26

Re: Using jQuery UI Tabs and TXP - what's the best implementation?

#11 2009-02-23 22:55:42

Re: Using jQuery UI Tabs and TXP - what's the best implementation?

#12 2009-02-23 23:04:52

Re: Using jQuery UI Tabs and TXP - what's the best implementation?

Board footer