博客

jQWidgets jqxTabs dragEnd事件

  • Post category:jquery

jQWidgets是一个基于jQuery的UI组件库，提供了许多丰富的UI组件，包括Tab选项卡组件(jqxTabs)。jqxTabs提供了多种事件用于监听Tab选项卡组件的各种状态，其中就包括dragEnd事件。下面就来详细讲解一下”jQWidgets jqxTabs dragEnd事件”的攻略。

jqxTabs dragEnd事件

jqxTabs dragEnd事件是Tab选项卡组件(jqxTabs)的拖拽结束事件，当用户在改变Tab的顺序时触发。

事件参数

当dragEnd事件触发时，会返回一个事件参数(event arg)，该事件参数包含以下属性：

  • args.item：拖拽的Tab的内容(jQuery对象)。
  • args.index：拖拽的Tab的索引位置。
  • args.position：拖拽Tab的位置（’top’或’bottom’）。

绑定dragEnd事件

可以使用on方法来绑定dragEnd事件，代码如下：

$('#jqxTabs').on('dragEnd', function (event) {
  console.log(event.args.item);
  console.log(event.args.index);
  console.log(event.args.position);
});

示例一：改变Tab的顺序

下面的示例演示了如何使用dragEnd事件来改变Tab的顺序，用户可以通过拖拽Tab来改变Tab的位置。

<div id="jqxTabs">
  <ul>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
    <li>Tab 4</li>
  </ul>
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
  <div>Content 4</div>
</div>

<script>
$(function() {
  $('#jqxTabs').jqxTabs({
    reorder: true
  });

  $('#jqxTabs').on('dragEnd', function (event) {
    console.log(event.args.item);
    console.log(event.args.index);
    console.log(event.args.position);
  });
});
</script>

示例二：显示拖动的Tab的内容

下面的示例演示了如何使用dragEnd事件来显示拖动的Tab的内容。

<div id="jqxTabs">
  <ul>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
    <li>Tab 4</li>
  </ul>
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
  <div>Content 4</div>
</div>

<div id="tabContent"></div>

<script>
$(function() {
  $('#jqxTabs').jqxTabs({
    reorder: true
  });

  $('#jqxTabs').on('dragEnd', function (event) {
    var tabIndex = event.args.index;
    var tabContent = $('#jqxTabs').find('div')[tabIndex].innerHTML;
    $('#tabContent').html(tabContent);
  });
});
</script>

当用户拖拽Tab完成后，该示例会在页面上显示被拖动的Tab的内容。

结语

dragEnd事件是Tab选项卡组件(jqxTabs)的一个很重要的事件，通过该事件可以实现许多丰富的功能。以上就是关于”jQWidgets jqxTabs dragEnd事件”的完整攻略，希望对您有所帮助！

Tags: