0

Web サイトで新しい Jquery UI Spinner ウィジェットを使用したいと考えています。私の問題は、Web サイトが既に jquery UI 1.8.10 を使用していて、1.9 に更新しようとしたときに、V 1.8 に依存している他のプラグインが原因で多くのエラーが発生したことです。

jquery ui 1.8をすでにロードしたページにスピナーウィジェットをロードすることは可能ですか? jquery ui 1.9をタンデムでロードして、スピナーウィジェットをロードすることはできますか? スピナー ウィジェットを 1.8 で動作するように変更することは可能ですか? どんな助けでも大歓迎です。

これは、私が使用したいスピナーの簡単なフィドルです（時間と分を選択し、30分ずつステップします）- http://jsfiddle.net/fDpE9/5/

4

1 に答える 1

0

jQuery UI を使用せずに独自のウィジェットを作成する JavaScript 関数を作成することにしました。入力を Jquery UI スピナーと同じ HTML に置き換える create 関数を追加し、独自のスピン関数をボタン クリックにアタッチしました。ボタンにマウスダウンイベントを追加する必要がありますが、アイデアは得られます。

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">▲&lt;/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">▼&lt;/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);
}
于 2012-10-12T12:06:32.413 に答える