jqxDockPanel requires the following files:
jqx.base.css
jqxcore.js
jqxdockpanel.js
<script src="~/jqwidgets/jqxdockpanel.js"></script> <jqx-dock-panel> <div id='first' dock='left' style='background: #486974;'> First Div </div> <div id='second' dock='top' style='height: 100px; background: #368ba7;'> Second Div </div> <div id='third' dock='right' style='background: #df7169;'> Third Div </div> <div id='fourth' style='background: #a73654;'> Fourth Div </div> </jqx-dock-panel>To call a function(method), you need to pass the method name and parameters(if any) in the UI component’s instance.
<script src="~/jqwidgets/jqxdockpanel.js"></script> <jqx-dock-panel> <div id='first' dock='left' style='background: #486974;'> First Div </div> <div id='second' dock='top' style='height: 100px; background: #368ba7;'> Second Div </div> <div id='third' dock='right' style='background: #df7169;'> Third Div </div> <div id='fourth' style='background: #a73654;'> Fourth Div </div> </jqx-dock-panel> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["refresh"](); } </script> }To bind to an event of a UI Component, you can use
on-event-type
syntax. The example
code below demonstrates how to bind to an event.
<script src="~/jqwidgets/jqxdockpanel.js"></script> <jqx-dock-panel> <div id='first' dock='left' style='background: #486974;'> First Div </div> <div id='second' dock='top' style='height: 100px; background: #368ba7;'> Second Div </div> <div id='third' dock='right' style='background: #df7169;'> Third Div </div> <div id='fourth' style='background: #a73654;'> Fourth Div </div> </jqx-dock-panel> @section scripts { <script type="text/javascript"> function eventHandler(event) { } </script> }