Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Hey all, I'm using Jquery UI tabs with the WordPress Post Tabs plugin and it works like a charm. However, I'd like to auto disable or hide tabs that do not have any data. I've worked with Jquery quite a bit but I'm lost in this mess. Any help would be appreciated. Thanks!

Jquery Tabs Information from the official site

Initialize a tabs with the disabled option specified.

$( ".selector" ).tabs({ disabled: true });

Get or set the disabled option, after init.

var disabled = $( ".selector" ).tabs( "option", "disabled" );
//setter
$( ".selector" ).tabs( "option", "disabled", true );

Found in wordpress-post-tabs.php line 105

   <script type="text/javascript">
    jQuery(function() {
    <?php 
    if($wpts_count and $wpts_count!=0){ 
      for($i=0;$i<$wpts_count;$i++) {   ?>
        jQuery("#tabs_<?php echo $i;?>").tabs({ cookie: { expires: 30 } });
        //getter
        var cookie = jQuery("#tabs_<?php echo $i;?>").tabs( "option", "cookie" );
        //setter
        jQuery("#tabs_<?php echo $i;?>").tabs( "option", "cookie", { expires: 30 } );
        <?php if(isset($wpts['fade']) and $wpts['fade']=='1'){ ?>
            //fx for animation
            jQuery("#tabs_<?php echo $i;?>").tabs({ fx: { opacity: 'toggle' } });
            //getter
            var fx = jQuery("#tabs_<?php echo $i;?>").tabs( "option", "fx" );
            //setter
            jQuery("#tabs_<?php echo $i;?>").tabs( "option", "fx", { opacity: 'toggle' } );
       <?php }}} ?> 
    });
<?php if($wpts['reload']=='1') { ?>
    function wptReload(ar)
    {
     location.href=location.href.split(/\?|#/)[0] + '#' + ar;  
     location.reload(true);
     return false;
    }
<?php } ?>
    </script>
share|improve this question
add comment

1 Answer

up vote 3 down vote accepted

*See edit history for previous comments

I decided i'm going to write a plugin to do this, the plugin discussed i'm sure was written with the best intentions, but the code in my personal opinion needs a total rewrite, which is essentially what i'll be doing.

The aim will basically be to emulate the functionality of the WordPress Post Tabs plugin.

NOTE:
This plugin includes jQuery cookie, which is dual licensed under the MIT and GPL licenses, just a heads up for those of you that need to know such things.

Features

The plugin will feature the following.

  • Smart CSS and Script loading

    - Only loads CSS and JS when there's a post in the loop with the shortcode

  • Skin selection

    - Choose from a list of jQuery UI styles

  • Disable skin loading

    - Optionally turn off stylesheet loading, and just define your own

  • Disabled tabs

    - Disable clicking on tabs that do not have any content yet

  • jQuery cookie

    - Enable the jQuery cookie script to track selected tabs

  • Tab navigation

    - Display clickable links to navigate between tabs

  • Loading on archive pages

    - Choose whether to display the tabs on archive pages

  • Translation ready

    - Supports other languages

  • Live style preview

    - See a live preview of tab styles in the plugin settings page

  • Filter hooks for navigation links

    - So you can change the navigation icons

  • Utilises the settings API

Screenshots

Front side

Admin side

Have a few more bits to test, but it's almost ready, watch this space!.. :)

Update:
Just need to get some things worked out regarding using the plugin repository first, then we should be good to go..

Post UI Tabs (or PUT for short)
http://wordpress.org/extend/plugins/put/

share|improve this answer
    
Thanks t3los, I had a feeling that it was goofy. When I initially started using it I had no clue how to add Jquery UI widgets to WordPress. I'm pretty sure at this point I can manually achieve the same results. Would you mind tossing out the code you used to disable when not in use? –  Zach Shallbetter Mar 31 '11 at 16:06
    
You use the disabled property inside the object you pass to the tabs scripts, eg. $('#my_element').tabs({ disabled: [0,1],cookie: { expires: 30 }, fx: { opacity: 'toggle' } }); would disable the first two tabs. It's listed on the options tab of the documentation page(it's the second one listed). –  t31os Mar 31 '11 at 16:12
    
Oh also, so you're aware, the disable feature didn't seem to work on your edited code. Not a big deal just thought you should know. –  Zach Shallbetter Mar 31 '11 at 16:34
    
Not sure why that is, it was working for me, i copied the working copy into the pastebin, perhaps i overlooked something. I've actually started writing a plugin to do the same as it seems there's quite a good bunch of users looking for this functionality(and it pains me to think they might all be relying on this plugin). I'll post it up here if all goes well.. ;) –  t31os Mar 31 '11 at 16:40
    
Excellent, let me know when and how you get it out. I'd be happy to give it a run for you. –  Zach Shallbetter Mar 31 '11 at 16:45
show 8 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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