Properties

NameTypeDefault
autoOpen Boolean true

Sets or gets whether the window will be shown after it's creation.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :autoOpen="true">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
animationType String fade

Sets or gets window's close and show animation type.

Possible Values:
'none'
'fade'
'slide'
'combined'
<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :animationType="'slide'">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
collapsed Boolean false

Determines whether the window is collapsed.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :showCollapseButton="true"
:collapsed="true">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
collapseAnimationDuration Number 150

Determines the duration in milliseconds of the expand/collapse animation.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :showCollapseButton="true"
:collapseAnimationDuration="3000">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
content String ''

Sets or gets window's content's html content.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :content="'New Content'">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
closeAnimationDuration Number 350

Sets or gets window's close animation duration.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :closeAnimationDuration="3000">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
closeButtonSize Number 16

Sets or gets window's close button size.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :closeButtonSize="20">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
closeButtonAction String hide

This setting specifies what happens when the user clicks the jqxWindow's close button.

Possible Values:
'hide'
'close'-clicking the close button removes the window from the DOM
<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :closeButtonAction="'close'">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
cancelButton Object | String null

Sets or gets cancel button. When a cancel button is specified you can use this button to interact with the user. When any user press the cacel button window is going to be closed and the dialog result will be in the following format: { OK: false, Cancel: true, None: false }.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :cancelButton="cancelButton">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
data: function () {
return {
cancelButton: '#cancel'
}
}
}
</script>
dragArea Object null

Sets or gets the screen area which is available for dragging(moving) the jqxWindow. Example value: { left: 300, top: 300, width: 600, height: 600 }. By default, the dragArea is null which means that the users will be able to drag the window in the document's body bounds.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :dragArea="dragArea">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
data: function () {
return {
dragArea: { left: 100, top: 100, width: 500, height: 400 }
}
}
}
</script>
draggable Boolean true

Sets or gets whether the window is draggable.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :draggable="false">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
disabled Boolean false

Sets or gets whether the window is disabled.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :disabled="true">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
height Number | String null

Sets or gets the window's height.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :height="220">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
initContent Function null

Initializes the jqxWindow's content.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :initContent="initContent">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
methods: {
initContent: function () {
jqwidgets.createInstance('#ok', 'jqxButton', { width: 50, height: 50 });
}
}
}
</script>
isModal Boolean false

Sets or gets whether the window is displayed as a modal dialog. If the jqxWindow's mode is set to modal, the window blocks user interaction with the underlying user interface.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :isModal="true">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
keyboardCloseKey Number 'esc'

Sets or gets the key which could be used for closing the window when it's on focus. Possible value is every keycode and the 'esc' strig (for the escape key).

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :keyboardCloseKey="32">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
keyboardNavigation Boolean true

Determines whether the keyboard navigation is enabled or disabled.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :keyboardNavigation="false">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
minHeight Number 50

Sets or gets window's minimum height.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :minHeight="150">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
maxHeight Number 600

Sets or gets window's maximum height.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :maxHeight="250">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
minWidth Number 50

Sets or gets window's minimum width.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :minWidth="200">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
maxWidth Number 600

Sets or gets window's maximum width.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :maxWidth="350">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
modalOpacity Number | String 0.3

Sets or gets the jqxWindow's background displayed over the underlying user interface when the window is in modal dialog mode.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :isModal="true" :modalOpacity="0.3">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
modalZIndex Number 18000

Sets or gets the jqxWindow's z-index when it is displayed as a modal dialog.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :isModal="true" :modalZIndex="9999">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
modalBackgroundZIndex Number 12990

Sets or gets the jqxWindow overlay's z-index when it is displayed as a modal dialog.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :isModal="true" :modalBackgroundZIndex="9999">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
okButton String | Object null

Sets or gets submit button. When a ok/submit button is specified you can use this button to interact with the user. When any user press the submit button window is going to be closed and the dialog result will be in the following format: { OK: true, Cancel: false, None: false }.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :okButton="okButton">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
data: function () {
return {
okButton: '#ok'
}
}
}
</script>
position String | Object center

Sets or gets window's position. The value could be in the following formats: 'center', 'top, left', '{ x: 300, y: 500 }', '[300, 500]'.

<template>
<JqxWindow ref="myWindow"
:width="300" :position="position">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
data: function () {
return {
position: 'top,left'
}
}
}
</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>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :rtl="true">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
resizable Boolean true

Enables or disables whether the end-user can resize the window.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :resizable="false">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
showAnimationDuration Number 350

Sets or gets window's show animation duration.

<template>
<JqxWindow ref="myWindow"
:width="300" :autoOpen="false" :position='{ x: 100, y: 100}' :showAnimationDuration="3000">
<div>RISC</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
mounted: function () {
this.$refs.myWindow.open();
}
}
</script>
showCloseButton Boolean true

Sets or gets whether a close button will be visible.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :showCloseButton="false">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
showCollapseButton Boolean false

Sets or gets whether the collapse button will be visible.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :showCollapseButton="true">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
theme String ''

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>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :theme="'material'">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
title String ''

Sets or gets window's title content.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :title="'Title'">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
width Number | String null

Sets or gets the window's width.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>
zIndex Number 9001

Sets or gets the jqxWindow z-index.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :zIndex="9999">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
}
}
</script>

Events

close Event

This event is triggered when the window is closed.

Code examples

Bind to the close event of jqxWindow.

<template>
<JqxWindow ref="myWindow" @close="onClose($event)"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
methods: {
onClose: function (event) {
alert('do something...');
}
}
}
</script>

collapse Event

This event is triggered when the window is collapsed.

