Interaction Static Visual Static Visual Diff
Draggable

Draggable

Draggable

 <div class=&quot;ui-draggable&quot;&gt;&lt;p&gt;Draggable&lt;/p&gt;&lt;/div&gt; class=&quot;ui-draggable&quot; style=&quot;position: relative;&quot;&gt;&lt;p&gt;Draggable&lt;/p&gt;&lt;/div&gt;
Droppable

Droppable

Droppable

 <div class="ui-droppable"><p>Droppable</p></div>
Resizable

Resizable

Resizable

&lt;div &lt;div id=&quot;resizable&quot; class="ui-resizable"> <p> Resizable </p> <div class="ui-resizable-handle ui-resizable-e&quot;&gt;&lt;/div&gt; &lt;div class=&quot;ui-resizable-handle ui-resizable-s&quot;&gt;&lt;/div&gt; &lt;div ui-resizable-e&quot; unselectable=&quot;on&quot;&gt;&lt;/div&gt;&lt;div class=&quot;ui-resizable-handle ui-resizable-s&quot; unselectable=&quot;on&quot;&gt;&lt;/div&gt;&lt;div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se&quot;&gt;&lt;/div&gt; &lt;/div&gt; ui-icon-gripsmall-diagonal-se&quot; unselectable=&quot;on&quot; style=&quot;z-index: 1001;&quot;&gt;&lt;/div&gt;&lt;/div&gt;
Sortable
Sortable 1
Sortable 2
Sortable 3
Sortable 1
Sortable 2
Sortable 3
 <div class="ui-sortable"><div>Sortable 1</div><div>Sortable 2</div><div>Sortable 3</div></div>
Widget Static Visual Static Visual Diff
Accordion

Accordion Header 1

Accordion Content 1

Accordion Header 2

Accordion Header 3

