如何在选项卡中使用多个jquery selectables

时间:2013-01-04 13:01:53

标签: jquery-ui jquery-ui-tabs jquery-ui-selectable

我有两个用jquery制作的标签,其中包含单独的可选项。 默认情况下打开的选项卡,可选择的工作正常。 当转到另一个选项卡时,使用套索选择将不起作用。 将stop事件添加到可选项时,问题就开始了。

HTML:

<div id="tabs">
<ul>
    <li><a href="#div1" id="tab1">Div 1 (0)</a></li>
    <li><a href="#div2" id="tab2">Div 2 (0)</a></li>
</ul>
<div id="div1">
    <ul class="selectable" id="sel1">
      <li class="ui-state-default">1</li>
      <li class="ui-state-default">2</li>
      <li class="ui-state-default">3</li>
      <li class="ui-state-default">4</li>
      <li class="ui-state-default">5</li>
      <li class="ui-state-default">6</li>
      <li class="ui-state-default">7</li>
      <li class="ui-state-default">8</li>
      <li class="ui-state-default">9</li>
      <li class="ui-state-default">10</li>
      <li class="ui-state-default">11</li>
      <li class="ui-state-default">12</li>
      <li class="ui-state-default">13</li>
      <li class="ui-state-default">14</li>
      <li class="ui-state-default">15</li>
    </ul>
</div>
<div id="div2">
    <ul class="selectable" id="sel2">
        <li class="ui-state-default">1</li>
        <li class="ui-state-default">2</li>
        <li class="ui-state-default">3</li>
        <li class="ui-state-default">4</li>
        <li class="ui-state-default">5</li>
        <li class="ui-state-default">6</li>
        <li class="ui-state-default">7</li>
        <li class="ui-state-default">8</li>
        <li class="ui-state-default">9</li>
        <li class="ui-state-default">10</li>
        <li class="ui-state-default">11</li>
        <li class="ui-state-default">12</li>
        <li class="ui-state-default">13</li>
        <li class="ui-state-default">14</li>
        <li class="ui-state-default">15</li>
    </ul>
</div>

JS:

$(function() {
$("#sel1").selectable( {
    autoRefresh: false,
    stop: function() {
        var count = 0;
        $( '.ui-selected', this).each(function() {
            count++;
        });
        $('#tab1').html('Div 1 (' + count + ')');
    }
});
$("#sel2").selectable( {
    autoRefresh: false,
    stop: function() {
        var count = 0;
        $( '.ui-selected', this).each(function() {
            count++;
        });
        $('#tab2').html('Div 2 (' + count + ')');
    }
});
$("#tabs").tabs();
});

参见示例:http://jsfiddle.net/3pKQf/8/

1 个答案:

答案 0 :(得分:1)

使用:

 autoRefresh: true,

在第二个