Блог

Я хочу отключить некоторые easytabs, но я не нашел способа запретить пользователю вводить отключенные вкладки. Как я могу это сделать?

Вот как выглядит мой набор вкладок:

Когда я нажимаю кнопку, чтобы отключить B amp; C, я устанавливаю стиль «отключено» на двух вкладках и пытаюсь вернуть false при щелчке мыши на них. Отключенный внешний вид — это то, что я хочу:

но вкладки все равно можно выбрать.

Почему?

Я пытался контролировать клики как на li, так и на a.

http://jsfiddle.net/8VkF8/

HTML:

 <div id="tab-container" class="tab-container">
  <ul class="etabs">
    <li class="tab"><a href="#a">A</a></li>
    <li class="tab"><a href="#b">B</a></li>
    <li class="tab"><a href="#c">C</a></li>
    <li class="tab"><a href="#d">D</a></li>
  </ul>
  <div class="panel-container">
    <div id="a">
      1st page
    </div>
    <div id="b">
      2nd page
    </div>
    <div id="c">
      3rd page
    </div>
    <div id="d">
      4th page
    </div>
  </div>
</div>
<button onclick="on_disable_b_and_c_clicked()">Disable B amp;amp; C</button>
<button onclick="enable_all()">Enable</button>
 

js:

 $(function()
{
  var tabs = $('#tab-container');
  tabs.easytabs({ animate: false });  
});

function on_disable_b_and_c_clicked()
{
  var tabs = $('#tab-container');
  disable_easytabs(tabs, [1,2]);
  return false;
}

function enable_all()
{
  var tabs = $('#tab-container');
  disable_easytabs(tabs, []);
}

function disable_easytabs(tabs, indexes)
{
    var lis = tabs.children('ul').children();
    var index = 0;
    lis.each(function()
    {
        var li = $(this);
        var a = li.children('a');
        var disabled = $.inArray(index, indexes) != -1;
        if (disabled)
        {
            li.addClass('disabled');
            li.on("click", returnFalse);
        }
        else
        {
            li.removeClass('disabled');
            li.off('click', returnFalse);
        }
        index  ;
    });
}

function returnFalse(e)
{
  return false;
}
 

css:

 .etabs
{
  margin: 0;
  padding: 0;
}

.tab
{
  top: 1px;
  padding: 6px 10px;
  display: inline-block; zoom:1;
  *display:inline;
  background: #eee;
  border: solid 1px #999;
  border-bottom: none;
}

.tab a
{
  text-decoration: none;
  display: block;
  padding: 0 10px;
  outline: none;
}
.tab a:hover
{
  text-decoration: none;
}

.tab.active
{
  background: #fff;
  padding-top: 6px;
  position: relative;
  border-color: #666;
}

.tab a.active
{
  text-decoration: none;
}

.tab-container .panel-container
{
  height: 140px;
  background: #fff;
  border: solid #666 1px;
  padding: 10px;
}

a
{
  color: #000;
}

ul.etabs li.disabled a
{
  color: #aaa;
  cursor: default;
}
 

EasyTabs предоставляет событие before click, вы можете привязать его, чтобы увидеть disabled , присутствует ли класс, и вернуть false в обработчике, чтобы остановить выбор вкладки:

 tabs.bind("easytabs:before", function (e, clicked) {
    if(clicked.parent().hasClass('disabled')) {
        return false;
    }
});
 

Я разветвил вашу скрипку с этим на месте и удалил ненужные .on('click') обработчики:

http://jsfiddle.net/Aa8Z3/