2012-10-12 63 views
0

我想在網站上使用新的Jquery UI微調控件。我的問題是,該網站已經使用jQuery UI 1.8.10,當我嘗試更新到1.9時,由於依賴於V 1.8的其他插件,我得到了很多錯誤。Jquery UI微調 - UI V1.8.10

是否有可能在已加載jquery ui 1.8的頁面上加載微調控件?是否可以加載jquery ui 1.9,然後加載微調控件?是否有可能修改微縮部件以使用1.8?任何幫助將不勝感激。

這裏我想用(由半小時選擇小時和分鐘和步驟)微調的快速小提琴 - http://jsfiddle.net/fDpE9/5/

回答

0

我決定做一個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); 
}