javascript - 如何在缩放中显示 gridview 行

Question

在 asp.net vs05 上工作。我想在 gridview 上设置鼠标事件

然后根据事件类型，如果事件是 mouseover，则缩放行；如果事件是 mouseout，则将行的缩放更改回事件发生前的原始状态。

如果(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>

上面的代码不是这样的，随便我。我要放大缩小？

Answer 1

虽然从长远来看，您最好使用 JavaScript 库来处理这个问题，但为了让事情变得简单，我将只解释如何实现您正在寻找的缩放效果。

您的标记和 .NET 代码是正确的。您需要调整您的 JavaScript 并添加一些 CSS 来满足您的需求。

在最基本的层面上，你想要做的是:

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

像您在问题中所做的那样更改高度和宽度只会更改单元格的尺寸，而不会更改内容。实现缩放效果的最简单方法是增加字体大小。

完成此操作后，您需要考虑将字体变大将如何影响表格的流动。随着字体变大，每个单元格的高度和宽度都会增加。这会使布局跳来跳去，处理起来很烦人。

• 要解决高度 偏移，请更改表格单元格中的行高。这将确保当您将鼠标悬停在行上时行不会上下移动。
• 要处理宽度的变化，单元格(或者更好的是，表格本身)的宽度应该设置得足够大，表格本身不会随着行需要更多空间来容纳更大的文本，它不会增长。

这就是您解决这些问题的方式:

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

---

正如我在文章开头提到的，您最好使用像 jQuery 这样的 JavaScript 框架。 , Dojo , YUI , MooTools或 Prototype .这将允许您将 JavaScript 代码与您的标记(以及您的 ASP.NET 代码逻辑)完全分开，使其更易于使用。它还允许您避免 JavaScript 事件中跨浏览器怪癖的危险，我假设这就是您首先使用 HTML 属性触发 JavaScript 事件的原因，因为它比完全从头开始做要容易得多没有框架的 JavaScript。