确认框的确认按钮改名
本教程将教您如何创建一个带有按钮的响应式网页,该按钮根据用户的交互而呈现不同的状态。 这种类型的交互在诸如“购买”或“删除”之类的链接上特别有用,在这种链接中,明智的做法是确认用户确实希望执行特定的操作。
这种互动是许多人熟悉的。 购买应用时,您会在Apple的应用商店中看到类似的效果。
为法国人道歉,您就明白了。
我们在本教程中创建的页面也将在移动设备上工作,因为它是响应式设计。
介绍
我们将基于Tuts +网络创建示例页面,该页面将包含确认反馈按钮。 尽管该示例使用“立即加入”确认按钮,但是可以想象,在需要用户确认他们将要执行的操作的任何地方,都可以使用这种交互方式。
何时以及为什么选择这种互动
良好的用户界面设计可为用户带来可理解的力量感,从而始终如一地帮助他们感受到控制感。
人机交互的一个重要方面是向用户传达一种控制感。 当用户控制时,他们会感到舒适。 当他们无法控制时,他们会感到沮丧。 但是,当您考虑它时,人类始终处于控制之中。 未经您首先指示,计算机永远不会做任何事情。
在这里,优质软件和UI设计的重要性开始显现。 良好的用户界面设计可为用户带来可理解的力量感,从而始终如一地帮助他们感受到控制感。 他们永远不会问“等等为什么会这样?” 或“等等我怎么到这里来的?”
您可以通过在每次交互时向用户传达见解,从而向用户传达一种控制感。 帮助他们了解系统中的因果关系。 以一个基本示例为例,如果您保存了一些内容,系统将向您显示一条肯定消息,提示“您的设置已保存”。 因此,用户将永远不会质疑“我想知道是否已保存?”。
这与本教程有什么关系?
我们将在本教程中创建的交互有助于使用户有控制感。 通过更改按钮状态并让用户确认购买决定,我们可以确保用户绝不会无意间做任何事情。 当您要求用户分摊其辛苦赚来的钱时,这特别有用。 任何人想要的最后一件事就是不小心花钱!
这种交互的好处在于,与其收到弹出提示“您确定要购买吗?”,而是通过按钮状态更改通知用户他们将要执行重要的操作。 如果他们不想这样做,则可以继续浏览该网站; 而警告提示将明确要求用户做出是/否决定。
在你开始前
确保您掌握了本教程的图像文件依赖性。 将它们放在名为“ images”的文件夹中。 您的所有其他文件(HTML,CSS,JavaScript)将位于主目录中。 在本教程的最后,您的文件结构将如下所示:
步骤1: HTML入门
让我们开始创建一些定义页面结构的基本HTML。
<!DOCTYPE html>
<html>
<head>
<title>Confirmation Feedback Button Styles</title>
</head>
<body>
<section id="container">
</section>
</body>
</html>
因此,这里我们有基本HTML5页面结构。 我们包含了DOCTYPE,页面标题和ID为#container
的主要<section>
元素。
步骤2:连结至相依关系
现在,让我们添加指向标记依赖项的链接。
首先,我们将添加一个链接到我们CSS样式表(我们将很快创建)。 这在<head>
元素中。
<link href="styles.css" rel="stylesheet" />
接下来,我们将包含一个指向Google的jQuery托管版本的链接,以及一个指向“ script.js”的链接,该链接将保存我们稍后创建的javascript代码。 让我们将它们放在结束</body>
标记之前。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
因为我们将使用<header>
和<section>
类HTML5元素,所以我们需要添加HTML5 shiv,以便我们的标记可在IE8中使用。 将此包含在标题中:
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
第三步:灵活设计
我们将此页面设计为响应灵敏的,并灵活适用于移动设备。 为了确保移动浏览器正确呈现我们的页面,我们必须设置meta viewport属性。 要了解更多有关此内容的信息,请查看Ian Yates关于视口meta标签的文章 。 否则,只需在<head>
元素中添加此代码段即可。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
步骤4:创建标题标记
首先,向我们的文档添加页面标题。
<header>
<h1><img src="images/tuts-plus.png" /></h1>
<p>The best way to learn creative and technical skills like design, development, and more!</p>
</header>
我们的标头(大小不同)非常基本,如下所示:
步骤5:创建列表标记
现在,我们将在<header>
元素下创建一个无序列表。 我们将使用它来包装我们列出的项目。
无序列表
<ul class="list">
</ul>
如您所见,我们为无序列表提供了一个“列表”类,我们将使用它来使用CSS定位其样式。
列表项结构:
<li>
<figure class="icon">
<!-- icon here -->
</figure>
<div class="info">
<!-- info here -->
</div>
</li>
如您所见,在每个<li>
内部,我们有两个主要元素; <div>
和<figure>
。 Figure元素非常适合容纳列表项的图标。 具有“ info”类的div是我们放置与图标关联的信息的位置。 同样,这些都包含在<li>
元素内。
图标
在<figure class="icon">
内部,我们将使用<img />
标记放置项目的图标。 图形元素的宽度将受到控制。 然后,通过声明图像的最大宽度应等于图形,它将根据父元素调整大小!
<figure class="icon">
<img src="images/active-tuts.png"/>
</figure>
该信息
在<div class="info">
内部,我们将包含三个元素:
- 项目的标题(使用
<h2>
元素) - 动作按钮(使用
<a>
元素) - 项目的描述(使用
<p>
元素)
稍后,我们将为按钮( <a>
元素)提供一个“ join”类,以用于CSS样式。
<div class="info">
<h2>Activetuts+</h2>
<a href="http://tutsplus.com" class="join">$15.99</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
每个<li>
元素的最终代码
<li>
<figure class="icon">
<img src="images/active-tuts.png"/>
</figure>
<div class="info">
<h2>Activetuts+</h2>
<a href="http://active.tutsplus.com/" class="join">$15.99</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
到目前为止,这里是:
步骤6:复制和修改每个<li>
元素
现在我们有了每个<li>
元素的基本结构,我们要做的就是为每个Tuts +条目复制它。 我们必须为每个列表项更改以下内容:
-
<h2>
文本 -
<a href>
链接 -
<img src />
文件名
您可以继续复制并粘贴每个Tuts +网站的列表项代码。
这就是我们现在所拥有的:
步骤7:基本CSS
现在我们已经完成了所有标记,让我们开始设计页面样式。 我们将从设置一些基本的重置开始:
/* quick reset */
body, h1, h2, p, ul, li {
margin:0;
padding:0;
}
ul {list-style-type:none;}
现在让我们设置body
元素的样式。
body {
background: #eee;
font: 16px/1.4em Helvetica, Arial, sans-serif;
color:#333;
}
在这里,我们设置背景颜色和一些排版默认值,例如字体大小,颜色和行高。
第7步:React灵敏(液体)
我们希望页面在从移动到移动的整个过程中都具有灵活性。 因此,我们将使用的两个关键组成部分是百分比和max-width
规则。
通过查看我们HTML,您将看到<section id="container">
是页面内容的主要容器。 我们将使用百分比值作为宽度,并添加一些基本样式以将其与页面背景视觉上分开。
#container {
width:100%;
margin:0 auto 40px;
max-width:600px;
background:#fff;
border-radius:0 0 3px 3px;
border:1px solid #d0d0d0;
border-top:0;
box-shadow:0 1px 0px #fff;
}
在这里,我们将容器的宽度设置为浏览器视口的100%。 我们的边距使页面上的内容居中。 我们还添加了max-width:600px
因为我们不希望列表项大于该值。
如您所见,在较大尺寸的情况下,我们的容器在侧面带有浅色背景的地方有一些额外的空间。 但是在较小的尺寸下,多余的空间就会消失,我们的内容只有白色背景。
让我们不要忘记使我们的图像具有响应性:
img {
max-width:100%;
}
步骤8:标题样式
现在,让我们为主要的<header>
元素及其内部的内容设置样式。
header {
text-align:center;
padding:30px 20px;
}
header h1 {
margin-bottom:20px;
}
header p {
color:#413c38;
font-size:1.2em;
line-height:1.4em;
}
现在,我们的标头元素及其内容已很好地居中并确定了大小。
步骤9:结构清单项目样式
现在,我们将开始设计列表项及其兄弟姐妹的样式。 首先,让我们创建一些基本的结构样式:
.icon,
.info {
box-sizing:border-box;
}
.icon {
float:left;
width:15%;
text-align:right;
padding-left:3%;
}
.info {
width: 85%;
float:left;
padding:0 5%;
}
如果您没记错的话,在每个列表项中,我们有两个主要元素:“ icon”和“ info”。 图标图将向左浮动并具有较小的宽度。 'info'div将被右移并给出父级宽度的大部分。
如您所见,我们使用box-sizing:border-box;
统治这两个div。 这使我们可以使总宽度总计达到100%,并且仍然能够添加填充而不会超过100%的总宽度(要了解有关此属性的更多信息,请阅读鼓励响应式表单元素以发挥作用 )。
步骤10:列出项目样式
在添加结构化CSS之后,我们现在看起来像这样:
如您所见,这需要一点点清理。 首先,因为我们要浮动元素'info'和'icon',所以我们需要为每个列表元素添加一个clear。 我们还将为每个列表项添加一些样式。
.list li {
padding: 20px 0;
border-top:1px solid #eee;
overflow:auto;
clear:both;
}
.list li:hover {
background:#f7f7f7;
}
最后,我们将在每个列表项中设置信息的样式:
.info h2 {
margin-bottom:10px;
font-size:1.75em;
line-height:1em;
display:inline-block;
}
.info p {
font-size:14px;
color:#777;
}
现在,我们开始有了一些坚实的东西。
步骤11:按钮样式
现在让我们对按钮应用一些样式。 我们将使它们在视觉上突出:
a {
text-decoration:none;
color:#fff;
}
.join {
background: #57a9eb; /* Old browsers */
background: -moz-linear-gradient(top, rgba(87,169,235,1) 0%, rgba(53,156,234,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(87,169,235,1)), color-stop(100%,rgba(53,156,234,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(87,169,235,1) 0%,rgba(53,156,234,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(87,169,235,1) 0%,rgba(53,156,234,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(87,169,235,1) 0%,rgba(53,156,234,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(87,169,235,1) 0%,rgba(53,156,234,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a9eb', endColorstr='#359cea',GradientType=0 ); /* IE6-9 */
border:1px solid #326fa9;
border-top-color:#3e80b1;
border-bottom-color:#1e549d;
color:#fff;
font-weight:bold;
text-transform:uppercase;
text-shadow:0 -1px 0 #1e3c5e;
font-size:11px;
border-radius:5px;
box-shadow:0 1px 0 #bbb, 0 1px 0 #9cccf3 inset;
white-space:nowrap;
-webkit-transition:all .25s ease;
-moz-transition:all .25s ease;
transition:all .25s ease;
float:right;
display:inline-block;
padding:1px 1em 0; /* make appear center from 1px highlight */
line-height:2.25em;
}
我们在这里做了什么?
-
位置
- 我们将按钮浮动到右侧。 这将使按钮显示在主列表标题的右侧。 填充
- 我们使用line-height属性使按钮达到所需的高度。 我们还在顶部添加了1px的填充,这抵消了我们使用box-shadow属性添加的1px突出显示。 视觉造型
- 我们使用边框,框阴影等添加了一些视觉样式。我们还使用了CSS3背景渐变功能(您可以使用有用的生成器工具,例如ColorZilla生成渐变)。
步骤11:备用按钮样式
一切看起来都很好。 我们现在要做的是为单击按钮后将应用于按钮的类添加样式。 对于本教程,我们将在单击按钮时将文本“立即加入”添加到现有按钮文本中。 本质上,用户必须做出两次“加入”的决定。
为此,我们将使用一些CSS样式,包括CSS3伪类::after
点击类样式
让我们创建一个名为“ clicked”的类,可以在其中添加“ clicked”按钮样式(出于开发目的,您可以将“ clicked”类手动添加到任何<a href="" class="button">$15.99</a>
)。
.join.clicked {
background: #24a501; /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,183,0,1) 0%, rgba(36,165,1,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,183,0,1)), color-stop(100%,rgba(36,165,1,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,183,0,1) 0%,rgba(36,165,1,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,183,0,1) 0%,rgba(36,165,1,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,183,0,1) 0%,rgba(36,165,1,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(30,183,0,1) 0%,rgba(36,165,1,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1eb700', endColorstr='#24a501',GradientType=0 ); /* IE6-9 */
border:1px solid #1e8701;
border-bottom-color:#176701;
border-top-color:#24a501;
box-shadow:0 1px 0 #bbb, 0 1px 0 #acc63d inset;
padding:1px 2em 0;
cursor:pointer;
}
.join.clicked:active {
box-shadow:0 0 8px #777 inset;
}
如您所见,我们将'clicked'类附加到'button'类。 这样,我们为“ clicked”声明的样式将仅出现在也具有按钮类的元素上。 就样式而言,我们只需更改其颜色和边框即可。 您可能还注意到,单击按钮时,我们在按钮上添加了阴影框。 这将添加一个缩进的按钮样式,有助于向用户增强该按钮被单击的效果。
::after
课后样式
当用户单击“价格”按钮时,我们要做的是使按钮展开并在文本前添加“立即加入”。 为此,我们将使用CSS3伪类::after
插入所需的文本。
.join.clicked::before {
content:'Join Now ';
}
现在我们有了这样的东西:
步骤12:媒体查询
如您所见,在移动设备尺寸下,“立即加入”按钮开始变得局促起来。 如果标题文本确实很长,则按钮将插入标题。 因此,当我们使用较小的屏幕尺寸时,我们将利用媒体查询的功能将操作按钮提高到一个新的水平。
让我们创建一个媒体查询来移动按钮:
@media screen and (max-width:450px) {
.info h2 {
display:block;
}
.join {
float:none;
margin-bottom:20px;
}
}
现在,在较小的屏幕尺寸下,我们的按钮将向下突出到标题下方!
第13步:与jQuery进行按钮交互
现在,让我们进入“ script.js”文件,并编写一些可在单击按钮时更改按钮样式的javascript。
首先,让我们为jQuery设置脚本
$(document).ready(function(){
//code here
});
步骤14:切换课程
我们的脚本实际上非常简单。 我们需要做的就是每当单击按钮时切换“ clicked”类。
因此,让我们设置一个函数:
$('.join').on('click', function() {
// code here
});
现在,我们要做的就是检查并查看所单击的按钮是否已经具有“ clicked”类(也许它是在之前被单击的)。 如果它没有'clicked'类,我们将添加它并防止遵循链接的href
属性。
// if it doesn't have a class of clicked,
// add one and prevent the link from being followed
if ( !( $(this).hasClass('clicked') ) ) {
// Remove any 'clicked' classes if there are any
$('.clicked').removeClass('clicked');
// Add 'clicked' class to the button that was clicked
$(this).addClass('clicked');
//prevent the link from being followed
return false;
}
如果单击的按钮已经具有“ clicked”类,则浏览器将跟随href
值。 这样效果很好,因为如果用户访问此页面并禁用了javascript,则他们将无法确认其“立即加入”的决定。 相反,将仅跟随该链接,而无需任何确认反馈。
步骤15:删除单击的类
如果用户单击“价格”按钮,他们将获得更改的按钮状态。 如果他们想关闭按钮并单击按钮本身之外怎么办? 我们将注册该click并删除“ clicked”类。 这是一条简单的jQuery行:
// if click happens outside .buy button, remove it's class
$('body').on('click', function() {
$('.clicked').removeClass('clicked');
});
步骤16:添加过渡
我们希望通过使“单击”状态与正常按钮状态之间的过渡更平滑来增加一些交互性。 我们将仅使用CSS3过渡并将其应用于“ join”按钮类:
-webkit-transition:all .25s ease;
-moz-transition:all .25s ease;
-ms-transition:all .25s ease;
-o-transition:all .25s ease;
transition:all .25s ease;
而已!
您现在有了一个不错的确认反馈按钮。 它将帮助用户确认他们的选择,以便对您的网页/应用程序做出重要决定。 随意尝试这个概念,使其变得更好并了解更多!
确认框的确认按钮改名