Accordion Content 1
&lt;div &lt;div id=&quot;accordion&quot; class="ui-accordion ui-widget ui-helper-reset&quot;&gt; &lt;h3 class=&quot;ui-accordion-header ui-accordion-header-active ui-helper-reset&quot; role=&quot;tablist&quot;&gt; &lt;h3 class=&quot;ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" tabindex=&quot;0&quot;&gt; &lt;span class=&quot;ui-icon ui-icon-triangle-1-s&quot;&gt;&lt;/span&gt; &lt;a href=&quot;#&quot;&gt;Accordion Header 1&lt;/a&gt; &lt;/h3&gt; &lt;div class=&quot;ui-accordion-content ui-accordion-content-active ui-helper-reset ui-widget-content ui-corner-bottom&quot;&gt; role=&quot;tab&quot; aria-expanded=&quot;true&quot; tabindex=&quot;0&quot;&gt;&lt;span class=&quot;ui-icon ui-icon-triangle-1-s&quot;&gt;&lt;/span&gt;&lt;a href=&quot;#&quot;&gt;Accordion Header 1&lt;/a&gt;&lt;/h3&gt; &lt;div class=&quot;ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active&quot; role=&quot;tabpanel&quot; style=&quot;height: 19px;&quot;&gt; Accordion Content 1 </div> <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex=&quot;0&quot;&gt; &lt;span class=&quot;ui-icon ui-icon-triangle-1-e&quot;&gt;&lt;/span&gt; &lt;a href=&quot;#&quot;&gt;Accordion Header 2&lt;/a&gt; &lt;/h3&gt; &lt;div class=&quot;ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom&quot; style=&quot;height: 95px; display: none;&quot;&gt; Accordion Content 2 &lt;/div&gt; &lt;h3 class=&quot;ui-accordion-header ui-helper-reset ui-state-default ui-corner-all&quot; tabindex=&quot;0&quot;&gt; &lt;span class=&quot;ui-icon ui-icon-triangle-1-e&quot;&gt;&lt;/span&gt; &lt;a href=&quot;#&quot;&gt;Accordion Header 3&lt;/a&gt; &lt;/h3&gt; &lt;div class=&quot;ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom&quot; style=&quot;height: 95px; display: none;&quot;&gt; Accordion Content 2 &lt;/div&gt; &lt;/div&gt; role=&quot;tab&quot; aria-expanded=&quot;false&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;ui-icon ui-icon-triangle-1-e&quot;&gt;&lt;/span&gt;&lt;a href=&quot;#&quot;&gt;Accordion Header 2&lt;/a&gt;&lt;/h3&gt; &lt;div class=&quot;ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom&quot; role=&quot;tabpanel&quot; style=&quot;height: 19px; display: none;&quot;&gt; Accordion Content 2 &lt;/div&gt; &lt;h3 class=&quot;ui-accordion-header ui-helper-reset ui-state-default ui-corner-all&quot; role=&quot;tab&quot; aria-expanded=&quot;false&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;ui-icon ui-icon-triangle-1-e&quot;&gt;&lt;/span&gt;&lt;a href=&quot;#&quot;&gt;Accordion Header 3&lt;/a&gt;&lt;/h3&gt; &lt;div class=&quot;ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom&quot; role=&quot;tabpanel&quot; style=&quot;height: 19px; display: none;&quot;&gt; Accordion Content 3 &lt;/div&gt; &lt;/div&gt;
Datepicker
Prev Next
December 2008
Su Mo Tu We Th Fr Sa
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
&lt;div &lt;div id=&quot;datepicker&quot; class=&quot;hasDatepicker&quot;&gt;&lt;div class=&quot;ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all&quot;&gt;&lt;div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all&quot;&gt; &lt;a title=&quot;Prev&quot; ui-corner-all&quot;&gt;&lt;a class="ui-datepicker-prev ui-corner-all" href=&quot;#&quot;&gt;&lt;span class=&quot;ui-icon ui-icon-circle-triangle-w&quot;&gt;Prev&lt;/span&gt;&lt;/a&gt; &lt;a title=&quot;Next&quot; onclick=&quot;DP_jQuery.datepicker._adjustDate('#datepicker', -1, 'M');&quot; title=&quot;Prev&quot;&gt;&lt;span class=&quot;ui-icon ui-icon-circle-triangle-w&quot;&gt;Prev&lt;/span&gt;&lt;/a&gt;&lt;a class="ui-datepicker-next ui-corner-all" href=&quot;#&quot;&gt;&lt;span class=&quot;ui-icon ui-icon-circle-triangle-e&quot;&gt;Next&lt;/span&gt;&lt;/a&gt; &lt;div class=&quot;ui-datepicker-title&quot;&gt; &lt;span class=&quot;ui-datepicker-month&quot;&gt;December&lt;/span&gt; &lt;span class=&quot;ui-datepicker-year&quot;&gt;2008&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;table class=&quot;ui-datepicker-calendar&quot;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th class=&quot;ui-datepicker-week-end&quot;&gt;&lt;span title=&quot;Sunday&quot;&gt;Su&lt;/span&gt;&lt;/th&gt; &lt;th&gt;&lt;span title=&quot;Monday&quot;&gt;Mo&lt;/span&gt;&lt;/th&gt; &lt;th&gt;&lt;span title=&quot;Tuesday&quot;&gt;Tu&lt;/span&gt;&lt;/th&gt; &lt;th&gt;&lt;span title=&quot;Wednesday&quot;&gt;We&lt;/span&gt;&lt;/th&gt; &lt;th&gt;&lt;span title=&quot;Thursday&quot;&gt;Th&lt;/span&gt;&lt;/th&gt; &lt;th&gt;&lt;span title=&quot;Friday&quot;&gt;Fr&lt;/span&gt;&lt;/th&gt; &lt;th class=&quot;ui-datepicker-week-end&quot;&gt;&lt;span title=&quot;Saturday&quot;&gt;Sa&lt;/span&gt;&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td class=&quot;ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled&quot;&gt; &lt;/td&gt;&lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;1&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;ui-datepicker-today&quot;&gt;&lt;a href=&quot;#&quot; onclick=&quot;DP_jQuery.datepicker._adjustDate('#datepicker', +1, 'M');&quot; title=&quot;Next&quot;&gt;&lt;span class=&quot;ui-icon ui-icon-circle-triangle-e&quot;&gt;Next&lt;/span&gt;&lt;/a&gt;&lt;div class=&quot;ui-datepicker-title&quot;&gt;&lt;span class=&quot;ui-datepicker-month&quot;&gt;April&lt;/span&gt; &lt;span class=&quot;ui-datepicker-year&quot;&gt;2025&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;table class=&quot;ui-datepicker-calendar&quot;&gt;&lt;thead&gt;&lt;tr&gt;&lt;th class=&quot;ui-datepicker-week-end&quot;&gt;&lt;span title=&quot;Sunday&quot;&gt;Su&lt;/span&gt;&lt;/th&gt;&lt;th&gt;&lt;span title=&quot;Monday&quot;&gt;Mo&lt;/span&gt;&lt;/th&gt;&lt;th&gt;&lt;span title=&quot;Tuesday&quot;&gt;Tu&lt;/span&gt;&lt;/th&gt;&lt;th&gt;&lt;span title=&quot;Wednesday&quot;&gt;We&lt;/span&gt;&lt;/th&gt;&lt;th&gt;&lt;span title=&quot;Thursday&quot;&gt;Th&lt;/span&gt;&lt;/th&gt;&lt;th&gt;&lt;span title=&quot;Friday&quot;&gt;Fr&lt;/span&gt;&lt;/th&gt;&lt;th class=&quot;ui-datepicker-week-end&quot;&gt;&lt;span title=&quot;Saturday&quot;&gt;Sa&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class=&quot; ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled&quot;&gt; &lt;/td&gt;&lt;td class=&quot; ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled&quot;&gt; &lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;1&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; ui-datepicker-days-cell-over ui-datepicker-current-day ui-datepicker-today&quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class="ui-state-default ui-state-highlight&quot;&gt;2&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;3&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;4&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;5&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;ui-datepicker-week-end&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;6&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class=&quot;ui-datepicker-week-end&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;7&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;8&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;9&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;10&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;11&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;12&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;ui-datepicker-week-end&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;13&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class=&quot;ui-datepicker-week-end&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;14&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;15&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;16&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;17&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;18&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;ui-datepicker-current-day&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-active&quot;&gt;19&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;ui-datepicker-week-end&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;20&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class=&quot;ui-datepicker-week-end&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;21&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;22&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;23&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;24&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;25&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;26&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;ui-datepicker-week-end&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;27&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class=&quot;ui-datepicker-week-end&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;28&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;29&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;30&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-state-default&quot;&gt;31&lt;/a&gt;&lt;/td&gt; &lt;td class=&quot;ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled&quot;&gt; &lt;/td&gt;&lt;td class=&quot;ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled&quot;&gt; &lt;/td&gt;&lt;td class=&quot;ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled&quot;&gt; &lt;/td&gt;&lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; ui-state-highlight ui-state-active ui-state-hover&quot; href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;4&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; ui-datepicker-week-end &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;5&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class=&quot; ui-datepicker-week-end &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;6&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;7&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;8&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;9&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;10&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;11&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; ui-datepicker-week-end &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;12&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class=&quot; ui-datepicker-week-end &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;13&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;14&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;15&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;16&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;17&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;18&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; ui-datepicker-week-end &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;19&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class=&quot; ui-datepicker-week-end &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;20&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;21&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;22&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;23&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;24&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;25&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; ui-datepicker-week-end &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;26&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class=&quot; ui-datepicker-week-end &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;27&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;28&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;29&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; &quot; onclick=&quot;DP_jQuery.datepicker._selectDay('#datepicker',3,2025, this);return false;&quot;&gt;&lt;a class=&quot;ui-state-default&quot; href=&quot;#&quot;&gt;30&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot; ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled&quot;&gt; &lt;/td&gt;&lt;td class=&quot; ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled&quot;&gt; &lt;/td&gt;&lt;td class=&quot; ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled&quot;&gt; &lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt; &lt;div id=&quot;ui-datepicker-div&quot; class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all&quot;&gt; &lt;div ui-corner-all ui-helper-hidden-accessible&quot;&gt;&lt;/div&gt;
Dialog <div class="ui-dialog ui-widget ui-widget-content ui-corner-all&quot; ui-corner-all ui-draggable ui-resizable&quot; tabindex=&quot;-1&quot; role="dialog" aria-labelledby=&quot;ui-dialog-title-1&quot;&gt; &lt;div aria-labelledby=&quot;ui-dialog-title-dialog&quot; style=&quot;display: block; position: absolute; overflow: hidden; z-index: 1001; outline: 0px; height: auto; width: 300px; top: 0px; left: 0px;&quot;&gt;&lt;div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix&quot;&gt; &lt;span ui-helper-clearfix&quot; unselectable=&quot;on&quot;&gt;&lt;span class="ui-dialog-title" id=&quot;ui-dialog-title-1&quot;&gt;Dialog Title&lt;/span&gt; &lt;a id=&quot;ui-dialog-title-dialog&quot; unselectable=&quot;on&quot;&gt;Dialog Title&lt;/span&gt;&lt;a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button" title=&quot;Close&quot;&gt;&lt;span unselectable=&quot;on&quot;&gt;&lt;span class="ui-icon ui-icon-closethick&quot;&gt;Close&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;div ui-icon-closethick&quot; unselectable=&quot;on&quot;&gt;close&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div id=&quot;dialog&quot; class="ui-dialog-content ui-widget-content" style="height: 13em;&quot;&gt; auto; min-height: 115px; width: auto;&quot;&gt; <p> Dialog Content </p> &lt;/div&gt; &lt;div class=&quot;ui-resizable-n ui-resizable-handle&quot;&gt;&lt;/div&gt; &lt;div class=&quot;ui-resizable-s ui-resizable-handle&quot;&gt;&lt;/div&gt; &lt;div class=&quot;ui-resizable-e ui-resizable-handle&quot;&gt;&lt;/div&gt; &lt;div class=&quot;ui-resizable-w ui-resizable-handle&quot;&gt;&lt;/div&gt; &lt;div class=&quot;ui-resizable-ne ui-resizable-handle&quot;&gt;&lt;/div&gt; &lt;div class=&quot;ui-resizable-se ui-resizable-handle &lt;/div&gt;&lt;div class=&quot;ui-resizable-handle ui-resizable-n&quot; unselectable=&quot;on&quot;&gt;&lt;/div&gt;&lt;div class=&quot;ui-resizable-handle ui-resizable-e&quot; unselectable=&quot;on&quot;&gt;&lt;/div&gt;&lt;div class=&quot;ui-resizable-handle ui-resizable-s&quot; unselectable=&quot;on&quot;&gt;&lt;/div&gt;&lt;div class=&quot;ui-resizable-handle ui-resizable-w&quot; unselectable=&quot;on&quot;&gt;&lt;/div&gt;&lt;div class=&quot;ui-resizable-handle ui-resizable-se ui-icon ui-icon-grip-diagonal-se&quot;&gt;&lt;/div&gt; &lt;div class=&quot;ui-resizable-sw ui-resizable-handle&quot;&gt;&lt;/div&gt; &lt;div class=&quot;ui-resizable-nw ui-resizable-handle&quot;&gt;&lt;/div&gt; &lt;/div&gt; ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se&quot; unselectable=&quot;on&quot; style=&quot;z-index: 1001;&quot;&gt;&lt;/div&gt;&lt;div class=&quot;ui-resizable-handle ui-resizable-sw&quot; unselectable=&quot;on&quot; style=&quot;z-index: 1002;&quot;&gt;&lt;/div&gt;&lt;div class=&quot;ui-resizable-handle ui-resizable-ne&quot; unselectable=&quot;on&quot; style=&quot;z-index: 1003;&quot;&gt;&lt;/div&gt;&lt;div class=&quot;ui-resizable-handle ui-resizable-nw&quot; unselectable=&quot;on&quot; style=&quot;z-index: 1004;&quot;&gt;&lt;/div&gt;&lt;/div&gt;
Progressbar
&lt;div &lt;div id=&quot;progressbar&quot; class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow=&quot;13&quot;&gt; &lt;div aria-valuenow=&quot;0&quot;&gt;&lt;div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 0%;&quot;&gt;&lt;/div&gt; &lt;/div&gt; 0%;&quot;&gt;&lt;/div&gt;&lt;/div&gt;
slider
<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a href=&quot;#&quot; class="ui-slider-handle ui-state-default ui-corner-all" href=&quot;#&quot;&gt;&lt;/a&gt;&lt;/div&gt; style="left: 0%;&quot; 0%;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
Tabs
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
&lt;div &lt;div id=&quot;tabs&quot; class="ui-tabs ui-widget ui-widget-content ui-corner-all"> <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> <li class="ui-state-default ui-state-active ui-corner-top ui-tabs-selected ui-corner-top&quot;&gt;&lt;a href=&quot;#fragment-1&quot;&gt;First&lt;/a&gt;&lt;/li&gt; &lt;li class=&quot;ui-state-default ui-corner-top&quot;&gt;&lt;a href=&quot;#fragment-2&quot;&gt;Second&lt;/a&gt;&lt;/li&gt; &lt;li class=&quot;ui-state-default ui-corner-top&quot;&gt;&lt;a href=&quot;#fragment-3&quot;&gt;Third&lt;/a&gt;&lt;/li&gt; &lt;li class=&quot;ui-state-default ui-state-disabled ui-corner-top&quot;&gt;&lt;a href=&quot;#fragment-3&quot;&gt;Disabled&lt;/a&gt;&lt;/li&gt; ui-state-active&quot;&gt;&lt;a href=&quot;#tabs-1&quot;&gt;First&lt;/a&gt;&lt;/li&gt; &lt;li class=&quot;ui-state-default ui-corner-top&quot;&gt;&lt;a href=&quot;#tabs-2&quot;&gt;Second&lt;/a&gt;&lt;/li&gt; &lt;li class=&quot;ui-state-default ui-corner-top&quot;&gt;&lt;a href=&quot;#tabs-3&quot;&gt;Third&lt;/a&gt;&lt;/li&gt; </ul> <div id=&quot;fragment-1&quot; class=&quot;ui-tabs-panel ui-widget-content ui-corner-bottom&quot;&gt; Lorem id=&quot;tabs-1&quot; class=&quot;ui-tabs-panel ui-widget-content ui-corner-bottom&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. &lt;/div&gt; &lt;div id=&quot;fragment-2&quot; class=&quot;ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide&quot;&gt; Phasellus consequat.&lt;/div&gt; &lt;div id=&quot;tabs-2&quot; class=&quot;ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide&quot;&gt;Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum. &lt;/div&gt; &lt;div id=&quot;fragment-3&quot; class=&quot;ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide&quot;&gt; Nam bibendum.&lt;/div&gt; &lt;div id=&quot;tabs-3&quot; class=&quot;ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide&quot;&gt;Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue. &lt;/div&gt; &lt;/div&gt; augue.&lt;/div&gt; &lt;/div&gt;