Code examples

Bind to the collapse event of jqxWindow.

<template>
<JqxWindow ref="myWindow" @collapse="onCollapse($event)"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
mounted: function () {
this.$refs.myWindow.showCollapseButton = true;
},
methods: {
onCollapse: function (event) {
alert('do something...');
}
}
}
</script>

expand Event

This event is triggered when the window is expanded.

Code examples

Bind to the expand event of jqxWindow.

<template>
<JqxWindow ref="myWindow" @expand="onExpand($event)"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
mounted: function () {
this.$refs.myWindow.showCollapseButton = true;
},
methods: {
onExpand: function (event) {
alert('do something...');
}
}
}
</script>

moving Event

This event is triggered when the window is dragging by the user.

Code examples

Bind to the moving event of jqxWindow.

<template>
<JqxWindow ref="myWindow" @moving="onMoving($event)"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
methods: {
onMoving: function (event) {
alert('do something...');
}
}
}
</script>

moved Event

This event is triggered when the window is dropped by the user.

Code examples

Bind to the moved event of jqxWindow.

<template>
<JqxWindow ref="myWindow" @moved="onMoved($event)"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
methods: {
onMoved: function (event) {
alert('do something...');
}
}
}
</script>

open Event

This event is triggered when the window is displayed.

Code examples

Bind to the open event of jqxWindow.

<template>
<div>
<JqxWindow ref="myWindow" @open="onOpen($event)"
:width="300" :position='{ x: 100, y: 100}' :autoOpen="false">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
<JqxButton style="width:100px" @click="openWindow()">Open</JqxButton>
</div>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
export default {
components: {
JqxWindow,
JqxButton
},
methods: {
onOpen: function (event) {
alert('do something...');
},
openWindow: function () {
this.$refs.myWindow.open();
}
}
}
</script>

resizing Event

This event is triggered when the end-user is resizing the window.

Code examples

Bind to the resizing event of jqxWindow.

<template>
<JqxWindow ref="myWindow" @resizing="onResizing($event)"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
methods: {
onResizing: function (event) {
alert('do something...');
}
}
}
</script>

resized Event

This event is triggered when the end-user has resized the window.

Code examples

Bind to the resized event of jqxWindow.

<template>
<JqxWindow ref="myWindow" @resized="onResized($event)"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
methods: {
onResized: function (event) {
alert('do something...');
}
}
}
</script>

Methods

NameArgumentsReturn Type
bringToFront None None

Bringing the window to the front.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
mounted: function () {
this.$refs.myWindow.bringToFront();
}
}
</script>
close None None

Hiding/closing the current window (the action - hide or close depends on the closeButtonAction).

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
mounted: function () {
this.$refs.myWindow.close();
}
}
</script>
collapse None None

Collapse the current window.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
mounted: function () {
this.$refs.myWindow.collapse();
}
}
</script>
closeAll None None

Closing all open windows which are not modal.

<template>
<div>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}'>
<div>Header</div>
<div>Content </div>
</JqxWindow>
<JqxWindow ref="myWindow2"
:width="300" :position='{ x: 100, y: 200}'>
<div>Header</div>
<div>Content</div>
</JqxWindow>
<jqxButton style="width:100px" @click="closeAll()">Close All</jqxButton>
</div>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
export default {
components: {
JqxWindow,
JqxButton
},
methods: {
closeAll: function (event) {
this.$refs.myWindow.closeAll();
}
}
}
</script>
disable None None

Disabling the window.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
mounted: function () {
this.$refs.myWindow.disable();
}
}
</script>
destroy None None

Destroys the widget.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
mounted: function () {
this.$refs.myWindow.destroy();
}
}
</script>
enable None None

Enabling the window

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
mounted: function () {
this.$refs.myWindow.disabled = true;
this.$refs.myWindow.enable();
}
}
</script>
expand None None

Expand the current window.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
mounted: function () {
this.$refs.myWindow.collapsed = true;
this.$refs.myWindow.expand();
}
}
</script>
focus None None

Focuses the window.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
mounted: function () {
this.$refs.myWindow.focus();
}
}
</script>
isOpen None Boolean

Returns true when jqxWindow is opened and false when the jqxWindow is closed

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
mounted: function () {
const value = this.$refs.myWindow.isOpen();
}
}
</script>
move top, left None

Moving the current window.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
mounted: function () {
this.$refs.myWindow.move(300,600);
}
}
</script>
open None None

Opening/showing the current window.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}' :autoOpen="false">
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
mounted: function () {
this.$refs.myWindow.open();
}
}
</script>
hide None None

Hiding the current window.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
mounted: function () {
this.$refs.myWindow.hide();
}
}
</script>
resize top, left None

Resizes the window. The 'resizable' property is expected to be set to "true".

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
mounted: function () {
this.$refs.myWindow.resize(300,300);
}
}
</script>
setTitle title None

Setting window's title

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
mounted: function () {
this.$refs.myWindow.setTitle('New Title');
}
}
</script>
setContent content None

Setting window's content.

<template>
<JqxWindow ref="myWindow"
:width="300" :position='{ x: 100, y: 100}'>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage of features intended to facilitate manual assembly coding, and
that complex addressing modes take many cycles to perform due to the required additional
memory accesses...
<p>
<input type='button' id='ok' value='OK' />
<input type='button' id='cancel' value='Cancel' />
</p>
</div>
</JqxWindow>
</template>
<script>
import JqxWindow from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue';
export default {
components: {
JqxWindow
},
mounted: function () {
this.$refs.myWindow.setContent('New Content');
}
}
</script>