| Name | Type | Default |
|---|
|
animationType
|
String
|
none
|
Sets or gets the animation type of switching tabs.
Possible Values:
'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>
|
|
autoHeight
|
Boolean
|
true
|
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>
|
|
closeButtonSize
|
Number
|
16
|
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>
|
|
collapsible
|
Boolean
|
false
|
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>
|
|
contentTransitionDuration
|
Number
|
450
|
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>
|
|
disabled
|
Boolean
|
false
|
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>
|
|
enabledHover
|
Boolean
|
true
|
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>
|
|
enableScrollAnimation
|
Boolean
|
true
|
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>
|
|
enableDropAnimation
|
Boolean
|
false
|
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>
|
|
height
|
Number | String
|
auto
|
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>
|
|
initTabContent
|
Function
|
null
|
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>
|
|
keyboardNavigation
|
Boolean
|
true
|
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>
|
|
next
|
Object
|
null
|
<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>
|
|
previous
|
Object
|
null
|
<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>
|
|
position
|
String
|
top
|
Sets or gets whether the tabs are positioned at 'top' or 'bottom.
Possible Values:
'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>
|
|
reorder
|
Boolean
|
false
|
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>
|
|
rtl
|
Boolean
|
false
|
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>
|
|
scrollAnimationDuration
|
Number
|
250
|
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>
|
|
selectedItem
|
Number
|
0
|
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>
|
|
selectionTracker
|
Boolean
|
false
|
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>
|
|
scrollable
|
Boolean
|
true
|
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>
|
|
scrollPosition
|
String
|
'right'
|
Sets or gets the position of the scroll arrows.
Possible Values:
'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>
|
|
scrollStep
|
Number
|
70
|
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>
|
|
showCloseButtons
|
Boolean
|
false
|
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>
|
|
toggleMode
|
String
|
click
|
Sets or gets user interaction used for switching the different tabs.
Possible Values:
'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>
|
|
theme
|
String
|
''
|
Sets the widget's theme.
<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>
|
|
width
|
Number | String
|
auto
|
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>
|
|
|
|
add
|
Event
|
|
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>
|
|
collapsed
|
Event
|
|
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>
|
|
dragStart
|
Event
|
|
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>
|
|
dragEnd
|
Event
|
|
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>
|
|
expanded
|
Event
|
|
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>
|
|
removed
|
Event
|
|
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>
|
|
selecting
|
Event
|
|
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>
|
|
selected
|
Event
|
|
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>
|
|
tabclick
|
Event
|
|
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>
|
|
unselecting
|
Event
|
|
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>
|
|
unselected
|
Event
|
|
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>
|
|
|
| Name | Arguments | Return Type |
|---|
|
addAt
|
index, title, content
|
None
|
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>
|
|
addFirst
|
htmlElement1, htmlElement2
|
None
|
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>
|
|
addLast
|
htmlElement1, htmlElement2
|
None
|
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>
|
|
collapse
|
None
|
None
|
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>
|
|
disable
|
None
|
None
|
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>
|
|
disableAt
|
index
|
None
|
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>
|
|
destroy
|
None
|
None
|
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>
|
|
ensureVisible
|
index
|
None
|
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>
|
|
enableAt
|
index
|
None
|
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>
|
|
expand
|
None
|
None
|
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>
|
|
enable
|
None
|
None
|
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>
|
|
focus
|
None
|
None
|
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>
|
|
getTitleAt
|
index
|
String
|
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>
|
|
getContentAt
|
index
|
Object
|
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>
|
|
getDisabledTabsCount
|
None
|
Object
|
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>
|
|
hideCloseButtonAt
|
index
|
None
|
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>
|
|
hideAllCloseButtons
|
None
|
None
|
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>
|
|
length
|
None
|
Number
|
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>
|
|
removeAt
|
index
|
None
|
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>
|
|
removeFirst
|
None
|
None
|
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>
|
|
removeLast
|
None
|
None
|
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>
|
|
select
|
index
|
None
|
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>
|
|
setContentAt
|
index, htmlElement
|
None
|
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>
|
|
setTitleAt
|
index, htmlElement
|
None
|
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>
|
|
showCloseButtonAt
|
index
|
None
|
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>
|
|
showAllCloseButtons
|
None
|
None
|
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>
|
|
val
|
value
|
String
|
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>
|