1

I have a site built on EE2 where one page has used jQuery tabs (example: http://childrensmedgroup.com/index.php/meet_us/). Main problem is with updating that page because within WYSIWYG editor user can see only first tab.

My idea it to make a separate channel for that particular page and create content post for each tab so user can populate it in a very easy way and I will just add EE tags to display each tab/post on that page template.

Does it will work? Or maybe there are extensions which will provide similar functionality?

Thanks

1

That may just be a limitation of the WYSIWYG editor - not all of them work with more complex UI widgets that require jQuery to function. You may have to have your users learn how to view the source, and add/edit content within the code-view window.

If I were building something like this, I'd build in additional entry fields for the tab title, and for the tab content. Then the template would use conditional tags to add extra tabs to the jQuery tab widget. (For performance/usability's sake, I'd only allow for a maximum of five tabs on a page/single-entry template.) It requires some re-engineering, but it makes things easier for the users.

2
  • User knows about source editing but with those all images it is not easy for her, so we are looking for some other way to make it easy. Oct 25 '13 at 18:08
  • I don't know of any WYSIWYG editors for EE that work with more complex UI widgets. Doesn't mean that there aren't any...just that I don't know of any. (Re-engineering the template would do an even better job of separating the content from the presentation, though - AND make it easier for all users to edit the content, without breaking anything.)
    – user800
    Oct 25 '13 at 18:10
1

Just a thought here, but if I were building this, the first thing that comes to mind is using embeds for the other channels and building out the jQuery UI tabs with the EE tags in proper places for the content to render.

In other words, you have two tabs there for "Our Providers". That would be simple enough the list the providers by name from a single channel/entry/whatever you have and split them across the two tabs as required just using the EE channel_entry tags.

Your next tab was "Support Staff". Use an embed to build that tab "title" and supporting content. (Note: Due to the jQuery UI structure, you may have to use either multiple embeds, or preload your variables.

Lastly, you have "Departments". Again, like the "Support Staff", this can be done the same way.

I have done a very similar thing with different support videos in which I had multiple channels, categories, and tags. (It was yucky) :)

I hope this makes sense.

EXAMPLE:

This may not be the best way of doing this, but maybe it will get you going. You would need to decide how you want to structure your blocks. (Use embeds or segments)

You could use Low Alphabet to retrieve the needed groups : http://devot-ee.com/add-ons/low-alphabet

{exp:channel:entries 
    channel='whatever_channel_your_primary_page_copy_is_in' 
    limit='1' 
    status='open' 
    require_entry="yes"
}
    {if no_results}
        {redirect="404"}
    {/if}
{/exp:channel:entries}
    <div id="tabs">
        <ul>
            <li><a href="#tab-a-n">Our Providers A-N</a></li>
            <li><a href="#tab-o-z">Our Providers O-Z</a></li>
            <li><a href="#tab-ss">Support Staff</a></li>
            <li><a href="#tab-dept">Departments</a></li>
        </ul>
        <div id="tab-a-n">
            {exp:low_alphabet:entries
                channel='whatever_channel_your_providers_are_in' 
                status='open' 
                orderby='title' 
                alpha_filter='a-n' 
                sort='asc'
            }
                {title}
            {/exp:low_alphabet:entries}
        </div>
        <div id="tab-o-z">
            {exp:low_alphabet:entries
                channel='whatever_channel_your_providers_are_in' 
                status='open' 
                orderby='title' 
                alpha_filter='o-z' 
                sort='asc'
            }
                {title}
            {/exp:low_alphabet:entries}
        </div>
        <div id="tab-ss">
            {exp:channel:entries 
                channel='whatever_channel_your_support_staff_is_in' 
                status='open' 
                orderby='title' 
                sort='asc'
            }
                {title}
            {/exp:channel:entries}
        </div>
        <div id="tab-dept">
            {exp:channel:entries 
                channel='whatever_channel_your_departments_are_in' 
                status='open' 
                orderby='title' 
                sort='asc'
            }
                {title}
            {/exp:channel:entries}
        </div>
    </div>
{exp:channel:entries 
    channel='whatever_channel_your_primary_page_copy_is_in' 
    limit='1' 
    status='open' 
    require_entry="yes"
}
    The rest of your page here...
{/exp:channel:entries}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.