Vue UI Components Documentation

Sets or gets the animation type of switching tabs.

'none'

'fade'

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150" :animationType="'fade'">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Sets or gets whether the jqxTabs header's height will be equal to the item with max height.

<template>
  <JqxTabs ref="myTabs"
    :width="300" :autoHeight="true">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Sets or gets the close button size.

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150" :showCloseButtons="true" :closeButtonSize="20">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Enables or disables the collapsible feature.

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150" :collapsible="true">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Sets or gets the duration of the content's fade animation which occurs when the user selects a tab. This setting has effect when the 'animationType' is set to 'fade'.

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150" :animationType="'fade'" :contentTransitionDuration="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Enables or disables the jqxTabs widget.

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150" :disabled="true">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Enables or disables the tabs hover effect.

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150" :enabledHover="true">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Sets or gets whether the scroll animation is enabled.

<template>
  <JqxTabs ref="myTabs"
    :width="100" :height="150" :enableScrollAnimation="true">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Sets or gets whether the drop animation is enabled.

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150" :reorder="true" :enableDropAnimation="true">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Sets or gets widget's height.

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Callback function that the tab calls when a content panel needs to be initialized.

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150" :initTabContent="initTabContent">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    methods: {
      initTabContent: function () {
        jqwidgets.createInstance('#button', 'jqxButton', { width: 80, height: 50 });
      }
    }
  }
</script>

Enables or disables the keyboard navigation.

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150" :keyboardNavigation="false">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li> 
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template> 
 
<script> 
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue'; 
 
  export default { 
    components: { 
      JqxTabs
    },
    mounted : function () {
      let next = this.$refs.myTabs.next;
      alert(next);
    }
  }
</script>

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li> 
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template> 
 
<script> 
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue'; 
 
  export default { 
    components: { 
      JqxTabs
    },
    mounted : function () {
      let previous = this.$refs.myTabs.previous;
      alert(previous);
    }
  }
</script>

Sets or gets whether the tabs are positioned at 'top' or 'bottom.

'top'

'bottom'

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150" :position="'bottom'">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Enables or disables the reorder feature. When this feature is enabled, the end-user can drag a tab and drop it over another tab. As a result the tabs will be reordered.

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150" :reorder="true">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150" :rtl="true">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Sets or gets the duration of the scroll animation.

<template>
  <JqxTabs ref="myTabs"
    :width="100" :height="150" :scrollAnimationDuration="3000">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Sets or gets selected tab.

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150" :selectedItem="1">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Sets or gets whether the selection tracker is enabled.

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150" :selectionTracker="true">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Sets or gets whether the scrolling is enabled.

<template>
  <JqxTabs ref="myTabs"
    :width="100" :height="150" :scrollable="false">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Sets or gets the position of the scroll arrows.

'left'

'right'

'both'

<template>
  <JqxTabs ref="myTabs"
    :width="100" :height="150" :scrollPosition="'both'">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Sets or gets the scrolling step.

<template>
  <JqxTabs ref="myTabs"
    :width="100" :height="150" :scrollStep="10">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Sets or gets whether a close button is displayed in each tab.

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150" :showCloseButtons="true">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Sets or gets user interaction used for switching the different tabs.

'click'

'dblclick'

'mouseenter'

'none'

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150" :toggleMode="'dblclick'">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150" :theme="'material'">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

Sets or gets widget's width.

<template>
  <JqxTabs ref="myTabs"
    :width="300" :height="150">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    }
  }
</script>

This event is triggered when a new tab is added to the jqxTabs.

Code examples

Bind to the add event of jqxTabs.

<template>
  <div>
    <JqxTabs ref="myTabs" @add="onAdd($event)"
         :width="300">
      <ul>
        <li>Tab1</li>
        <li>Tab2</li>
      </ul>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </JqxTabs>
    <JqxButton style="margin-top: 10px" :width="60" @click="add()">Add Tab</JqxButton>
  </div>
</template>
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  
  export default {
    components: {
      JqxTabs,
      JqxButton
    },
    methods: {
      add: function () {
        this.$refs.myTabs.addLast('Title', 'Content');
      },
      onAdd: function (event) {
        alert('Tab added');
      }
    }
  }
</script>

Theis event is triggered when any tab is collapsed.

Code examples

Bind to the collapsed event of jqxTabs.

<template>
  <JqxTabs ref="myTabs" @collapsed="onCollapsed($event)"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.collapsible = true;
    },
    methods: {
      onCollapsed: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the drag operation started.

Code examples

Bind to the dragStart event of jqxTabs.

<template>
  <JqxTabs ref="myTabs" @dragStart="onDragStart($event)"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.reorder = true;
    },
    methods: {
      onDragStart: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the drag operation ended.

Code examples

Bind to the dragEnd event of jqxTabs.

<template>
  <JqxTabs ref="myTabs" @dragEnd="onDragEnd($event)"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.reorder = true;
    },
    methods: {
      onDragEnd: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when any tab is expanded.

Code examples

Bind to the expanded event of jqxTabs.

<template>
  <JqxTabs ref="myTabs" @expanded="onExpanded($event)"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.collapsible = true;
    },
    methods: {
      onExpanded: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a tab is removed.

Code examples

Bind to the removed event of jqxTabs.

<template>
  <div>
    <JqxTabs ref="myTabs" @removed="onRemoved($event)"
         :width="300">
      <ul>
        <li>Tab1</li>
        <li>Tab2</li>
      </ul>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </JqxTabs>
    <JqxButton style="margin-top: 10px" :width="80" @click="remove()">Remove Tab</JqxButton>
  </div>
</template>
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxTabs,
      JqxButton
    },
    methods: {
      remove: function () {
        this.$refs.myTabs.removeFirst();
      },
      onRemoved: function (event) {
        alert('Tab removed');
      }
    }
  }
