塞班岛贵宾会Foundation之自定义表单和开关-Web前端之家

上一章我们学到了自定义表单和开关,今天让我们继续学习如何使用其他Foundation技术集合,如进度条、提醒框、提示工具和mega下拉功能,也看看Zurb如何应用在网站上的。我们将添加所有这些组件到上一篇教程的“联系表单”演示代码中,并且使用一个定制的jQuery,因此你会更加理解这些元素怎样才能运行在自己的工程上的,让我们开始吧!

难得今天事情不多,一口气整理了几篇关于Foundation的教程了,难得啊,再接再厉,继续搞起啊。上节主要学习了Foundation的按钮制作,现在让我们看看自定义表单和表单开关制作。在本教程中我们主要以联系表单作为一个练习,您可以添加到您的项目或者只是拿来玩玩。一旦我们创建了这样的表单,我们将来可以直接搬到项目表单中使用:

提示工具

表单,至少对于我来说,一直是比较烦人的,特别是想当他们融入到我的设计中之时。Foundation通过JavaScript定制表单插件使整个过程变得容易了许多。这是非常简单的设置,使您能够轻松地定制你的表单元素需要的CSS。

首先,我们将为“Send me
spam”单选框添加一个提示工具,如果他们选中单选框时,用来告诉用户更多关于我们将发送邮件的提示信息。

注意:为了能顺利得到自定义表单功能,你需要加载foundation.form.js。同时你要确保在表单插件上面加载zepto.js和foundation.js。

Sendmespam

插件会将每个表单元素本身隐藏,同时会生成更多的视觉可控的元素,比如像div和a这样的标签。然后它通过交互隐藏原来的元素,这意味着表单需要函数来支持。接下来让我们看看这是如何准备工作的。

在添加一个功能或者组件过程中,例如上面提示工具的代码,都会使用一个类名来声明,在上面的代码示例就使用了类名“has-tip”。

联系表单

我们可以注意到在label内包含了一个标签span,span需要添加一个Foundation定制元素属性:data-tooltip。有了这个属性才能使用这个提示工具,然后你应该还会在里面添加文本信息或者设置span的宽度。这些都是可以通过添加更多的属性来实现的,如“title”和“data-width”。如果没有设置“data-width”,那么这个提示工具将会占满父元素容器。

对于网站而言,联系表单是最常见表单之一。在这个练习中,你将看到一些标准的输入框。在你的项目中你也可以添加一个或两个对你有用的不同例子。

添加类名“has-tip”和有选择性地添加上面提到的属性可以使你更加容易地把提示工具添加任意元素中去。

现在我们先从左列开始,在这个例子中,我使用了一个下拉选择框制作称呼,紧跟着是一个输入框用来制作姓名。在行的标准标签中我们都添加了一个collapse的类名。我们接下放置了一个邮箱的字段和下“如何找到我们的”下接选择项。

添加交互功能

Mr.

在上一篇教程中,我们创建了一个简单的响应式联系表单,演示了如何使用Foundation的表单元素。现在我们继续来实现更多的元素,在表单中添加一个新层。我们将在提
交按钮中添加更多动态有趣的东西;我们将使用发送信息按钮的标准点击操作,添加一个进度条,一个提交成功的文本和当email被发送出去的时候,清除输入
框的内容。

Mrs.

当我正在展示更多Foundation的特性时,并不表示这是功能性的表单,尽管你可以添加php的脚本和使用ajax来避免把表单内容提交到哪个页面上去。对这原理不是很熟悉的朋友可以看看文章使用jQuery来提交表单而不会重刷页面。

Miss.

在提交按钮下面我们可以添加进度条,还将会使用和按钮一样的类名,这里演示使用了类名round。

Ms.

创建一个div,添加“data-alert”的属性和一些类,如“alert-box”和“success”。还可以添加关闭按钮,当用户读完成
功信息之后就可以关闭它。回头看所写的代码,可能有点混乱,但是当我们添加一些jQuery代码来创建所需要功能的时候,就会更好地理解了。

Dr.

varsubmitButton=$;//Variabletocachebuttonelement

Howdidyoufindus?

varprogressBar=$;//Variabletocacheprogressbarelement

Google

