整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

用Webix十步创建一个电子邮件客户端(内附代码与截图)!

前端开发的程序员应该都知道Webix这个免费框架,本文会给出用其创建一个电子邮件客户端用户界面的步骤。Webix是一个JavaScript UI库,可用其构建一些HTML5程序,熟悉它的程序员都知道,Webix快速、轻便且易于学习,与AngularJS、Vue.js和jQuery的集成都很方便,所以我最终选择了Webix。(阅读本文大概需要5分钟,图片较多,建议在有Wifi的情况下阅读。)

Webix的工作原理

先来看看如何开始使用Webix(如果用过,请自动忽略这一部分),下载完成后,程序员应该在页面上添加所需的JavaScript和CSS文件,这些都可以在代码库文件夹中找到:

在应用程序中不需要使用webix.ready,但它有助于确保在页面完全加载后执行代码(作为theonDocumentReady事件和onlload()的替代方法)。

要在页面上添加小部件,程序员可以使用view属性,它的值定义将决定使用哪个小部件。在这个过程中,还可以使用其他属性定义窗口小部件的外观和工作原理。例如,创建一个图表:

要在页面上添加多个小部件,就必须创建一个布局(这将在下文中详述)。

创建电子邮件客户端

进入正题,先来看一下电子邮件客户端的外观:

因为Webix是一个完全可以与任何后端集成的客户端框架,所以程序员只需要集中在用户界面上就可以了。

步骤1:创建布局

在向应用程序中添加组件之前必须先定义其布局。TheLayout组件允许将页面分成行和列,程序员可以创建嵌套行和列,设置其相对或绝对大小或者为用户提供手动更改创建单元格大小的可能性。

布局组件最好的一点是,创建的页面布局是一堆DIV容器,以便程序员可以在Webix小部件旁边使用任何第三方组件。

让我们来看看一切如何运作。如果要创建由三行组成的应用程序,可以使用以下代码:

要创建三列布局,可以使用几乎相同的代码,把行换成列就可以了:

看起来很容易吗? 我们来看一个更复杂的例子:嵌套单元格:

结果如下:

使用嵌套行和列的不同组合,程序员可以创建项目需要的复杂布局。使用Resizer可以使单元格边框可拖动,用户将能够手动调整其大小。

完成布局创建之后,程序员将使用模板组件为每个单元格添加标签,包括一些要放置的组件,该模板允许呈现纯文本或单个数据记录。

以下是代码:

目前,我们已经使用height和width属性来定义所需的大小了。涉及的新属性是type,它定义了布局边框。

如果使用clean将获得无边框的单元格,使用wide将获得有边框的、有更大空间的单元格。

我们来检查结果:

好,接下来的任务是用实际组件替换模板。

步骤2:添加工具栏

我们从工具栏组件开始,它可以包含各种元素,如按钮或下拉菜单。

记住,要使用Webix创建组件,必须使用view:“component_name”代码行,元素属性允许选择工具栏的内容。

接下来是添加标签,以便用户了解正在处理什么:

现在必须将此代码添加到应用程序中,以替换以前创建的模板。

之前:

之后:

我们来检查结果:

步骤3:添加文件夹树

程序员可使用Tree widget进行此任务,data属性定义了文件夹树的结构。以下是代码:

每个树节点都有唯一的ID和一个将显示在屏幕上的值。“Contact Groups”节点具有两个子节点。

open:true属性将打开此分支。除了描述的属性,注意这个代码行:select:true。它允许选择树项目。现在,您可以用代码 "Tree"替换模板。

我们来检查结果:

步骤4:添加日历

现在,您可以在时间选择器中添加一个日历到应用程序。这个方便的互动小部件提供了必要的时间和日期,当你想填写一个表单或创建一个新的事件。该小部件用于创建GanttPRO应用程序,允许用户使用在线甘特图:

这不是一件艰巨的任务:

在您使用代码"Calendar" 替换模板之后,您将得到以下结果:

步骤5:使用DataTable组件显示电子邮件列表

