3

見つけられたすべてのデモは、次のパターンに従っています。

<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
    ..
</ol>

jQuery UI の選択可能なデモ

リストの ID を一意のものに変更しようとしましたが、うまくいかないようです。選択可能な要素が「選択可能」のIDを持っている必要がありますか?もしそうなら、どうすれば複数のリストを選択可能にできますか?

4

4 に答える 4

6

ID の使用は必須ではありません。実際、html リストを使用する必要もありません。

次の例では<div>、コンテナとしてa を使用<span>し、選択可能なアイテムとして要素を使用しています。

<div class="group">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>

<script>
  $(".group").selectable({ filter: 'span' });
</script>

次の例では、データ属性セレクターを使用して、[data-album]複数のコンテナーをターゲットにしています。これらの各<p>要素は、子要素を選択対象として個別の選択可能要素に変換され<img>ます。

<p data-album="Vacation">
  <img src="..." />
  <img src="..." />
  <img src="..." />
</p>


<p data-album="Birthdays">
  <img src="..." />
  <img src="..." />
  <img src="..." />
</p>

<script>
  $("[data-album]").selectable({ filter: 'img' });
</script>
于 2012-04-05T21:20:14.107 に答える
3

運用コードは次のとおりです。

$(function() {
    $( "#selectable" ).selectable();
});

#selectable選択可能にしたいものを指す任意のセレクターに置き換えることができます。したがって、ID である必要はありません。のようなクラスになる可能性があります.selectable

于 2012-04-05T21:22:17.780 に答える
2

要素の代わりにクラスを使用します。要素のクラスには複数の値を含めることができます。

于 2012-04-05T21:21:59.947 に答える
-2

行を変えるだけ

¥('selectable').selectable();

¥('idChosed').selectable();

選択した要素ごとに

于 2012-04-05T21:25:07.587 に答える