如何顯示在變焦的GridView行的asp.net vs05.i

工作要根據事件類型上的GridView設置鼠標事件如何顯示在變焦的GridView行的asp.net vs05.i

然後，如果事件是鼠標懸停它放大該行否則，如果該事件是鼠標移開它在事件發生之前將行的縮放更改回原來的位置。

如果我想做的事情（e.Row.RowType == DataControlRowType.DataRow）

{ 

    e.Row.Attributes.Add("onmouseover","MouseEvents(this, event)"); 

    e.Row.Attributes.Add("onmouseout", "MouseEvents(this, event)"); 

} 


<script type = "text/javascript"> 
function MouseEvents(objRef, evt) 
{ 

    if (evt.type == "mouseover") 
    { 
     objRef.style.height = "100%"; 
     objRef.style.width = "100%"; 
    } 
</script>

上面的代碼不會以這種方式行事。 我想放大和縮小？

來源

2009-10-31 HelloBD

儘管從長遠來看，使用JavaScript庫來處理這個問題會更好，但我只會解釋如何實現縮放效果，以便讓事情變得簡單。

您的標記和.NET代碼是正確的方式。你需要調整你的JavaScript並添加一些CSS來做你想要的。

在它的最基本的層面上，你想做的事是這樣的：

function MouseEvents(objRef, evt) { 
    if (evt.type == "mouseover") { 
     objRef.style.fontSize= "120%"; 
    } else { 
     objRef.style.fontSize= "100%"; 
    } 
}

改變高度和寬度就像你在你的問題做只會改變細胞，而不是內容的尺寸。實現縮放效果的最簡單方法是增加字體大小。

一旦你完成了這個，你需要考慮如何通過使字體變大來影響你的表的流動。隨着字體變大，每個單元格的高度將增加。這可以使佈局跳轉，變得煩人處理。

爲了解決高度變化，改變你的表格單元格的line-height。這將確保行在您懸停在上面時不會向上或向下移動。
爲應對寬度的變化，你的細胞的width（或更好，表本身）應設置足夠大，該表本身不會增長，因爲該行需要更多的空間，以適應更大文本。

這是你將如何解決這些問題：

tr {line-height: 25px} 
/* change the "200px" to be whatever your table needs */ 
table { 200px }

要進一步藉此，我們可以提高的JavaScript更加靈活......

這是一個不好的做法，在JavaScript中包含演示細節。想想如果你將來需要改變懸空行的外觀會發生什麼。如果發生這種情況，你將不得不修改代碼邏輯，隨着你的應用程序的增長，這可能會令人討厭。演示規則應該在一個地方，一箇中央樣式表。

將JavaScript替換爲CSS類更好。然後，您可以將「懸停」式樣規則放入CSS文件中。要做到這一點，你將你的JavaScript更改爲以下：

function MouseEvents(objRef, evt) { 
    if (evt.type == "mouseover") { 
     objRef.className = "hover"; 
    } else { 
     objRef.className = ""; 
    } 
}

一旦你做到了這一點，現在你可以將你的「縮放」風格融於CSS如下所示：

.hover{font-size: 120%}

中的JavaScript只是添加或刪除這個CSS類。沒有這個類的任何東西都會有默認的100％字體大小，然後當這個類被添加時，它會變得更大。在CSS中保存東西也允許你添加其他的東西，比如改變行的背景顏色，字體重量，文本顏色等，所以最好這樣做。

在這個答案的代碼的現場演示可以在這裏找到：http://jsbin.com/ideve

正如我在文章的開頭提到的，雖然，你會更好使用JavaScript框架喜歡jQuery， Dojo,YUI,MooTools或Prototype。這將允許您完全將JavaScript代碼與標記（以及您的ASP.NET代碼邏輯）分開，使其更容易處理。它還允許您避免JavaScript事件中跨瀏覽器怪癖的危險，我假定您爲什麼首先使用HTML屬性來觸發JavaScript事件，因爲它比從頭開始更容易完成沒有框架的JavaScript。

來源

2009-10-31 20:44:32

非常感謝 – HelloBD 2009-11-01 09:09:26

如何顯示在變焦的GridView行的asp.net vs05.i

回答

相關問題