Textpattern Forum

You are not logged in. Register | Login | Help

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

rathersplendid
Plugin Author
From: London
Registered: 2008-05-02
Posts: 163
Website

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

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.


Admin Themes Prometheus | Stung | txp:coder/
My Portfolio | ɹǝpuɐz.com | @MrMartineau
txp:coder /> – Convert your designs into Textpattern-based websites
jQuery Style | @jquerystyle

Offline

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

maniqui
Moderator
From: Buenos Aires, Argentina
Registered: 2004-10-10
Posts: 2,989
Website

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

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


La música ideas portará y siempre continuará

TXP Builders – finely-crafted code, design and txp

Offline

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

rathersplendid
Plugin Author
From: London
Registered: 2008-05-02
Posts: 163
Website

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

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

Cheers


Admin Themes Prometheus | Stung | txp:coder/
My Portfolio | ɹǝpuɐz.com | @MrMartineau
txp:coder /> – Convert your designs into Textpattern-based websites
jQuery Style | @jquerystyle

Offline

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

rathersplendid
Plugin Author
From: London
Registered: 2008-05-02
Posts: 163
Website

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

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.


Admin Themes Prometheus | Stung | txp:coder/
My Portfolio | ɹǝpuɐz.com | @MrMartineau
txp:coder /> – Convert your designs into Textpattern-based websites
jQuery Style | @jquerystyle

Offline

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

MattD
Plugin Author
From: Monterey, California
Registered: 2008-03-21
Posts: 1,187
Website

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

Care to share how it turned out?


My Plugins

Piwik Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker

Offline

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

rathersplendid
Plugin Author
From: London
Registered: 2008-05-02
Posts: 163
Website

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

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

Sorry Matt


Admin Themes Prometheus | Stung | txp:coder/
My Portfolio | ɹǝpuɐz.com | @MrMartineau
txp:coder /> – Convert your designs into Textpattern-based websites
jQuery Style | @jquerystyle

Offline

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

rathersplendid
Plugin Author
From: London
Registered: 2008-05-02
Posts: 163
Website

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

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


Admin Themes Prometheus | Stung | txp:coder/
My Portfolio | ɹǝpuɐz.com | @MrMartineau
txp:coder /> – Convert your designs into Textpattern-based websites
jQuery Style | @jquerystyle

Offline

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

jakob
Moderator
From: Germany
Registered: 2005-01-20
Posts: 1,899
Website

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

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


TXP Builders – finely-crafted code, design and txp

Offline

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

jstubbs
Moderator
From: Hong Kong
Registered: 2004-12-13
Posts: 2,185
Website

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

Nice work Zander! Bookmarked.


TXP Tips | @txptips | Me | @jonathanstubbs | Github

TXP Builders – finely-crafted code, design and txp @txpbuilders

Offline

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

maniqui
Moderator
From: Buenos Aires, Argentina
Registered: 2004-10-10
Posts: 2,989
Website

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

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)


La música ideas portará y siempre continuará

TXP Builders – finely-crafted code, design and txp

Offline

Board footer

Powered by FluxBB