jQueryUI was broken.

This commit is contained in:
azett 2021-01-02 13:18:04 +01:00
parent 499f983a28
commit c385803b6a
5 changed files with 169 additions and 95 deletions

View File

@ -58,6 +58,7 @@
<h1>YOUR COMPONENTS:</h1> <h1>YOUR COMPONENTS:</h1>
<!-- Accordion --> <!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2> <h2 class="demoHeaders">Accordion</h2>
<div id="accordion"> <div id="accordion">
@ -69,17 +70,23 @@
<div>Nam dui erat, auctor a, dignissim quis.</div> <div>Nam dui erat, auctor a, dignissim quis.</div>
</div> </div>
<!-- Autocomplete --> <!-- Autocomplete -->
<h2 class="demoHeaders">Autocomplete</h2> <h2 class="demoHeaders">Autocomplete</h2>
<div> <div>
<input id="autocomplete" title="type &quot;a&quot;"> <input id="autocomplete" title="type &quot;a&quot;">
</div> </div>
<!-- Button --> <!-- Button -->
<h2 class="demoHeaders">Button</h2> <h2 class="demoHeaders">Button</h2>
<button id="button">A button element</button> <button id="button">A button element</button>
<button id="button-icon">An icon-only button</button> <button id="button-icon">An icon-only button</button>
<!-- Checkboxradio --> <!-- Checkboxradio -->
<h2 class="demoHeaders">Checkboxradio</h2> <h2 class="demoHeaders">Checkboxradio</h2>
<form style="margin-top: 1em;"> <form style="margin-top: 1em;">
@ -90,6 +97,8 @@
</div> </div>
</form> </form>
<!-- Controlgroup --> <!-- Controlgroup -->
<h2 class="demoHeaders">Controlgroup</h2> <h2 class="demoHeaders">Controlgroup</h2>
<fieldset> <fieldset>
@ -116,6 +125,8 @@
</div> </div>
</fieldset> </fieldset>
<!-- Tabs --> <!-- Tabs -->
<h2 class="demoHeaders">Tabs</h2> <h2 class="demoHeaders">Tabs</h2>
<div id="tabs"> <div id="tabs">
@ -129,6 +140,8 @@
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div> <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div> </div>
<h2 class="demoHeaders">Dialog</h2> <h2 class="demoHeaders">Dialog</h2>
<p> <p>
<button id="dialog-link" class="ui-button ui-corner-all ui-widget"> <button id="dialog-link" class="ui-button ui-corner-all ui-widget">
@ -154,6 +167,7 @@
</div> </div>
<h2 class="demoHeaders">Framework Icons (content color preview)</h2> <h2 class="demoHeaders">Framework Icons (content color preview)</h2>
<ul id="icons" class="ui-widget ui-helper-clearfix"> <ul id="icons" class="ui-widget ui-helper-clearfix">
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-n"><span class="ui-icon ui-icon-caret-1-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-n"><span class="ui-icon ui-icon-caret-1-n"></span></li>
@ -331,18 +345,25 @@
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></li>
</ul> </ul>
<!-- Slider --> <!-- Slider -->
<h2 class="demoHeaders">Slider</h2> <h2 class="demoHeaders">Slider</h2>
<div id="slider"></div> <div id="slider"></div>
<!-- Datepicker --> <!-- Datepicker -->
<h2 class="demoHeaders">Datepicker</h2> <h2 class="demoHeaders">Datepicker</h2>
<div id="datepicker"></div> <div id="datepicker"></div>
<!-- Progressbar --> <!-- Progressbar -->
<h2 class="demoHeaders">Progressbar</h2> <h2 class="demoHeaders">Progressbar</h2>
<div id="progressbar"></div> <div id="progressbar"></div>
<!-- Progressbar --> <!-- Progressbar -->
<h2 class="demoHeaders">Selectmenu</h2> <h2 class="demoHeaders">Selectmenu</h2>
<select id="selectmenu"> <select id="selectmenu">
@ -353,10 +374,14 @@
<option>Faster</option> <option>Faster</option>
</select> </select>
<!-- Spinner --> <!-- Spinner -->
<h2 class="demoHeaders">Spinner</h2> <h2 class="demoHeaders">Spinner</h2>
<input id="spinner"> <input id="spinner">
<!-- Menu --> <!-- Menu -->
<h2 class="demoHeaders">Menu</h2> <h2 class="demoHeaders">Menu</h2>
<ul style="width:100px;" id="menu"> <ul style="width:100px;" id="menu">
@ -375,6 +400,8 @@
<li><div>Item 5</div></li> <li><div>Item 5</div></li>
</ul> </ul>
<!-- Tooltip --> <!-- Tooltip -->
<h2 class="demoHeaders">Tooltip</h2> <h2 class="demoHeaders">Tooltip</h2>
<p id="tooltip"> <p id="tooltip">
@ -382,6 +409,7 @@
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip. the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
</p> </p>
<!-- Highlight / Error --> <!-- Highlight / Error -->
<h2 class="demoHeaders">Highlight / Error</h2> <h2 class="demoHeaders">Highlight / Error</h2>
<div class="ui-widget"> <div class="ui-widget">
@ -401,8 +429,11 @@ the element with your mouse, the title attribute is displayed in a little box ne
<script src="external/jquery/jquery.js"></script> <script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script> <script src="jquery-ui.js"></script>
<script> <script>
$( "#accordion" ).accordion(); $( "#accordion" ).accordion();
var availableTags = [ var availableTags = [
"ActionScript", "ActionScript",
"AppleScript", "AppleScript",
@ -431,18 +462,28 @@ $( "#autocomplete" ).autocomplete({
source: availableTags source: availableTags
}); });
$( "#button" ).button(); $( "#button" ).button();
$( "#button-icon" ).button({ $( "#button-icon" ).button({
icon: "ui-icon-gear", icon: "ui-icon-gear",
showLabel: false showLabel: false
}); });
$( "#radioset" ).buttonset(); $( "#radioset" ).buttonset();
$( "#controlgroup" ).controlgroup(); $( "#controlgroup" ).controlgroup();
$( "#tabs" ).tabs(); $( "#tabs" ).tabs();
$( "#dialog" ).dialog({ $( "#dialog" ).dialog({
autoOpen: false, autoOpen: false,
width: 400, width: 400,
@ -468,27 +509,42 @@ $( "#dialog-link" ).click(function( event ) {
event.preventDefault(); event.preventDefault();
}); });
$( "#datepicker" ).datepicker({ $( "#datepicker" ).datepicker({
inline: true inline: true
}); });
$( "#slider" ).slider({ $( "#slider" ).slider({
range: true, range: true,
values: [ 17, 67 ] values: [ 17, 67 ]
}); });
$( "#progressbar" ).progressbar({ $( "#progressbar" ).progressbar({
value: 20 value: 20
}); });
$( "#spinner" ).spinner(); $( "#spinner" ).spinner();
$( "#menu" ).menu(); $( "#menu" ).menu();
$( "#tooltip" ).tooltip(); $( "#tooltip" ).tooltip();
$( "#selectmenu" ).selectmenu(); $( "#selectmenu" ).selectmenu();
// Hover states on the static widgets // Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover( $( "#dialog-link, #icons li" ).hover(
function() { function() {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,7 +1,13 @@
.ui-draggable-handle { /*!
-ms-touch-action: none; * jQuery UI CSS Framework 1.12.1
touch-action: none; * http://jqueryui.com
} *
* Copyright jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*
* http://api.jqueryui.com/category/theming/
*/
/* Layout helpers /* Layout helpers
----------------------------------*/ ----------------------------------*/
.ui-helper-hidden { .ui-helper-hidden {
@ -88,89 +94,6 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.ui-resizable {
position: relative;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
display: block;
-ms-touch-action: none;
touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
display: none;
}
.ui-resizable-n {
cursor: n-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0;
}
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0;
}
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0;
height: 100%;
}
.ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0;
height: 100%;
}
.ui-resizable-se {
cursor: se-resize;
width: 12px;
height: 12px;
right: 1px;
bottom: 1px;
}
.ui-resizable-sw {
cursor: sw-resize;
width: 9px;
height: 9px;
left: -5px;
bottom: -5px;
}
.ui-resizable-nw {
cursor: nw-resize;
width: 9px;
height: 9px;
left: -5px;
top: -5px;
}
.ui-resizable-ne {
cursor: ne-resize;
width: 9px;
height: 9px;
right: -5px;
top: -5px;
}
.ui-selectable {
-ms-touch-action: none;
touch-action: none;
}
.ui-selectable-helper {
position: absolute;
z-index: 100;
border: 1px dotted black;
}
.ui-sortable-handle {
-ms-touch-action: none;
touch-action: none;
}
.ui-accordion .ui-accordion-header { .ui-accordion .ui-accordion-header {
display: block; display: block;
cursor: pointer; cursor: pointer;
@ -659,6 +582,80 @@ button.ui-button::-moz-focus-inner {
.ui-draggable .ui-dialog-titlebar { .ui-draggable .ui-dialog-titlebar {
cursor: move; cursor: move;
} }
.ui-draggable-handle {
-ms-touch-action: none;
touch-action: none;
}
.ui-resizable {
position: relative;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
display: block;
-ms-touch-action: none;
touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
display: none;
}
.ui-resizable-n {
cursor: n-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0;
}
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0;
}
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0;
height: 100%;
}
.ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0;
height: 100%;
}
.ui-resizable-se {
cursor: se-resize;
width: 12px;
height: 12px;
right: 1px;
bottom: 1px;
}
.ui-resizable-sw {
cursor: sw-resize;
width: 9px;
height: 9px;
left: -5px;
bottom: -5px;
}
.ui-resizable-nw {
cursor: nw-resize;
width: 9px;
height: 9px;
left: -5px;
top: -5px;
}
.ui-resizable-ne {
cursor: ne-resize;
width: 9px;
height: 9px;
right: -5px;
top: -5px;
}
.ui-progressbar { .ui-progressbar {
height: 2em; height: 2em;
text-align: left; text-align: left;
@ -677,6 +674,15 @@ button.ui-button::-moz-focus-inner {
.ui-progressbar-indeterminate .ui-progressbar-value { .ui-progressbar-indeterminate .ui-progressbar-value {
background-image: none; background-image: none;
} }
.ui-selectable {
-ms-touch-action: none;
touch-action: none;
}
.ui-selectable-helper {
position: absolute;
z-index: 100;
border: 1px dotted black;
}
.ui-selectmenu-menu { .ui-selectmenu-menu {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -782,6 +788,10 @@ button.ui-button::-moz-focus-inner {
.ui-slider-vertical .ui-slider-range-max { .ui-slider-vertical .ui-slider-range-max {
top: 0; top: 0;
} }
.ui-sortable-handle {
-ms-touch-action: none;
touch-action: none;
}
.ui-spinner { .ui-spinner {
position: relative; position: relative;
display: inline-block; display: inline-block;

File diff suppressed because one or more lines are too long