被遗遗忘的button标签
发布时间：2020-03-15 04:59:05 所属栏目：编程 来源：站长网
导读：注：这篇文章已经有人翻译过从头熟悉button 标签，可是感受个中有许多处所值得推敲，不太好领略。因此本人团结小我私人进修领会从头翻译而成此文。 英文原文： 对付每个措施计划者来说，为用户提供一个气魄威风凛凛同一的界面是一项稳固的要求。可是在网页上实现这种风
|
注：这篇文章已经有人翻译过从头熟悉button 标签，可是感受个中有许多处所值得推敲，不太好领略。因此本人团结小我私人进修领会从头翻译而成此文。 英文原文： 对付每个措施计划者来说，为用户提供一个气魄威风凛凛同一的界面是一项稳固的要求。可是在网页上实现这种气魄威风凛凛同一却显得分外坚苦，由于差异操纵体系、差异赏识器对网页内容的示意方法存在着差别，并且这种差别险些毫无纪律性。在处理赏罚表单位素进程中这个题目显得分外突出，个中，让许多人一筹莫展的就是“Submit”按钮示意尺度同一化的题目。 好比说，属性为type="submit"的input标签在差异的赏识器中要么显得很是丑恶（在Firefox中），要么就是存在这样那样的缺陷（在Internet Explorer），乃至示意得异常古板（在Safari中）。应对这个题目的办理步伐凡是是通过配置input的属性为image然后本身下手计一律个按钮图片出来。但我们却因此而不得不在每次必要行使按钮时增进大量特殊烦人的事变。因此，我们必要一个更好的办理步伐，一个对计划者来说更具机动性、更故意义的要领。荣幸的是，这种要领现实中已经存在，必要的是我们再做一点点事变。伴侣们，此刻请应承向各人先容我们这位可爱的小盆友<button>同窗！ Input VS Button 下面是你正在行使的提交按钮标签： <input type="submit" value="Submit" /> 他们在差异的赏识器中的示意样式别离如下： 而我们行使<button>建设如上按钮期间码： <button type="submit">Submit</button> 他们示意样式如下： 这些按钮和我们上面建设的按钮在运行和示意举动中没有任何区别。除了用他们来提交表单为，你还可以配置他们为不行用，添加速捷键可能设定一个tabindex等。还好，除了示意样式差异外，Safari都支持这些成果（和input的按钮对比，Safari中button按钮穷乏外貌的液态结果）。<button>标签最酷的成果就是我们可以在其内部安排一些有效的HTML元素，好比可以行使下面的代码插手图片： <button type="submit"><img src=http://www.jb51.net/web/"" alt=http://www.jb51.net/web/"" /> Submit</button> 他们在赏识器的外面如下： 还不错哦。现实上，按照W3C的界说，<button>元素就是为了办理这些示意上的差别才应运而生的。 Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to “image”, but the BUTTON element type allows content. The Button Element - W3C 因此我们要为此探求一个计划方案，亏得拥有海量资料的互联网可觉得我们提供一些有效的辅佐来办理这个题目。这简直很利便，可是不幸的是很计划者和网站开拓者乃至都不知道这个元素的存在。在我抉择用button元素替代掉Wufoo（本文作者的一款收集产物，dudo注）前，我得必定这个标签和CSS能满意以下的需求： 需求前提： 1、他们必需具有按钮的外面 2、在差异赏识器中有沟通的示意样式 3、button中所应用的样式同样可以在超等链接上行使（由于Wufoo中的交互老是行使表单提交的方法和链打仗发Ajax的方法中的某一个实现的，他们也许常常会紧挨在一路，因此我必要他们具有沟通的示意样式） 4、在差异的环境下标签可以或许示意机动，易于修改 5、对付信息转达进程中产生的变乱可以或许用图标和颜色有用地域分 面临上面的题目，我起首写出一些CSS来，然后再办理跨赏识器的题目。接下来我们就会看到： 最终功效 这并没有什么大惊小怪的，他很简朴，可是却很是的有用。我之以是喜好用这种方法和处理赏罚按钮是由于我不必为建设10000个图标而去启动Photoshop逐一建设。假如我们细心调查一下代码，你就会发明后头两个按钮着实是两个链接。 <div class="buttons"> <button type="submit" class="positive"> <img src=http://www.jb51.net/web/"/images/icons/tick.png" alt=http://www.jb51.net/web/""/> Save </button> <a href=http://www.jb51.net/web/"/password/reset/"> <img src=http://www.jb51.net/web/"/images/icons/textfield_key.png" alt=http://www.jb51.net/web/""/> Change Password </a> <a href="#" class="negative"> <img src=http://www.jb51.net/web/"/images/icons/cross.png" alt=http://www.jb51.net/web/""/> Cancel </a> </div> 这样做的目标是由于在网页应用措施中许多举措都是变乱（REST）驱动的，因此通过一个特定的URL发送用户哀求可以把这些举措初始化。行使在两种元素上都可以应用的样式，使我们在维持Ajax和尺度提交按钮引起的交互时的样式同一本领越发机动。 此刻你也许会问，为什么我要把图像元素的alt属性留成空缺呢？alt是img元素的须要属性，它用于表明图像的内容，而这里却没有图像的相干声名，这简直有点费解。不外，与“穷乏”属性差异，属性值“为空”是完全切合尺度的，他汇报赏识器这些图像代表了一些完全可以忽略的信息，这也使赏识者不消由于提醒信息的遮挡而找不到下一个按钮。因为此处的图标完满是多余的，因此我们甘愿不去浪用度户的时刻去查察这个完满是为了实现界面气魄威风凛凛同一而行使的图标。 CSS样式表 用于节制这些按钮样式的CSS大部门内容都很直观，差异赏识器中的稍许不同，就会导致我们下面的代码中要别离为他们应用差异的padding值，还好，这统统都是完全可以实现的。 /* BUTTONS */ .buttons a, .buttons button{ display:block; float:left; margin:0 7px 0 0; background-color:#f5f5f5; border:1px solid #dedede; border-top:1px solid #eee; border-left:1px solid #eee; font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; font-size:100%; line-height:130%; text-decoration:none; font-weight:bold; color:#565656; cursor:pointer; padding:5px 10px 6px 7px; /* Links */ } .buttons button{ width:auto; overflow:visible; padding:4px 10px 3px 7px; /* IE6 */ } .buttons button[type]{ padding:5px 10px 5px 7px; /* Firefox */ line-height:17px; /* Safari */ } *:first-child html button[type]{ padding:4px 10px 3px 7px; /* IE7 */ } .buttons button img, .buttons a img{ margin:0 3px -3px 0 !important; padding:0; border:none; width:16px; height:16px; } 尚有一个题目就是，Internet Explorer在泛起长按钮时存在一些bug。有关这方面的信息你可以在Jehiah.cz上找到，不外在上面的CSS代码中我们通过声明width和overflow的值会在必然水平上停止题目的呈现。 为按钮添加一点色彩 在Wufoo中，我们为中性举措（这里，作者把change password一类的举措叫作中性举措，把“确定”、“提交”一类的举措叫作正向举措，而把“放弃”、“打消”一类的举措叫作负向举措）的hover值设为蓝色，而把正向举措和负向动道别离设为绿色和赤色。下面的样式代码中就是我们用差异的颜色区分“添加”、“生涯”一类的正向举措和“打消”、“删除”一类的负向举措的。感受还不错，虽然你也可以选择你喜好的他颜色来行使。 /* STANDARD */ button:hover, .buttons a:hover{ background-color:#dff4ff; border:1px solid #c2e1ef; color:#336699; } .buttons a:active{ background-color:#6299c5; border:1px solid #6299c5; color:#fff; } /* POSITIVE */ button.positive, .buttons a.positive{ color:#529214; } .buttons a.positive:hover, button.positive:hover{ background-color:#E6EFC2; border:1px solid #C6D880; color:#529214; } .buttons a.positive:active{ background-color:#529214; border:1px solid #529214; color:#fff; } /* NEGATIVE */ .buttons a.negative, button.negative{ color:#d12f19; } .buttons a.negative:hover, button.negative:hover{ background:#fbe3e4; border:1px solid #fbc2c4; color:#d12f19; } .buttons a.negative:active{ background-color:#d12f19; border:1px solid #d12f19; color:#fff; } 总结 最后要说的是，这仅仅是我们应对Wufoo中需求而计划的办理方案，不外在我们的全力下它示意还不错。可是这并不是独一要领，你可以找到更多风趣的步伐把按钮酿成圆角乃至越发富厚多彩。因为<button>标签之间险些可以安排恣意其他元素，因此你还可以通过插入<span>标签然后凭证Alex Griffioen最新提供的要领来建设一个真正悦目标圆角立体按钮。说真话，我但愿对付全部为措施的界面一再行使而全力的计划者来嗣魅这仅仅是一个开始。不管怎么说，我但愿你可以或许在打开Photoshop建造input按钮前多思索一下，多看一眼这个险些被忘记的<button>标签，大概他会给你惊喜。 附录： HTML4.0/xhmtl1.0中的<button>元素 界说和用法 界说一个按钮。在 button 元素内部，您可以安排内容，好比文本或图像。这是该元素与行使 input 元素建设的按钮之间的差异之处。 <button> 控件 与 <input type="button"> 对比，提供了更为强盛的成果和更富厚的内容。<button> 与 </button> 标签之间的全部内容都是按钮的内容，个中包罗任何可接管的正文内容，好比文本或多媒体内容。譬喻，我们可以在按钮中包罗一个图像和相干的文本，用它们在按钮中建设一个吸引人的标志图像。 独一榨取行使的元素是图像映射，由于它对鼠标和键盘敏感的举措会滋扰表单按钮的举动。 可选择的属性 属性值描写DTD disabled disabled 禁用此按钮。 STF namebutton_name 划定此按钮的独一名称。 STF type* button * reset界说按钮的范例。 STF * submit value some_value 划定按钮的初始值。此值可被剧本修改。 STF 尺度属性： id, class, title, style, dir, lang, xml:lang, accesskey, tabindex 变乱属性： onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
