确认框的确认按钮改名_通过确认反馈按钮控制用户

最新推荐文章于 2021-12-30 09:10:27 发布

daique1908

最新推荐文章于 2021-12-30 09:10:27 发布

阅读量1.3k

点赞数

文章标签：列表 python css java html

确认框的确认按钮改名

本教程将教您如何创建一个带有按钮的响应式网页，该按钮根据用户的交互而呈现不同的状态。这种类型的交互在诸如“购买”或“删除”之类的链接上特别有用，在这种链接中，明智的做法是确认用户确实希望执行特定的操作。

这种互动是许多人熟悉的。购买应用时，您会在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;

而已！

您现在有了一个不错的确认反馈按钮。它将帮助用户确认他们的选择，以便对您的网页/应用程序做出重要决定。随意尝试这个概念，使其变得更好并了解更多！

翻译自: https://webdesign.tutsplus.com/tutorials/put-users-in-control-with-confirmation-feedback-buttons--webdesign-7021

确认框的确认按钮改名

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
确认框的确认按钮改名_通过确认反馈按钮控制用户

本教程将教您如何创建一个带有按钮的响应式网页，该按钮根据用户的交互而呈现不同的状态。这种类型的交互在诸如“购买”或“删除”之类的链接上特别有用，在这种链接中，明智的做法是确认用户确实希望执行特定的操作。这种互动是许多人熟悉的。购买应用时，您会在Apple的应用商店中看到类似的效果。为法国人道歉，您就明白了。我们在本教程中创建的页面也将在移动设备上工作，因为它是响应式...
复制链接

扫一扫