</script>

This event is triggered when the user selects a tab. This event is cancelable. You can cancel the selection by setting the 'event.cancel = true' in the event callback.

Code examples

Bind to the selecting event of jqxTabs.

<template>
  <JqxTabs ref="myTabs" @selecting="onSelecting($event)"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    methods: {
      onSelecting: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user selects a new tab.

Code examples

Bind to the selected event of jqxTabs.

<template>
  <JqxTabs ref="myTabs" @selected="onSelected($event)"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    methods: {
      onSelected: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user click a tab. You can retrieve the clicked tab's index.

Code examples

Bind to the tabclick event of jqxTabs.

<template>
  <JqxTabs ref="myTabs" @tabclick="onTabclick($event)"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    methods: {
      onTabclick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user selects a tab. The last selected tab is going to become unselected. This event is cancelable. You can cancel the selection by setting the 'event.cancel = true' in the event callback.

Code examples

Bind to the unselecting event of jqxTabs.

<template>
  <JqxTabs ref="myTabs" @unselecting="onUnselecting($event)"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    methods: {
      onUnselecting: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user selects a tab. The last selected tab becomes unselected.

Code examples

Bind to the unselected event of jqxTabs.

<template>
  <JqxTabs ref="myTabs" @unselected="onUnselected($event)"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    methods: {
      onUnselected: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Adding tab at indicated position.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.addAt(1,'Title','Content');
    }
  }
</script>

Adding tab at the beginning.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.addFirst('Title','Content');
    }
  }
</script>

Adding tab at the end.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.addLast('Title','Content');
    }
  }
</script>

Collapsing the current selected tab.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.collapsible = true;
      this.$refs.myTabs.collapse();
    }
  }
</script>

Disabling the widget.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.disable();
    }
  }
</script>

Disabling tab with indicated index.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.disableAt(1);
    }
  }
</script>

Destroys the widget.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.destroy();
    }
  }
</script>

This method is ensuring the visibility of item with indicated index. If the item is currently not visible the method is scrolling to it.

<template>
  <JqxTabs ref="myTabs"
       :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
      <li>Tab3</li>
      <li>Tab4</li>
      <li>Tab5</li>
      <li>Tab6</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
    <div>Content 3</div>
    <div>Content 4</div>
    <div>Content 5</div>
    <div>Content 6</div>
  </JqxTabs>
</template>
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.ensureVisible(5);
    }
  }
</script>

Enabling tab with indicated index.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.enableAt(1);
    }
  }
</script>

Expanding the current selected tab.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.expand();
    }
  }
</script>

Enabling the widget.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.enable();
    }
  }
</script>

Focuses the widget.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.focus();
    }
  }
</script>

Gets the title of a Tab. The returned value is a "string".

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      const value = this.$refs.myTabs.getTitleAt(1);
    }
  }
</script>

Gets the content of a Tab. The returned value is a HTML Element.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      const value = this.$refs.myTabs.getContentAt(1);
    }
  }
</script>

Method: getDisabledTabsCount

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      const value = this.$refs.myTabs.getDisabledTabsCount();
    }
  }
</script>

Hiding a close button at a specific position.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.showCloseButtons = true;
      this.$refs.myTabs.hideCloseButtonAt(1);
    }
  }
</script>

Hiding all close buttons.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.showCloseButtons = true;
      this.$refs.myTabs.hideAllCloseButtons();
    }
  }
</script>

Returning the tabs count.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      const value = this.$refs.myTabs.length();
    }
  }
</script>

Removing tab with indicated index.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.removeAt(1);
    }
  }
</script>

Removing the first tab.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.removeFirst();
    }
  }
</script>

Removing the last tab.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.removeLast();
    }
  }
</script>

Selecting tab with indicated index.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.select(1);
    }
  }
</script>

Sets the content of a Tab.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.setContentAt(1,'New Content');
    }
  }
</script>

Sets the title of a Tab.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.setTitleAt(1,'Title 1');
    }
  }
</script>

Showing close button at a specific position.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.showCloseButtonAt(1);
    }
  }
</script>

Showing all close buttons.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      this.$refs.myTabs.showAllCloseButtons();
    }
  }
</script>

Sets or gets the selected tab.

<template>
  <JqxTabs ref="myTabs"
    :width="300">
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
    </ul>
    <div>Content 1<input type='button' id='button' value='Button' /></div>
    <div>Content 2</div>
  </JqxTabs>
</template>
 
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
 
  export default {
    components: {
      JqxTabs
    },
    mounted: function () {
      const value = this.$refs.myTabs.val();
    }
  }
</script>