| Name | Type | Default |
|---|
|
animationType
|
String
|
'slide'
|
Sets or gets the animation type.
Possible Values:
'slide'
'fade'
'none'
<template>
<JqxExpander ref="myExpander"
:width="350" :animationType="'fade'">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
}
}
</script>
|
|
arrowPosition
|
String
|
'right'
|
Sets or gets header's arrow position.
Possible Values:
'left'
'right'
<template>
<JqxExpander ref="myExpander"
:width="350" :arrowPosition="'left'">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
}
}
</script>
|
|
collapseAnimationDuration
|
Number
|
400
|
Sets or gets the collapsing animation duration.
<template>
<JqxExpander ref="myExpander"
:width="350" :collapseAnimationDuration="3000">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
}
}
</script>
|
|
disabled
|
Boolean
|
false
|
Sets or gets whether the expander is disabled.
<template>
<JqxExpander ref="myExpander"
:width="350" :disabled="true">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
}
}
</script>
|
|
expanded
|
Boolean
|
true
|
Sets or gets expander's state (collapsed or expanded).
<template>
<JqxExpander ref="myExpander"
:width="350" :expanded="false">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
}
}
</script>
|
|
expandAnimationDuration
|
Number
|
400
|
Sets or gets the expanding animation duration.
<template>
<JqxExpander ref="myExpander"
:width="350" :expandAnimationDuration="3000">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
}
}
</script>
|
|
height
|
Number | String
|
'auto'
|
Sets or gets expander's height. Possible values - 'auto' or string like this 'Npx' where N is any number or a numeric value in pixels.
<template>
<JqxExpander ref="myExpander"
:width="350" :height="100">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
}
}
</script>
|
|
headerPosition
|
String
|
'top'
|
Sets or gets header's position.
Possible Values:
'top'
'bottom'
<template>
<JqxExpander ref="myExpander"
:width="350" :headerPosition="'bottom'">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
}
}
</script>
|
|
initContent
|
Function
|
null
|
Callback function called when the item's content needs to be initialized. Useful for initializing other widgets within the content of jqxExpander.
<template>
<JqxExpander ref="myExpander"
:width="350" :initContent="initContent">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
<div class='initContent'></div>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
export default {
components: {
JqxExpander,
JqxButton
},
methods: {
initContent: function () {
// Useful for Initializing Other Widgets Within the Content of jqxExpander
jqwidgets.createInstance('.initContent', 'jqxButton', { value: 'Button'});
}
}
}
</script>
|
|
rtl
|
Boolean
|
false
|
Determines whether the right-to-left support is enabled.
<template>
<JqxExpander ref="myExpander"
:width="350" :rtl="true">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
}
}
</script>
|
|
showArrow
|
Boolean
|
true
|
Sets or gets whether header's arrow is going to be shown.
<template>
<JqxExpander ref="myExpander"
:width="350" :showArrow="false">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
}
}
</script>
|
|
theme
|
String
|
''
|
Sets the widget's theme.
<template>
<JqxExpander ref="myExpander"
:width="350" :theme="'material'">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
}
}
</script>
|
|
toggleMode
|
String
|
'click'
|
Sets or gets user interaction used for expanding or collapsing the content.
Possible Values:
'click'
'dblclick'
'none'
<template>
<JqxExpander ref="myExpander"
:width="350" :toggleMode="'dblclick'">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
}
}
</script>
|
|
width
|
Number | String
|
'auto'
|
Sets or gets expander's width.Possible values - 'auto' or string like this 'Npx' where N is any number or a numeric value in pixels.
<template>
<JqxExpander ref="myExpander"
:width="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
}
}
</script>
|
|
|
|
collapsing
|
Event
|
|
This event is triggered when the jqxExpander is going to be collapsed.
Code examples
Bind to the collapsing event of jqxExpander.
<template>
<JqxExpander ref="myExpander" @collapsing="onCollapsing($event)"
:width="350">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
},
methods: {
onCollapsing: function (event) {
alert('do something...');
}
}
}
</script>
|
|
collapsed
|
Event
|
|
This event is triggered when the jqxExpander is collapsed.
Code examples
Bind to the collapsed event of jqxExpander.
<template>
<JqxExpander ref="myExpander" @collapsed="onCollapsed($event)"
:width="350">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
},
methods: {
onCollapsed: function (event) {
alert('do something...');
}
}
}
</script>
|
|
expanding
|
Event
|
|
This event is triggered when the jqxExpander is going to be expanded.
Code examples
Bind to the expanding event of jqxExpander.
<template>
<JqxExpander ref="myExpander" @expanding="onExpanding($event)"
:width="350">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
},
methods: {
onExpanding: function (event) {
alert('do something...');
}
}
}
</script>
|
|
expanded
|
Event
|
|
This event is triggered when the jqxExpander is expanded.
Code examples
Bind to the expanded event of jqxExpander.
<template>
<JqxExpander ref="myExpander" @expanded="onExpanded($event)"
:width="350">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
},
methods: {
onExpanded: function (event) {
alert('do something...');
}
}
}
</script>
|
|
|
| Name | Arguments | Return Type |
|---|
|
collapse
|
None
|
None
|
Method which is collapsing the expander.
<template>
<JqxExpander ref="myExpander"
:width="350">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
},
mounted: function () {
this.$refs.myExpander.collapse();
}
}
</script>
|
|
disable
|
None
|
None
|
This method is disabling the expander.
<template>
<JqxExpander ref="myExpander"
:width="350">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
},
mounted: function () {
this.$refs.myExpander.disable();
}
}
</script>
|
|
destroy
|
None
|
None
|
This method destroys the expander.
<template>
<JqxExpander ref="myExpander"
:width="350">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
},
mounted: function () {
this.$refs.myExpander.destroy();
}
}
</script>
|
|
enable
|
None
|
None
|
This method is enabling the expander.
<template>
<JqxExpander ref="myExpander"
:width="350">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
},
mounted: function () {
this.$refs.myExpander.disable();
setTimeout(_ => this.$refs.myExpander.enable(), 1000);
}
}
</script>
|
|
expand
|
None
|
None
|
Method used for expanding the expander's content.
<template>
<JqxExpander ref="myExpander"
:width="350">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
},
mounted: function () {
this.$refs.myExpander.collapse();
setTimeout(_ => this.$refs.myExpander.expand(), 1000);
}
}
</script>
|
|
focus
|
None
|
None
|
This method focuses on the expander. When the widget is focused, keyboard navigation can be used. Here is a list of the keys, supported by jqxExpander and their function:
- Enter/Spacebar - if the focus is on the header, collapses or expands the widget.
- Tab - focuses on the header or the next element in the DOM.
- Ctrl+Up arrow - if the focus is on the content, focuses on the header.
- Ctrl+Down arrow - if the focus is on the header, focuses on the content.
<template>
<JqxExpander ref="myExpander"
:width="350">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
},
mounted: function () {
this.$refs.myExpander.focus();
}
}
</script>
|
|
getContent
|
None
|
String
|
Getting expander's content. Returns a string with the content's HTML.
<template>
<JqxExpander ref="myExpander"
:width="350">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
},
mounted: function () {
const value = this.$refs.myExpander.getContent();
}
}
</script>
|
|
getHeaderContent
|
None
|
String
|
Getting expander's header content. Returns a string with the header's HTML.
<template>
<JqxExpander ref="myExpander"
:width="350">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
},
mounted: function () {
const value = this.$refs.myExpander.getHeaderContent();
}
}
</script>
|
|
invalidate
|
None
|
None
|
This method refreshes the expander.
<template>
<JqxExpander ref="myExpander"
:width="350">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
},
mounted: function () {
this.$refs.myExpander.invalidate();
}
}
</script>
|
|
refresh
|
None
|
None
|
This method refreshes the expander.
<template>
<JqxExpander ref="myExpander"
:width="350">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
},
mounted: function () {
this.$refs.myExpander.refresh();
}
}
</script>
|
|
render
|
None
|
None
|
This method renders the expander.
<template>
<JqxExpander ref="myExpander"
:width="350">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
},
mounted: function () {
this.$refs.myExpander.render();
}
}
</script>
|
|
setHeaderContent
|
headerContent
|
None
|
This method is setting specific content to the expander's header.
<template>
<JqxExpander ref="myExpander"
:width="350">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
},
mounted: function () {
this.$refs.myExpander.setHeaderContent('New Header');
}
}
</script>
|
|
setContent
|
content
|
None
|
This method is setting specific content to the expander.
<template>
<JqxExpander ref="myExpander"
:width="350">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1971 Tymnet packet-switched network</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1980 Ethernet standard introduced</li>
</ul>
</div>
</JqxExpander>
</template>
<script>
import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
export default {
components: {
JqxExpander
},
mounted: function () {
this.$refs.myExpander.setContent('New Awesome Content!');
}
}
</script>
|