Question

我正在尝试加载两个jQuery UI可选实例，但第二个似乎存在问题。我该如何解决这个问题？

HTML

Div 1
<div id="div1">
        <ul id="selectable">
          <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><br><br>
Div 2
    <div id="div2">
            <ul id="selectable">
              <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>

CSS

#selectable .ui-selecting {
    background: #C41C7B;
}
#selectable .ui-selected {
    background: #C41C7B;
    color: white;
}
#selectable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 450px;
}
#selectable li {
    margin: 0px;
    padding: 3px;
    float: left;
    width: 16px;
    height: 16px;
    font-size: 10px;
    font-family: Arial;
    text-align: center;
}

的JavaScript

$(function() {
    $("#selectable").bind('mousedown', function (e) {
        e.metaKey = true;
    }).selectable();
});

Answer 1

他们需要不同的身份证。两者都是#selectable。

这是使用课程.selectable的工作更新。 http://jsfiddle.net/3pKQf/4/

加载两个jQuery UI实例可选

1 个答案: