Question

我想在网站上使用新的Jquery UI Spinner小部件。我的问题是该网站已经使用了jquery UI 1.8.10，当我尝试更新到1.9时，由于其他插件依赖于V 1.8，我遇到了很多错误。

是否可以在已加载jquery ui 1.8的页面上加载微调框小部件？是否可以串联加载jquery ui 1.9，然后我可以加载微调器小部件？是否可以修改微调框小部件以使用1.8？任何帮助将不胜感激。

这是我想要使用的微调器的快速小提琴（选择小时和分钟以及步长半小时） - http://jsfiddle.net/fDpE9/5/

Answer 1

我决定使用JavaScript函数在没有jQuery UI的情况下创建自己的小部件。我添加了一个create函数来用与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);
}

Jquery UI Spinner - UI V1.8.10

1 个答案: