C# ASP.Net 花式按钮答案

【问题标题】：C# ASP.Net Fancy ButtonsC# ASP.Net 花式按钮
【发布时间】：2009-10-15 15:06:48
【问题描述】：

我正在开发一个 C# ASP.Net 项目。我想做一些与shown in the following website 非常相似的事情。

不过，这是 HTML <a> 标记的解决方案，我正在寻找 ASP.NET 按钮的解决方案。

我有什么选择？

【问题讨论】：

【解决方案1】：

<asp:LinkButton /> 是个不错的选择。它几乎与<asp:Button /> 相同，只是它创建了一个执行超链接的表单，您可以在其中放置任何您想要的图像。

我强调使用LinkButton 而不是ImageButton，因为ImageButton 使用不同的事件处理程序，这使得在它们之间来回切换变得困难。对于Linkbuttons 和Buttons，它们使用相同的事件处理程序，因此在它们之间切换相当容易。

【讨论】：

链接按钮的降级效果如何？他们在没有启用 javascript 的情况下工作吗？
一个很好的问题。自从我使用它们已经有一段时间了，但现实情况是大多数人，甚至许多公司，甚至都没有为禁用 javascript 的用户而烦恼。我们能说出一个比 Windows Mobile 5.5 更新的没有 JavaScript 功能的平台吗？
@Wyatt，任何在没有启用 javascript 的情况下上网的人，都无法再做任何事情了。我认为是时候假设启用了 javascript。
假设所有东西的 Javascript 都是错误的错误的错误的！！这完全取决于你在做什么，一个需要 Javascript 的导航的公共网站几乎没用。
假设 JS 在某些情况下可能是错误的，但对于 ASP.Net WebForms，这是一个硬性要求 - 为什么要反对它？

【解决方案2】：

它们是一样的，你可以这样做：

<asp:Button ID="SearchButton" runat="server" CssClass="addButtonStyle" OnClick="SearchButton_Click"
            Text="Go&nbsp;" Width="60px" />

some style:
.addButtonStyle {
    border: 1px solid #e1ecfc;
    background-color: #B9D1F4;
    color: #003399;
    background-image: url(partgrad.gif);
    background-repeat: repeat-x;
}

【讨论】：

很抱歉，但这似乎并不能解决我的问题。您发布的解决方案不考虑 MouseOver 动画，它需要制作一个适合按钮大小的“partgrad.gif”图像......但是，我不知道在按钮 Text 属性，因为它由客户端控制。
您可以指定按钮的宽度，而不是让它随文本缩放。
这与 Wyatt 不同，他所指的技术需要一些额外的标记并获得与单个按钮关联的多个背景图像。如果我们要分裂头发，按钮根本无法解决问题。您可以在视觉上进入球场，但如果目标是纯粹的视觉呈现，那么 ASP:Button 将达不到要求。

【解决方案3】：

试试这个例子

或在这里查看My Example Link

<!DOCTYPE html>
<html>
<head>
 <title>Hello World | Button Config</title>
</head>
<body>
<div>




 <h1>Working with Buttons</h1>
 <p>Small, large, or medium size buttons can have css properties that you can benefit from rather that using images. Please look at the examples below</p>

<textarea>
<asp:button runat="server" id="helloWorld" CssClass="button" text=" --- See examples --- " />
</textarea>


 <ol>
  <li>
   <input type="submit" class="button" value="This is a Long Button"/>
  </li>
  <li>
   <input type="submit" class="button" value="Search Now!"/>
  </li>
  <li>
   <input type="submit" class="button" value="Short"/>
  </li>
 </ol>

 <ol>
  <li>
   <input type="submit" class="button round" value="This is a Long Button"/>
  </li>
  <li>
   <input type="submit" class="button round" value="Search Now!"/>
  </li>
  <li>
   <input type="submit" class="button round" value="Short"/>
  </li>
 </ol>

 <p>
  In theory you always want the cleanest markup. So linkButtons on are NO GO! LinkButtons are Javascript based and can cause accessibility issues.
 </p>

 <h3>IE doesn't have my rounded corners?</h3>
 <p>
  Gotcha, lets do it without JS and lets use the images found from the link below. IE doesnt take advantage of some of the cooler CSS tricks we find in other browsers. - Shame on them! In the next example we simply wrap the asp:button with a span and then a b element.
 </p>

 <ol>
  <li>
  <span id="btn-wrap">
   <b>
    <input type="submit" class="rounded" value="This is a Long Button"/>
    </b>
   </span>  
  </li>
  <li>
  <span id="btn-wrap">
   <b>
    <input type="submit" class="rounded" value="Search Now!"/>
    </b>
   </span>
  </li>
  <li>
  <span id="btn-wrap">
   <b>
    <input type="submit" class="rounded" value="Short"/>
    </b>
   </span>
  </li>
 </ol>


<textarea>
<span id="btn-wrap">
<b>
 <asp:button runat="server" id="helloWorld" text=" --- See examples --- " />
</b>
</span>
</textarea>


 <h3>Wrapping it up</h3>

 <p>
  In this demo, you've seen a single background image used as a repeating object to give us a gradient effect similar to the one found here <a href="http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html">http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html</a>
 </p>


 <style>
  input[type="submit"], span, b {background:transparent none repeat scroll 0 0;border:0 none;display:inline-block;margin:0;padding:0;cursor:pointer;outline:none;} /* reset the button */
  input.button {background:url(http://gfx2.hotmail.com/cal/11.00/updatebeta/ltr/grid_navigator_bg.png) repeat-x; text-shadow:0 1px 1px #FFFFFF /* Just for looks */; padding:4px 5px;}
  input.button:active {background:#FED58F;}

  .round {-moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;}

  /* http://gfx2.hotmail.com/cal/11.00/updatebeta/ltr/grid_navigator_bg.png thank you hotmail for the image */
  span#btn-wrap {background:transparent url(http://www.oscaralexander.com/tutorials/img/bg_button_span.gif) repeat-x scroll 0 0;}
  span#btn-wrap b {background:transparent url(http://www.oscaralexander.com/tutorials/img/bg_button_a.gif) no-repeat scroll right 0;height:18px;padding:3px 10px;}
  span#btn-wrap:active {background-position: 0 -24px;}
  span#btn-wrap:active b {background-position: right -24px;}

  li {margin:5px 0;}

  textarea {background:#323232; color:white; padding:10px; width:900px; height:80px; overflow:hidden;}
 </style>
</div>
</body>
</html>

就像页面说的那样，这是最干净的 java Scriptless 方法。这是可访问且浏览器友好的。

【讨论】：