0

KendoUI由2013.2.716升級到2013.3.1119後，出現kendoWindow指定位置無效的狀況。問題程式碼為$("#w").kendoWindow({ position: { top: 6, left: 6 } })，跟官方文件範例相同，原本運作良好，元件升級後失效。推測與元件版本有關，先使用JS偵錯工具找出kendoWindow的position相關邏輯，再比較新舊版kendo.web.js，發現以下差異:

KendoUI 2013.3.1119新加入的position.left = position.left.toString()的寫法看來很可疑，傳入的數字在新版時會先被轉成字串，才當成jQuery .css()的參數值，莫非.css("top", …) 傳入數字或字串的結果? 做個實驗吧!

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CSS value type test</title>
</head>
<body>
  <div id='x' style='position: absolute'></div>
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <script>
    var $x = $("#x");
    $x.css("top", "10"); //set string type value
    alert($x.css("top"));
    $x.css("top",  10); //set number type value
    alert($x.css("top"));
  </script>
</body>
</html>

果不其然，以上測試會先跳出"auto"，再跳出"10px"，意味著傳入字串"10"無效，傳入數字10才有作用。換句話說，當傳入數字，jQuery會加上"px"，才被視為有效的top值，在jQuery函數中可以找到以下邏輯證實這點:

// If a number was passed in, add 'px' to the (except for certain CSS properties)
if ( type === "number" && !jQuery.cssNumber[ origName ] ) {
    value += "px";
}

至此可推論是新版KendoUI加入的toString()闖禍。既知原因就好辦，kendoWindow宣告時以top: "6px"取代top: 6就能解決問題。無法理解加入.toString()的理由，但此一改版會導致API文件的範例失效，故可認定為Bug，就一併回報給原廠囉!


Comments

Be the first to post a comment

Post a comment