目前,应用程序中已经有了一些相当简单的组件,因此可以继续处理更复杂的内容。

程序员可使用DataTable组件来显示电子邮件列表。它是一个高级的数据组件,支持许多功能,如过滤,排序,分页等。它支持不同的格式,如XML,JSON和CSV。至于其如何在真实的Web应用程序中运行的示例,请查看XL报告:

对于此示例,你需要使用JSON对象作为数据源:

如您所见,电子邮件列表将包含名称,电子邮件地址,主题和日期等信息。

请注意,你还使用了文件夹属性,其值确定存储特定电子邮件的文件夹。在您的实例folder:1表示邮件存储在收件箱文件夹中。The folder:2表示Webix在“发送”文件夹中存储一个电子邮件。

现在可以创建一个新的DataTable组件:

scrollX:false代码行禁用水平滚动条。columns属性定义表将具有哪些列。第一列仅包含复选框。header:{ content:"masterCheckbox" }定义具有主复选框的标题,可用于选择所有可用的电子邮件。使用“{common.checkbox()}”,您可以在此列的每个单元格中添加一个复选框。

其他列只显示数据源中的信息,id属性的值定义在列(名称,主题和日期)中显示哪些数据。标题属性将一个文本添加到标题。注意填充空间:fillspace:true。您已经使用它来强制列扩展以填充未使用的空间。

现在,用上面的代码替换模板:“Email list”,你会得到这样的东西:

步骤6:使用数据绑定

现在你必须编写一些可以帮助Tree和DataTable协同工作的代码。

记住,您在DataTable创建过程中使用的数据数组包含来自两个不同文件夹的邮件:Inbox和Sent。您的任务是使DataTable组件根据所选文件夹显示正确的电子邮件。要做到这一点,可以使用称为数据绑定的机制。

使用bind()函数实现数据绑定。应该从从属组件调用,并将主组件作为参数。由于您希望DataTable根据所选节点树更改其内容,因此第一个组件将是从属组件,第二个组件将作为主节点。

除了绑定数据,你必须告诉你的应用程序,应该在应用程序加载之后选择树的第一个节点。 要实现该目标,您应该将相应的代码放在ready方法中,如下所示:

现在,电子邮件列表的内容将根据所选文件夹进行更改:

步骤7:添加按钮

这不是一件艰巨的任务,因为您已经学习了创建组件所需的属性。您必须创建三个按钮:Reply, Create和Delete。

这是您应该使用的代码:

用实际的代码替换模板后,你会得到这样的:

用户可能难以找到其他按钮。为了简化此任务,您可以给按钮添加图标。

Webix使用Font Awesome集合中的图标。这些图标是根据麻省理工学院许可证获得许可的,有很多选择。

要将常规按钮转换成带有图标的按钮,您必须添加两个属性:

  • Type将定义您将使用哪种按钮

  • Icon允许从收藏中选择正确的按钮

例如,如果要向“create”按钮添加信封图标,可以使用以下属性组合:

使用相同的方法,您可以向所有按钮添加图标:

步骤8:显示电子邮件内容

由于电子邮件的正文由HTML代码呈现,您可以使用模板组件进行显示。替换模板:“消息”代码如下:

如果没有选择的电子邮件,用户将看到以下消息:No message selected。您可以使用其id属性的值来操作此组件。例如,您有一个包含消息的变量:

要在屏幕上显示此消息,可以使用以下代码:

步骤9.使用Windows

最后一步是提供创建新消息的可能,您已经拥有“create”按钮,但它什么都不做。我们来改变一下:

接下来,用户点击此按钮后,Webix将显示一个窗口,该窗口的ID为“my_win”。此窗口将包含用于发送新电子邮件的表单,在显示之前,您必须先删除之前插入的数据。这就是为什么使用clear()方法。

现在,您将定义此窗口的外观。对于这个任务,你必须使用一个新的webix.ui()构造函数:

移动属性允许移动窗口,使用head属性,可以定义窗口的标题。The position:“center”代码行告诉Webix,新窗口应该出现在页面的中心。body部分可能包含任何视图。

步骤10:将窗体添加到窗口

Form widget可以以最小的努力创建Web窗体。

我们来看下面的例子:

无边界属性允许隐藏窗体的边框。表单中最重要的是elements属性,它定义了一组垂直排列的控件和控件组。

在您的情况下,表单将包含两个文本字段,一个文本区域和两个按钮:发送和关闭。请注意,关闭按钮使用hide()方法关闭窗口。发送按钮不执行任何操作,因为您的示例没有后端。在使用click属性的实际应用程序中,可以添加发送消息的代码。

将创建表单的代码添加到窗口代码后,可以测试结果。单击创建按钮,屏幕上将出现一个新窗口:

Wrapping up

使用Webix,程序员可以尽可能少地为Web应用程序创建用户界面。使用Layout组件,您可以快速构建复杂的布局。易用性允许程序员尝试创建不同变体的模型,以确定哪些组件将保证更好的用户体验。

前端开发程序员需要做的就是在页面上添加可用的数据组件,定义要使用的数据组件,并为其设置数据源。之后,程序员可以继续进行配置过程,直到达到理想的结果。

多媒体标签:

音频标签audio:

    <audio src="音频文件的URL"></audio><!-- audio标签需要controls控件才可以播放音频,controls的属性值可以省略,如果URL为视频格式文件,则只会播放音频 -->

html5中通过audio标签实现音频播放,支持的格式有.mp3/.ogg/.wav;注意:标签中必须要有controls属性,否则不会播放;loop循环播放,autoplay自动播放属性(谷歌为了用户体验禁用了这个功能);一般为了兼容多个浏览器,audio标签中不写src属性,而是通过source标签写入多个格式的音频供浏览器选择,若都不支持则输入提示文字:


    <body>
      <audio controls loop autoplay>
        <source src="music/bgsound.mp3" type="audio/mpeg">
        <source src="music/movie04.ogg" type="audio/mpeg">
          若浏览器都不支持以上格式,在这里输入提示文字即可
      </audio>
    </body>

视频标签video:


    <video src="视频文件的URL" controls="controls"></video><!-- video标签需要controls控件才可以播放视频,controls的属性值可以省略 -->

视频一般比较大,如果是一般的视频上传,我们可以借助第三方视频平台,如腾讯、优酷等,把视频上传到第三方平台后分享,通过ifram标签插入到代码中即可。

embed可以用来插入各种多媒体,例如Midi、Wav、AIFF、AU、MP3等格式,它支持音频或视频播放


    <embed src="" allowFullScreen="true" quality="high" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

html5中定义视频通过video标签,其属性:autoplay自动播放(谷歌为了用户体验禁用了这个功能,解决方法是给video标签加静音属性muted)、muted静音、controls默认播放控件、loop循环播放、poster加载等待的图片、preload是否预先加载,其属性值auto和none、width设置播放窗口的宽度、height设置播放窗口的高度,支持的格式有ogg/MPEG4/WebM等,一般video标签中不写src属性,而是通过source标签写入多个格式的视频供浏览器选择,若都不支持则输入提示文字:


    <body>
      <video controls loop autoplay poster="images/bg.jpg">
        <source src="video/movie04.ogg" type="video/ogg">
        <source src="video/mp4.mp4" type="video/mp4">
          若浏览器都不支持以上格式,在这里输入提示文字即可
        </video>
    </body>

全屏方法:

HTML5允许用户自定义网页上任意一元素全屏显示,element.requsetFullScreen()开启全屏显示;

同样支持关闭全屏操作:document.cancelFullScreen(),注意:任何元素的全屏操作后都只需要给document关闭全屏即可。

document.fullScreen检测当前是否处于全屏状态。

以上方法不支持ie9以下低版本浏览器,以及高级浏览器加私有前缀才可以使用(webkit内核浏览器:webkitRequestFullScreen、webkitCancelFullScreen,如chrome浏览器。Gecko内核浏览器:mozRequestFullScreen、mozCancelFullScreen,如火狐浏览器;document.webkitIsFullScreen、document.mozFullScreen)



        <script>
            var btn = document.querySelector('input');
            var flag = true;
            if (flag) {
                btn.onclick = function() {
                    bodys.webkitRequestFullScreen();
                    !flag;
                };
            } else {
                btn.onclick = function() {
                    document.webkitCancelFullScreen();
                    !flag;
                };
            };
        </script>

自定义播放器:

播放器中常用方法:



播放器中常用属性:



继:



播放器中常用事件:



解决html5标签兼容性:

由于html5新增的许多语义化标签在低版本浏览器不兼容,这里推荐一款js插件来解决这个问题:html5shiv.js,其相关教程查阅官网:https://www.npmjs.com/package/html5shiv

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。

笔者:苦海123

其它问题可通过以下方式联系本人咨询:

QQ:810665436

微信:ConstancyMan

网页制作

html

Hypertext Markup Language 超文本标记语言

html的文件结尾是html

<标签名> 标记/标签

标签的分类

双标签 <div></div>一般都写结构,里面会嵌套内容,其他结构

单标签 <img>他本身就可以代表一些功能,不需要放内容

属性

就是对标签的描述

属性名="属性值"

写的地方:双标签写在第一个标签上,属性和属性之间空格

<div xxx="xxx" xxx="xxx"></div>

<img xxx="xxx">

------------------------

文档类型声明

html5

<!DOCTYPE html>

html4

Transitional 过渡性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

strict 严格型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

xhtml

Transitional 过渡性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

strict 严格型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

文档声明类型

过渡性

严格型

html5类型(严格型)

框架型(已经废除)

不写文档类型可以吗

不可以,在有些浏览器(IE),解析文档的方式发生了改变,页面结构会发生变化

----------------------

html

网页的根标签,每个页面只出现一次

lang="en" 语言属性

en 英语

zh-CN

head 头

给浏览器看的,用户看不到

看的是网页的设置,配置

<meta charset="UTF-8">

charset 字符集

gb2312 只能简体中文

gbk gb2312扩展版 繁体加进来

unicode 万国码 所有国家的都有

utf-8 unicode升级版

<meta name="description" content="" />

<meta name="keyword" content="" />

百度搜索

竞价排名

点击一下收费 1-999

30-50

ip段锁定,在同一时间,一个ip点击多次算一次。根据有效行为收费

大公司用的

seo

搜索引擎优化 爬虫,就是一种引擎(工具),把符合他自己喜好的网站,排名靠前的搜索出来

这个喜好:html5的规范,编码规范,

title 标题

body 身体

给用户看的

html5

1、更严格的规范

2、书写更加简洁

3、增加了标签

结构化标签

功能标签

4、更语义化

---------------------------------

【标题】

h1~h6 html4标签

headline

特点:加粗 h6-h1逐渐变大

h1 有特殊用途 放logo,增加seo

【段落】

p html4标签

paragraph

空一格,或者多格,或者回车,都是一格

【图片】

img html4标签

image

属性

src source 资源

1、超链接地址

2、绝对路径

3、相对路径 相对当前的网页

alt="图片信息" 只有在图片加载失败的时候才会出现

title=""

【列表】 html4标签

1、有序列表

ol

li

type

1|a|A|i|I

start 开始位置

reversed 倒序

2、无序列表

ul

li

type

discircle 默认 实心圆

circle 空心圆

square 实心方块

【超链接】 html4标签

a anchor 锚

href=""

1、锚点

#id

2、超链接

3、本地页面(相对路径,绝对路径)

4、打电话(一般手机里面用)

5、发邮件

6、协议限定符(可以执行js代码)

【div】

搭建结构

【span】

----------------------------------------------

html5的结构化标签

header

footer

section

nav

【特殊字符】

空格

< 小于

> 大于

【属性】

公有属性 大多数标签都有这个属性

私有属性 这有这个标签有这个属性