varprogressBarMeter=$(‘#progress.meter’);//Variabletocachemeterelement

Afriendtoldme

varalertBox=$;//Variabletocachemeterelement

Notsure,whereamI?

varcloseButton=$;//Variabletocacheclosebuttonelement

你需要确认你选择元素有一个id,但是除了这样之外你可以从模板中直接找到元素。所以我们先来看看表单代码的合并,你需要将它们放在第一个命名为large-6的div里。

$.click{//Initiatesthesendinteraction

接下来看第二列中的元素。它包括了文本域textarea,一个spam
me的复选框和一个切换的单选按钮,最后是一个提交按钮。

$;//Fadesoutsubmitbuttonwhenit’sclicked

Sendmespam  

setTimeout{//Delaysthenexteffect

CCme?

$.fadeIn;//Fadesintheprogressbar

No

$.animate({width:’100%’},2000);//Animatestheprogressbar

yes

setTimeout{//Delaysthenexteffect

单选按钮切换

$.fadeOut;//Fadesoutprogressbarwhenanimationcompletes

我们还没有覆盖单选按钮切换,所以现在我们来做。

setTimeout{//Delaysthenexteffect

单选按钮切换是一个强大的input效果。其结构放在一个div标签中,并且命名为switch,紧跟着是尺寸的类名。这尺寸的类名主要包括tiny,small和large。你也可以给单选按钮切换设置一个类名rounded实现圆角。这个结构包含了两个input,用于单选按钮切换的状态。它们都有自己各自的标签,Foundation用来实现切换状态的文本。这里的input需要设置id名,并且label必须设置for属性。

$;//Fadesinsuccessalert

No

我在每行都添加注释来帮助理解这些代码,这是一个简单队列式效果,创建了所需的交互。虽然这都是模拟的,却能够很简单地、适应性地添加真正的反馈和验证功能,还可以添加一个关闭提醒框来重置表单,这对将来使用是很有帮助的。

这几乎涵盖了我们一个小的联系方式,你可以只是做做玩,也可以将它用到你的下一个项目中。

备注:我们已经保存变量来引用这些元素,你可以进一步了解为什么这么做,通过阅读文章快速提示——jQuery
Newbs:停止在池中跳。

其他表单元素

重置表单

你在一个Web表单中还有什么可能需要用到呢?比如设置为未选择的radio,并表给他们设置了相同的样式display:none;。

$.click{//Initiatestheresetfunction

注意:我知道使用内联样式是多么可怕的一件事情,但建议在这种情况下,还是不要将这样式写到样式表中。

$.fadeOut;//Fadesoutsuccessmessage

这些自定义表单快速通过元素创建起来是多么美好的事情。用这种方式显示什么已经存在,或暗示什么用的用户交互是必需的。

$.css;//Resetsprogressbar

下面你可以看到我们有一个span元素,并且设置了prefix类名,其次紧跟了一个下接选择项。你仍然需要把这些元素放在一个带有prefix和postfix类名的列结构中,用来防止元素分离。你也可以充分利用postfix类名加在一个对象上,如一个搜索框。即你的文本输入框后紧跟一个按钮。

setTimeout{//Delaysthenexteffect

$(‘input,textarea’).not(‘input[type=submit]’).val;//Resetstheinputfields

.com

$.fadeIn;//Fadesbackinthesubmitbutton

.co

returnfalse;//Thisstopsthesuccessalertfrombeingremovedaswejustwanttohideit

.ca

这里我又为每行注释了,这些代码包含更多的更新,这些特性是非常灵活的,可以在自己工程任何地方使用,使用CSS来定制。

错误信息

神奇的Mega下拉功能

大多数表单至少会有一个必须的字段或者表单无法正常提交的属性。Foundation为了实现这些验证状态使用了error类。简单的将它添加到任何input,label,small标签或列中,就可以看到这些元素呈现红色的风格。

我已经在Foundation
谷歌组花费很多时间,而且很多学习者在Foundation网站上询问很多关于mega下拉功能。我觉得在这里涉及到了这些,也似乎没人真正地涉及这块知识。

需要真正验证是否有效,你需要使用jQuery
Validate插件和使用所需的参数。当用户输入信息不正确的时候就会显示这些效果。

添加标签section,在里面添加你想要的内容,然后添加一个样式属性display:none,接下来就编写jQuery代码如下:

有用的工具

varmegaDrop=$;//VariabletocachemegaDropelement

在Foundation中涉及到颜色的选择,在没有设计师的帮助下并不是件容易的事。令人高兴的是,Colourco.de为大家提供了整套的颜色文案查询。移动你的鼠标,向左或向右改变颜色的色相,向上或向下改变颜色的亮度。提供菜单让你选择不同的配色方案。

varmegaContainer=$(‘#megaContainer’);//VariabletocachemegaContainerelement

总结

$.slideToggle{

表单是每个网站的重要组成部分,Foundation在表单的基础上增加了一些不错的功能,让你的表单更加强大。如果你有足够的好奇心,为什么不看看Zurb关于表单的其他开发实验,包括他们的AjAX图像上传。下章我们继续学习“Foundation之进度条、提醒、提示工具和mega下拉”。

if.is$.html;

else$.html;

所有Mega下拉都是一个下滑开关,可以滑动式地展示或者隐藏一个容器的内容。有很多Mega下拉的实践,不管是扩展在导航栏上,还是一个隐藏的画廊,或者是一个宣传视频。

有用的工具

有很多工程项目,尤其是一些仪表板界面,需要用表格来展示数据,chartjs.org是一个很好途径来添加在你的Foundation项目中去,为什么不去尝试一下呢,通过不同方式来可视化你的数据,做成动态效果和自我定制呢?这些表格在Foundation框架下完美显示,甚至在retina显示屏上。

chartjs 用到了html5
canvas元素,在所以现代浏览器上是支持的,同时还支持IE7或8,这个插件是独立的、免费的、轻量级的和提供了很多可选的功能。

发表评论

电子邮件地址不会被公开。 必填项已用*标注