Facelift至表单;第 2部分: 按 Jay@Thakar.info 按钮

分享于 

21分钟阅读

Web开发

  繁體 雙語

介绍

这是系列的第二篇文章,描述了使美观。易于实现和易于使用的各种选项,并且易于使用。 在前一篇文章中,对表单进行了修改;第 1部分: 文本框- 通过 jay@thakar。info'因此,我们看到了各种制作漂亮文本框的选项,在本文中我们将看到另一个元素'按钮"。

背景

就像你已经知道的,web窗体中的按钮表示一些操作。 在很多情况下,web表单的设计非常糟糕,操作项( 像按钮) 根本不可见;本文将看到如何最小化/消除常见错误,并使( 是开发人员'的应用程序寿命变得更容易。 本文介绍了各种制作漂亮( 高度可见) 按钮的方法。

按钮

就像你所见,任何网站形式的目的是收集信息并将它的发送到服务器。 如果没有按钮,就很难将信息发送到服务器,因为按钮表示窗体上的动作项。 按钮可以做很多事情,使得它更有趣和帮助终端用户,而且很容易实现。 作为最终结果,用户只会点击按钮,如果它是可见的( 应用程序用户)。

在本文中,我们将使用一个带有 2个按钮'register'和'清除'的简单注册表单。

/*Code: 1. SimpleForm.htm*/<inputid="register"type="submit"value="Register"/><inputid="clear"type="reset"value="Clear"/>
简单窗体
无任何CSS的简单表单

现在让我们开始给这个表单改头换面。

CSS的魔力

一个最容易和有效的方式来改变按钮( 或者任何元素)的外观是使用 CSS。 你可以用CSS来做更漂亮的事情。 让我们看看。

/*Code: 2.CSS_Font.htm*/<style>...
...
.loginButton
{
 color: #B24F04;
 font-family:"Verdana", sans-serif;
}</style></head>...
...<inputid="register"type="submit"value="Register"class="loginbutton"/><inputid="clear"type="reset"value="Clear"class="loginButton"/>
添加了一些字体
带有字体的窗体

只要应用字体和改变颜色,这些按钮看起来比早期版本稍微好一些。 另一个令人兴奋的事情是使用网络字体

/*Code: 3.Web_Font.htm*/<styletype="text/css">@font-face
 {
 font-family: Gentium;
 src: url(http://www.princexml.com/fonts/larabie/berylibi.ttf) 
 format("truetype" );
}.loginButton
{
 color: #B24F04;
 font-family:"Gentium", serif;}</style>...
...<inputid="register"type="submit"value="Register"class="loginButton"/><inputid="clear"type="reset"value="Clear"class="loginButton"/>
。Firefox 上的网络字体
在 Mozilla Firefox 上呈现的网络字体
。IE 上的网络字体
IE 上的网络字体

如你所见,我们在服务器上使用字体,因这里不需要给定的字体在客户机上安装。 如果浏览器不支持'网络字体',则替换字体( 本例中无衬线) 将使用。 这是'冷色'要做的一件事,当你想使用一些旧字体时,你知道给定字体不能用在客户机上。 下面是不同浏览器与 上面 代码的结果。

注意:在使用这一技术时非常小心,因为这个技术很早期,浏览器支持这个技术,我可以用 IE 8和 Firefox 3.5来检查这个

现在让我们向这些按钮添加一些边框。

/*Code: 4.Border.htm*/<styletype="text/css">...
...
.loginButton
{
 color: #B24F04;
 font-family:"verdana", sans-serif;
 border: solid thin #F58F1A;}</style><divstyle="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">...
...<inputid="register"type="submit"value="Register"class="loginButton"/><inputid="clear"type="reset"value="Clear"class="loginButton"/></div>
简单边框
带边框的按钮

在这里,我们通过添加实线边框来改变按钮的外观。 你可以在这里试验不同的边界类型和不同的边来给不同的效果。 下面是使用边框的另一个示例

/*Code: 5.Border_ThickLeft.htm*/<styletype="text/css">...
...
.loginButton
{
 color: #B24F04;
 font-family:"Verdana", sans-serif;
 border: solid 1px #F58F1A;
 border-left: 5px solid #F58F1A;
 border-right: 5px solid #F58F1A;}</style><divstyle="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">...
...<inputid="register"type="submit"value="Register"class="loginButton"/><inputid="clear"type="reset"value="Clear"class="loginButton"/></div>
带粗左边框的边框

我们将borders边框添加到按钮的所有侧面,然后在按钮右边添加厚的( 5px ) 边框,在按钮右侧添加粗边框。 这给出了很好的视觉效果,看起来与常规按钮有点不同。 有几种它的他风格的边框你可以玩,如开始,双重,槽等。

基于状态的不同视觉效果

在大多数情况下,我们希望禁用按钮显示不同。 通常,有两种方法可以应用不同的视觉样式来表示禁用的按钮。

/*Code: 6.Disabled_Different.htm*/<styletype="text/css">...
...
.loginButton
{
 color: #B24F04;
 font-family:"Verdana", sans-serif;
 border: solid 1px #F58F1A;
 border-left: 5px solid #F58F1A;
 border-right: 5px solid #F58F1A;
}input[disabled]
{
 font-family:"Verdana", sans-serif;
 border: solid 1px gray;
 border-left: 5px solid gray;
 border-right: 5px solid gray ;
 color:gray;
 filter: dropshadow(color=#555555,offX=0,offY=1);
 filter:alpha(opacity=60);/* IE's opacity*/
 opacity: 0.60;
 }</style><divstyle="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">...
...<inputid="register"type="submit"value="Register"disabled="disabled"/><inputid="clear"type="reset"class="loginButton"value="Clear"/></div>
禁用的文本框
不同的禁用格式。

现在添加一些 background,这里有几种使用 background的方法;让我们从添加纯色背景开始。

/*Code: 7.Background_Solid.htm*/<style type="text/css">
...
...
.loginButton{
 color: black;font-family:"Verdana", sans-serif;border: solid 1px #F58F1A;border-left: 5px solid #F58F1A;border-right: 5px solid #F58F1A;background-color:#D4E6F7;}</style><div style="border: solidthin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...<input id="register" type="submit" class="loginButton" value="Register"/><input id="clear" type="reset" class="loginButton" value="Clear"/></div>
。作为背景的纯色
带有纯色背景的按钮。

你也可以使用图像作为 background,有两个最流行的视觉效果。

  • 渐变效果
  • 圆角

让我们看看例子。

/*Code: 8.Background_Image.htm*/<styletype="text/css">...
...
.loginButton
{
 color: black;
 font-family:"Verdana", sans-serif;
 border: solid 1px #F58F1A;
 background-image: url("gr.jpg");}</style><divstyle="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">...
...<inputid="register"type="submit"class="loginButton"value="Register"/><inputid="clear"type="reset"class="loginButton"value="Clear"/></div>
渐变背景
/*Code: 9.Background_RoundCorner.htm*/<styletype="text/css">...
...
.loginButton
{
 background: transparent url('RoundCornerBtn.png') no-repeat scroll top right; color: white;
 height: 38px;
 border: none;
 width: 130px;
 margin: 0px;
}</style><divstyle="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">...
...<inputid="register"type="submit"class="loginButton"value="Register"/><inputid="clear"type="reset"class="loginButton"value="Clear"/></div>
带圆角的按钮
带圆角的按钮

注意:因为我们用 width: 130px;,因为我们的图像是 130像素宽。 我们这里使用的文本框有透明 background 做任何你使用 ad background 文本框的图像都会显示在这个图像中。 这里样式只能用于固定宽度按钮。

圆角滑动门技术

查看 上面 按钮后,会想到一个问题;如果我想创建具有动态宽度( 例如 )的按钮。 background 图像根据按钮的文本进行调整。 在这种情况下有几种技术可用;很少使用某种脚本( 例如。 jQuery或者JavaScript等,一些使用 CSS & HTML组合。 我们将看一个涉及 HTML & CSS的。

/*Code: 10.RoundCorner_slidedoor.htm*/<styletype="text/css">...
...
button
{
 border: 0;
 text-align: center;
 padding: 0 12px 0 0;}
button.submitBtn
{
 background: url(bg_button_right.png) right no-repeat;}
button.submitBtn span
{
 height: 24px;
 line-height: 24px;
 background: url(bg_button_left.png) left no-repeat;}
button span
{
 position: relative;
 display: block;
 white-space: nowrap;
 padding: 0 0 0 12px;
}</style><divstyle="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">...
...<buttonid="register"type="submit"class="submitBtn"><span>Register</span></button><buttonid="clear"type="reset"class="submitBtn"><span>Clear</span></button><buttonvalue="submit"class="submitBtn"><span>Some very logn text</span></button></div>
Rounded corners with sliding door style.
带有滑动门样式的圆角

这里我们使用了一些东西;首先,我们使用了 button 标签,我们使用了标签,我们使用 button,因为它允许内部的span 标记。 在这里,button的CSS处理圆角的左侧,span 负责右侧的处理。 这里 position: relative;span 将确保右侧显示在左侧后。 我们在左和右侧保留了 12个 padding,这是由于左右图像的圆形曲线,我们不希望用户输入。

带 icon的按钮

向图像添加 icon 始终是一个很好的动作,因为它增加了更多的视觉一致性和更多的焦点。 让我们看各种添加图片( 图标) 到按钮的方法。

/*11.Icon_CSS.htm*/<divstyle="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">...
...<buttonid="register"type="submit"class="submitBtn"><span><imgsrc="ico_submit.gif"border="0"alt=""height="18px"style="vertical-align:middle"/> Register</span></button><buttonid="clear"type="reset"class="submitBtn"><span><imgsrc="view_refresh.png"border="0"alt=""height="18px"style="vertical-align:middle"/> Clear</span></button></div>
Button with Icon
带 icon的按钮

在 上面 代码中,我们将一个 span 添加到按钮中,并将图像添加到 span 中。 这里的输入不同,按钮标签允许我们添加内部 span,你可以添加图像。

行为

现在让我们进入按钮定制的下一阶段,它是行为。 就像这里第一节一样,我们有许多不同的定制选项,并添加不同的行为。

悬停

/*Code: 12.Hover_CSS.htm*/<styletype="text/css">...
...button.submitBtn:hover{
 background: url(bg_button_rightH.png) right no-repeat;
}button.submitBtn:hover span{
 background: url(bg_button_leftH.png) left no-repeat;
}</style><divstyle="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">...
...<buttonid="register"type="submit"class="submitBtn"><span>Register</span></button><buttonid="clear"type="reset"class="submitBtn"><span>Clear</span></button></div>
焦点突出显示

现在这是非常简单且很容易实现的;并且我们不使用JavaScript或者任何编程:。 我们使用hover伪类在按钮上添加鼠标。 使用JavaScript可以得到相同的结果。

/*Code: 13.HighlighJS_Hover.htm*/<styletype="text/css">...
...
.loginButton
{
 color: black;
 font-family:"Verdana", sans-serif;
 border: solid 1px #F58F1A;
 background-image: url("gr.jpg");
}
.loginButton_Hover
{
 font-family:"Verdana", sans-serif;
 border: solid 1px #F58F1A;
 background-image: url("grHover.jpg");
}</style><divstyle="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">...
...<inputid="register"type="submit"class="loginButton"value="Register"onmouseout="this.className='loginButton';"onmouseover="this.className='loginButton_Hover'"/><inputid="clear"type="reset"class="loginButton"value="Clear"onmouseout="this.className='loginButton';"onmouseover="this.className='loginButton_Hover'"/></div>
使用JavaScript的Highlight

我们将JavaScript事件处理程序添加到 onmouseoveronmouseout 中,在 onmouseover 中,我们将 switch 类添加到loginButton中,然后在 onmouseout 上返回。

提供有关所采取行动的反馈

根据页面负载时间和用户的结论,平均用户可以等待大约'4秒'的页面加载。 same applies用户点击鼠标按钮时,如果点击按钮,你必须记住以前的Windows 窗体,如果点击按钮光标改变,你必须记住表单的老日期。 web应用程序开发人员提供了各种不同的用户操作反馈。

显示消息

提供反馈的一种常用方法是显示消息/或者显示动作的动画图像。 在下面的示例中,我们将显示一条消息。

/*14.Feedback_Label.htm*/<scriptlanguage="javascript"type="text/javascript">function displayMessage() {
 var divMessage = document.getElementById("div_Message");
 divMessage.style.display = '';//following line is to simulate wait in real code you
//may not need to include that; 
 setTimeout("window.location='feedback_label.htm';", 2000); 
 return true;
}</script><divstyle="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">...
...<inputid="register"type="submit"class="loginButton"value="Register"onmouseout="this.className='loginButton';"onmouseover="this.className='loginButton_Hover'"onclick="return displayMessage();"/><inputid="clear"type="reset"class="loginButton"value="Clear"onmouseout="this.className='loginButton';"onmouseover="this.className='loginButton_Hover'"/><divid="div_Message"style="display: none;"> Form Submitter, Please wait.. .</div></div>
Button before clicking.Button after clicking; Displays message.
单击前按钮。单击后按钮;显示消息。

在 上面 代码中,div_Message 是不可以见的;但是在单击'register'按钮时,我们调用 divMessage 来显示单击按钮。

表单的淡入淡出效果

你可以使用的另一种视觉效果是淡入淡出整个表单并显示消息。 这是非常容易实现和非常有效,整个表单更改它的外观更有效,然后只显示消息。

/*Code: 15.Feedback_dimmer.htm*/<styletype="text/css">...
....opac
{
 opacity: 0.4;
 filter: alpha(opacity=40);
}</style><scriptlanguage="javascript"type="text/javascript">function displayMessage() {
 var divM = document.getElementById("div_Message");
 divM.style.display = '';
 var dForm = document.getElementById("div_Form");
 dForm.className ="opac";//apply dimmer effect on entire form setTimeout("window.location='15.Feedback_dimmer.htm';", 2000);
 return true;
}</script><divstyle="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9"id="div_Form">...
...<inputid="register"type="submit"class="loginButton"value="Register"onmouseout="this.className='loginButton';"onmouseover="this.className='loginButton_Hover'"onclick="return displayMessage();"/><inputid="clear"type="reset"class="loginButton"value="Clear"onmouseout="this.className='loginButton';"onmouseover="this.className='loginButton_Hover'"/></div><divid="div_Message"style="display: none;">Form Submitted, Please wait.. .</div>
Form before button clicked.
单击按钮前的窗体。
Form after button clicked.
单击按钮后的表单。

就像你在 上面 代码中看到的,我们使用 dForm.className ="opac"; 在窗体上应用淡入淡出效果。 这是非常有效的视觉效果,让用户知道表单处理是启动和用户需要等待;

防止事故( 双击)

但是在 上面 2方法中存在潜在问题;上面 方法不能阻止用户两次单击按钮;在某些情况下,我们需要阻止用户单击两次:下面的代码防止双击。

/*Code: 16.NoDBLClick.htm*/<styletype="text/css">...
...
.opac
{
 opacity: 0.4;
 filter: alpha(opacity=40);
}</style><scriptlanguage="javascript"type="text/javascript">function displayMessage() {
 var divM = document.getElementById("div_Message");
 var bRegister = document.getElementById('register');
 var dForm = document.getElementById("div_Form");
 divM.style.display = '';
 dForm.className ="opac";
 bRegister.form.submit();
 bRegister.disabled = 1; setTimeout("window.location='16.NoDBLClick.htm';", 2000);
 return true;
}</script>...
...<inputid="register"type="submit"class="loginButton"value="Register"onmouseout="this.className='loginButton';"onmouseover="this.className='loginButton_Hover'"onclick="return displayMessage();"/><inputid="clear"type="reset"class="loginButton"value="Clear"onmouseout="this.className='loginButton';"onmouseover="this.className='loginButton_Hover'"/></div><divid="div_Message"style="display: none;"> Form Submitted, Please wait.. .</div>
Disabled button after click.
单击后禁用按钮。

在上述情况下,我们首先调用 bRegister.form.submit();,它将在这里表单中执行提交方法,然后调用 bRegister.disabled = 1;,该按钮将禁止用户再次单击。

历史记录

2009年09月24日 上的初始 Submmision。

摘要

Download Source下载源文件

当你开始思考这个问题,并实现改变时,你就会轻松地改变你的生活;最终,你的应用程序不是你的决定,而是应用程序的用户。 快乐编码:)

如果你有任何问题,请随时与我联系: Jay@Thakar.info


PAR  for  form  INF  按钮  info  
相关文章