博客

jQuery UI sortable widget classes选项

  • Post category:jquery

以下是关于 jQuery UI Sortable Widget classes 选项的详细攻略：

jQuery UI Sortable Widget classes 选项

classes 选项用于自定义可排序列表的 CSS。通过该选项可以自定义可排序列表的样式。

语法

$( ".selector" ).sortable({
  classes: {
    "ui-sortable": "custom-sortable",
    "ui-sortable-handle": "custom-handle",
    "ui-sortable-placeholder": "custom-placeholder"
  }
});

其中，"ui-sortable"、"ui-sortable-handle" 和 "ui-sortable-placeholder" 是 jQuery UI Sortable Widget 默认的 CSS 类，而 "custom-sortable"、"custom-handle" 和 "custom-placeholder" 则是自定义的 CSS 类。

示例一：自定义可排序列表的 CSS 类

<ul id="sortable">
  <li>Item 1</>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
$( "#sortable" ).sortable({
  classes: {
    "ui-sortable": "custom-sortable",
    "ui-sortable-handle": "custom-handle",
    "ui-sortable-placeholder": "custom-placeholder"
  }
});
</script>

这将初始化一个可排序的列表，并通过 classes 选项自定义了可排序列表的 CSS 类。

示例二：使用自定义的 CSS 类

<ul id="sortable">
  <li class="custom-handle">Item 1</li>
  <li class="custom-handle">Item 2</li>
  <li class="custom-handle">Item 3</li>
</ul>

<script>
$( "#sortable" ).sortable({
  classes: {
    "ui-sortable-handle": "custom-handle"
  }
});
</script>

这将初始化一个可排序的列表，并通过 classes 选项自定义了可排序列表的 CSS 类。然后，将自定义的 CSS 类 custom-handle 应用到列表项中，从而实现自定义的样式。

总结：

classes 选项用于自定义可排序列表的 CSS 类。通过该选项可以自定义可排序列表的样式。可以使用该选项来自定义可排序列表的 CSS 类，从而实现自定义的样式。

以上是关于 jQuery UI Sortable Widget classes 选项的详细攻略，包括语法和两个示例。

Tags: