我决定制作一个 JavaScript 函数来创建我自己的不带 jQuery UI 的小部件。我添加了一个创建函数来用与 Jquery UI 微调器相同的 HTML 替换输入,并将我自己的微调函数附加到按钮单击中。仍然需要在按钮上添加按住鼠标事件,但你明白了。
function createHourMinSpinner(elementSelector) {
$(elementSelector).replaceWith('<span class="ui-spinner ui-state-default ui-widget ui-widget-content ui-corner-all"><input id="' + $(elementSelector).attr('id') + '" class="ui-spinner-input" value="' + $(elementSelector).val() + '" name="' + $(elementSelector).attr('name') + '" style="width:' + $(elementSelector).width() + 'px;" aria-valuenow="0" autocomplete="off" role="spinbutton"><a onclick="spinHourMin(\'#' + $(elementSelector).attr('id') + '\', true);" class="ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button" aria-disabled="false"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-n">▲</span></span></a><a onclick="spinHourMin(\'#' + $(elementSelector).attr('id') + '\', false);" class="ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button" aria-disabled="false"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-s">▼</span></span></a>');
}
function spinHourMin(elementSelector, goingUp) {
var originalVal = $(elementSelector).val() + "";
var originalWhole = parseInt(originalVal.split(':')[0]);
var originalFract = parseInt(originalVal.split(':')[1]);
var newValue = "0:00";
if (!goingUp && originalWhole == 0) {
newValue = "0:00";
} else if (goingUp && (originalFract == undefined || originalFract < 30 || isNaN(originalFract))) {
newValue = originalWhole + ":30";
} else if (goingUp && originalFract >= 30) {
newValue = (originalWhole + 1) + ":00";
} else if (!goingUp && (originalFract == undefined || originalFract == 0 || isNaN(originalFract))) {
newValue = (originalWhole - 1) + ":30";
} else if (!goingUp && originalFract > 30) {
newValue = originalWhole + ":30";
} else if (!goingUp && originalFract <= 30 && originalFract != 0 && originalFract != undefined) {
newValue = originalWhole + ":00";
}
$(elementSelector).val(newValue);
}