僅需 5 步，用 JavaScript 直接通過前端發(fā)送電子郵件

者 | Mateusz Iwaniuk

譯者 | 明明如月，責(zé)編 | 夕顏

出品 | CSDN（ID：CSDNnews）

文章配套代碼: https://github.com/iwaniukooo11/email-sender

現(xiàn)在，即使是創(chuàng)建最基本的網(wǎng)站，程序員也必須使用現(xiàn)代的功能和技術(shù)。甚至像為你的朋友創(chuàng)建簡單的投資組合這樣的基本項目也可能涉及到一些問題，比如從聯(lián)系人表單接收數(shù)據(jù)。有很多方法可以讀取這些數(shù)據(jù)。你可以將表單與數(shù)據(jù)庫連接起來，然后從數(shù)據(jù)庫中讀取傳入的消息來實現(xiàn)功能，但這樣做會給不懂技術(shù)的客戶造成困難。

你為什么不通過發(fā)送電子郵件傳輸信息？

不使用數(shù)據(jù)庫就能接收到傳入的消息，絕對是最佳選擇，也是最方便用戶的選擇。但問題來了—如何實現(xiàn)呢？你可能認為需要使用某種后端語言。

實際上，你不必使用任何如 php 或 python 這種后端語言，你甚至不需要用到 node.js！你需要的就是一個簡單的EmailJS 庫。

本文將介紹下面兩個重要功能:

配置 emailjs 帳戶
使用 JS 發(fā)送電子郵件

請注意，在我的項目中，我使用了 gulp 和 webpack，我在 src 文件夾存放源碼，dist 存放最終發(fā)布版本的代碼。

我將分 5 個步驟向你展示如何從頭開始構(gòu)建電子郵件發(fā)送器。

步驟1-用 HTML 創(chuàng)建表單

首先需要創(chuàng)建一個 HTML 表單。你不必放置像 required 或 max 這種驗證屬性，因為稍后，preventDefault 函數(shù)將在你的提交事件上運行，它會讓這些屬性的處理失效。

表單中最重要的是為每個輸入放置 name 屬性，后面會用到。

我的非常簡單的表單是這樣的:

src/html/index.html

 <form class="form"> <input name='name' type="text" placeholder="Your name..." class="form__input" /> <input name='topic' type="text" placeholder="Topic..." class="form__input" /> <textarea name='message' type="text" placeholder="Your Message..." class="form__input" ></textarea>

 <input type="submit" value="send" class="form__input form__input--button"> </form>

步驟2-注冊成為 email 用戶

要配置你的電子郵件，你必須注冊電子郵件服務(wù)。別擔(dān)心—使用這個網(wǎng)站非常方便和省時。

登入后，系統(tǒng)會詢問你的電子郵件服務(wù)，它位于個人電子郵件服務(wù)區(qū)（personal email service）。在我的例子中，我選擇了 gmail。

然后，你需要連接你的 gmail 帳戶。這將用來發(fā)送電子郵件給你客戶。例如，如果你關(guān)聯(lián)了 xyz@gmail.com 賬戶，你后續(xù)發(fā)送的郵件都將從這個郵箱發(fā)出。所以不要擔(dān)心“ Send email on your behalf” 這個授權(quán)信息—這正是你需要的！

連接完 gmail 賬戶后，點擊添加服務(wù)（add service）按鈕。

步驟3-創(chuàng)建郵件模板

如果你已經(jīng)成功連接了你的 gmail 賬戶，你現(xiàn)在應(yīng)該在信息中心中。現(xiàn)在需要創(chuàng)建電子郵件模板了。

切換到電子郵件模板卡，并單擊創(chuàng)建一個新的模板（create a new template）。界面非常友好，所以創(chuàng)建模板不會有任何問題。

你可以選擇模板的名稱和 ID。我稱之為“我的神奇模板（my_amazing_template）”。

接下來，你必須指定郵件的內(nèi)容。

模板的變量值來自 input 中的 `name` 屬性。你已將變量插入`{{{}}}`符號中。

不要忘記在“收件人”部分 (右側(cè)) 添加電子郵件地址。你的電子郵件將被發(fā)送到該電子郵件地址上。截圖中的收件人郵箱是我自己的公司郵箱。

這是我的簡單模板，它使用來自 HTML 表單里的 3 個變量。我還指定了接收電子郵件的主題。

步驟4-保存 API 密鑰

這部分沒什么特別的。Emailjs 共享授權(quán) API 密鑰，將在發(fā)送電子郵件時使用。當然，放這些鑰匙最好的地方是`.env` 配置。但是因為我使用的是簡單的靜態(tài)文件，我不想使用服務(wù)器配置，所以我將它們保存在 apikeys 文件中，然后再將它們導(dǎo)入。

你的 USER_ID 位于 Account > API Keys 菜單下。

TEMPLATE_ID 位于模板的標題下面。

這是我基于不存在的 keyssrc / js / apikeys. js 的示例配置.

src/js/apikeys.js

export default { USER_ID :'user_DPUd-rest-of-my-id', TEMPLATE_ID:'my_amazing_template'}

如果需要將源碼發(fā)布到 GITHUB，不要忘記將 APIKEYS 文件添加到 .GITIGNORE文件中

步驟5-發(fā)送電子郵件

現(xiàn)在是該項目最后也是最重要的部分的了。現(xiàn)在我們必須使用 javascript 發(fā)送電子郵件。

首先，你必須下載 emailjs 包。

npm i emails-com

然后，轉(zhuǎn)到 js 文件，導(dǎo)入庫和 apikeys。

src/js/main.js

import emailjs from 'emailjs-com'import apiKeys from './apikeys'

現(xiàn)在是編寫發(fā)送電子郵件功能的時候了

src/js/main.js

const sendEmail = e => { e.preventDefault

 emailjs .sendForm('gmail', apiKeys.TEMPLATE_ID, e.target, apiKeys.USER_ID) .then( result => { console.log(result.text) }, error => { console.log(error.text) } )}

sendForm 函數(shù)有4個參數(shù):

你的電子郵件的 ID，在這里:

TEMPLATE_ID 來自 apikey 文件,

事件對象來自你的表單提交

USER_ID 來自 apikey 文件,

最后，查找表單并添加提交事件監(jiān)聽器：

src/js/main.js

const form = document.querySelector('.form')form.addEventListener('submit',sendEmail)

正如我前面提到的，由于 `preventDefault` 函數(shù)，屬性驗證將無法工作。你必須使用 JS 自己進行驗證和清除輸入。

以上就是全部內(nèi)容，接下來讓我們測試一下。

填寫頁面上的表單并發(fā)送。

我收到電子郵件，內(nèi)容正是根據(jù)我們的模板和表單數(shù)據(jù)渲染出來的。

通過上圖可以看出，所有的變量的值都填充到了正確的位置上。

總結(jié)

通過本文的介紹你會發(fā)現(xiàn)用 JS 發(fā)送郵件并非難事。

使用 emailjs，你可以簡單的方式發(fā)送電子郵件。

我相信你未來的用戶會很高興收到來自他們網(wǎng)頁上表單填寫數(shù)據(jù)的t郵件，相信本文對你有幫助。

這篇文章的配套代碼在這里: https://github.com/iwaniukooo11/email-sender

原文鏈接：

https://dev.to/iwaniukooo11/send-e-mails-directly-from-front-end-with-js-5d7d

本文為CSDN翻譯文章，轉(zhuǎn)載請注明出處。

?我們想研發(fā)一個機器學(xué)習(xí)框架，6 個月后失敗了
?生產(chǎn)型機器學(xué)習(xí)已經(jīng)沒那么困難了？
?視頻 | 你不知道的"開源"60年秘史
?GitHub標星10,000+，Apache項目ShardingSphere的開源之路
?阿里技術(shù)專家告訴你，如何畫出優(yōu)秀的架構(gòu)圖？
?加拿大API平臺如何做到30%為中國明星項目？創(chuàng)業(yè)老兵這樣說……

著智能手機和平板設(shè)備的流行，在電腦屏幕上看來正常的電子郵件在手機等移動設(shè)備上查閱卻凌亂不已。根據(jù)一項調(diào)查，有91%的用戶會在移動設(shè)備上查閱郵件。電子郵件通訊設(shè)計模板亟待優(yōu)化。

接下來，你可能會用div或CSS編寫HTML代碼改良郵件模板，但Outlook或雅虎郵箱卻另辟蹊徑。

由于HTML5和CSS3在郵件設(shè)計方面有所局限，設(shè)計響應(yīng)式郵件模板的最佳方式是使用傳統(tǒng)方式打造郵件布局——利用表格、內(nèi)部插入CSS、inline CSS和媒體查詢。

是否所有郵件客戶端都支持媒體查詢？

雖然大部分郵件客戶端都支持媒體查詢，但仍有Gmail Android APP在這方面有所局限。不過設(shè)計師們?nèi)匀豢梢栽黾颖砀窈虷TML元素的百分率，在不同的視窗上創(chuàng)建流暢的體驗布局。

接下來，我們將一步步解析如何應(yīng)用現(xiàn)有信息，使用表格、inline CSS和內(nèi)部插入CSS等方式，在媒體查詢技術(shù)的輔助下，創(chuàng)建響應(yīng)式郵件模板。

我們需要的有：

Raleway以及Lato谷歌字體

切片圖像和icon

HTML和CSS知識

媒體查詢相關(guān)知識

終端輸出

現(xiàn)代化的扁平設(shè)計

從何入手

開始之前，我們需要在標題欄內(nèi)放入內(nèi)容。首先，我們要增加一個XHTML文檔，緊接著加上html標簽，創(chuàng)建類型為xmlns。剩下的是元信息和標題標簽。

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

<head>

? <title>KATAUSTRIA - Email Template</title>

</head>

Markup

至于markup，我們需要利用表格重新開始，在表格中增加屬性。

? ? <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? </table>

</body>

</html>

橫幅和3Box Showcase區(qū)

設(shè)計這兩個部分時，我們稍后在CSS中會將每個部分用col-600 class包裹。我們將在設(shè)計中增加一個帶有l(wèi)ogo和文字的橫幅。至于3Box Showcase，我們將用到col3，將寬度設(shè)為183。需要注意，在高度這里我們使用的是<td>標簽預(yù)留空間。

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0">

? ? ? ? <tr>

? ? ? ? ? ? <td align="center" valign="top" background="images/header-background.jpg" bgcolor="#66809b" style="background-size:cover; background-position:top;height="400"">

? ? ? ? ? ? <table class="col-600" width="600" height="400" border="0" align="center" cellpadding="0" cellspacing="0">

? ? ? ? <tr>

? ? ? ? ? ? <td height="40"></td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td align="center" style="line-height: 0px;"><img style="display:block; line-height:0px; font-size:0px; border:0px;" src="images/logo.png" width="109" height="103" alt="logo" />

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td align="center" style="font-family: 'Raleway', sans-serif; font-size:37px; color:#ffffff; line-height:24px; font-weight: bold; letter-spacing: 7px;">EMAIL <span style="font-family: 'Raleway', sans-serif; font-size:37px; color:#ffffff; line-height:39px; font-weight: 300; letter-spacing: 7px;">TEMPLATE</span>

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td align="center" style="font-family: 'Lato', sans-serif; font-size:15px; color:#ffffff; line-height:24px; font-weight: 300;">A creative email template for your email campaigns, promotions <br/>and products across different email platforms.

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td height="50"></td>

? ? ? ? </tr>

? ? ? ? ? ? </table>

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? ? ? </table>

? ? ? ? ? ? </td>

? ? ? ? </tr>

吸睛標題和實際服務(wù)部分

設(shè)計這兩個部分時，我們?nèi)匀皇褂胏lass col-600，不過對于每個部分的內(nèi)部元素，我們將采用完全不同的class。對于標題部分的第一個icon元素，我們要用到col1和col3_one設(shè)計文字。我們稍后會在媒體查詢中調(diào)整字體大小。

在實際服務(wù)部分，我們會使用col2設(shè)計每一欄。在這里需要注意，我使用了一個inline CSS為我們的設(shè)計元素增加某些格調(diào)。

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-left:20px; margin-right:20px;">

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style=" border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;">

? ? ? ? <tr>

? ? ? ? ? ? <td height="50"></td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td align="right">

? ? ? ? ? ? <table class="col2" width="287" border="0" align="right" cellpadding="0" cellspacing="0">

? ? ? ? <tr>

? ? ? ? ? ? <td align="center" style="line-height:0px;">

? ? ? ? ? ? <img style="display:block; line-height:0px; font-size:0px; border:0px;" class="images_style" src="images/icon-responsive.png" width="169" height="138" />

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? ? ? </table>

? ? ? ? ? ? <table width="287" border="0" align="left" cellpadding="0" cellspacing="0" class="col2" style="">

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? <table class="insider" width="237" border="0" align="center" cellpadding="0" cellspacing="0">

? ? ? ? <tr align="left">

? ? ? ? ? ? <td style="font-family: 'Raleway', sans-serif; font-size:23px; color:#2a3b4c; line-height:30px; font-weight: bold;">What we do?</td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td height="5"></td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td style="font-family: 'Lato', sans-serif; font-size:14px; color:#7f8c8d; line-height:24px; font-weight: 300;">We create responsive websites with modern designs and features for small businesses and organizations that are professionally developed and SEO optimized.

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? ? ? </table>

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? ? ? </table>

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? ? ? </table>

? ? ? ? ? ? </td>

? ? ? ? </tr>

CSS

現(xiàn)在，所有需要用到的部分都設(shè)計好了，接下來我們需要在標題欄部分增加一些模式。首先為markup增加整體風(fēng)格。插圖谷歌網(wǎng)頁字體，其余部分將包含我們?yōu)猷]件主題、html、表格等等設(shè)計的模式。

關(guān)于網(wǎng)頁字體的小提示：根據(jù)Campaign Monitor，郵件客戶端對網(wǎng)頁字體的支持有限，這以為著不是所有客戶端都支持網(wǎng)頁字體。

@import "http://fonts.googleapis.com/css?family=Lato:300,400,700,900|Raleway:400,300,500,600,700,800,900' rel='stylesheet' type='text/css";

html,body {

? ? background-color:#fff;

? ? margin:0;

? ? padding:0

}

html {

? ? width:100%

}

body {

? ? margin:0;

? ? padding:0;

? ? -webkit-text-size-adjust:none;

? ? -ms-text-size-adjust:none

}

table {

? ? border-spacing:0;

? ? border-collapse:collapse

}

table td {

? ? border-collapse:collapse

}

table tr {

? ? border-collapse:collapse

}

img {

? ? display:block!important

}

br,strong br,b br,em br,i br {

? ? line-height:100%

}

a {

? ? text-decoration:none

}

.button a {

? ? font-size:14px;

? ? font-family:'Lato',sans-serif;

? ? color:#fff;

? ? font-weight:300;

? ? background:transparent

}

接下來，讓我們?yōu)樘貏e的郵件客戶群增加獨特風(fēng)格。這能讓每一種不同的群體都有不同的風(fēng)格。

/* OUTLOOK CLASS*/

.ExternalClass {

? ? background-color:#fff;

? ? width:100%

}

.ExternalClass,.ExternalClass font,.ExternalClass td,.ExternalClass p,.ExternalClass span,.ExternalClass div {

? ? line-height:100%

}

.ReadMsgBody {

? ? width:100%;

? ? background-color:#fff

}

/* YAHOO MAIL CLASS */

.yshortcuts,.yshortcuts a,.yshortcuts a:link,.yshortcuts a:visited,.yshortcuts a:hover,.yshortcuts a span {

? ? border-bottom:none!important

}

/* MAILCHIMP CLASS */

.default-edit-image {

? ? height:20px

}

媒體查詢

到了媒體查詢設(shè)計的步驟，我們需要在640px視窗中使用百分率增加并調(diào)整每個部分和元素的尺寸。

@media only screen and (max-width: 640px) {

body {

? ? width:auto!important

}

table[class="col1"] {

? ? width:29%;

}

table[class="col2"] {

? ? width:47%;

? ? text-align:left

}

table[class="col3_one"] {

? ? width:64%;

? ? text-align:left;

}

table[class="col3"] {

? ? width:100%;

? ? text-align:center;

}

table[class="col-600"] {

? ? width:450px

}

table[class="insider"] {

? ? width:90%

}

img[class="images_style"] {

? ? width:60%;

? ? height:auto

}

.margin{

margin-left: 25px;

margin-right: 25px;

}

在最后的CSS環(huán)節(jié)，我們將開始為480px視窗增加媒體查詢。我們設(shè)計的大部分獨立元素和部分將被設(shè)置為100%。

@media only screen and (max-width: 480px) {

body {

? ? width:auto!important

}

table[class="col1"] {

? ? width:100%;

}

table[class="col2"] {

? ? width:100%;

? ? text-align:left

}

table[class="col3"] {

? ? width:100%;

? ? text-align:center

}

table[class="col3_one"] {

? ? width:80%;

? ? text-align:center;

? ? margin: 0 20px 0 0;

}

table[class="col-600"] {

? ? width:290px

}

table[class="insider"] {

? ? width:82%!important

}

img[class="images-style"] {

? ? width:60%

}

.button { width: 40%; display: block; }

a.read-more { text-align: center; display: block;}

}

總結(jié)

通過以上步驟，各位就能成功設(shè)計響應(yīng)式郵件模板了。不難看出，我們所有的整體風(fēng)格都使用了inlineCSS。(來源：視覺中國)

切圖網(wǎng)（qietu.com）提供優(yōu)質(zhì)的psd轉(zhuǎn)郵件模板制作，并且開發(fā)了一款免費、開源的郵件模板css框架——快郵，可以快速搭建一個響應(yīng)式郵件。

前端開發(fā)的程序員應(yīng)該都知道Webix這個免費框架，本文會給出用其創(chuàng)建一個電子郵件客戶端用戶界面的步驟。Webix是一個JavaScript UI庫，可用其構(gòu)建一些HTML5程序，熟悉它的程序員都知道，Webix快速、輕便且易于學(xué)習(xí)，與AngularJS、Vue.js和jQuery的集成都很方便，所以我最終選擇了Webix。（閱讀本文大概需要5分鐘，圖片較多，建議在有Wifi的情況下閱讀。）

Webix的工作原理

先來看看如何開始使用Webix（如果用過，請自動忽略這一部分），下載完成后，程序員應(yīng)該在頁面上添加所需的JavaScript和CSS文件，這些都可以在代碼庫文件夾中找到：

在應(yīng)用程序中不需要使用webix.ready，但它有助于確保在頁面完全加載后執(zhí)行代碼（作為theonDocumentReady事件和onlload（）的替代方法）。

要在頁面上添加小部件，程序員可以使用view屬性，它的值定義將決定使用哪個小部件。在這個過程中，還可以使用其他屬性定義窗口小部件的外觀和工作原理。例如，創(chuàng)建一個圖表：

要在頁面上添加多個小部件，就必須創(chuàng)建一個布局（這將在下文中詳述）。

創(chuàng)建電子郵件客戶端

進入正題，先來看一下電子郵件客戶端的外觀：

因為Webix是一個完全可以與任何后端集成的客戶端框架，所以程序員只需要集中在用戶界面上就可以了。

步驟1：創(chuàng)建布局

在向應(yīng)用程序中添加組件之前必須先定義其布局。TheLayout組件允許將頁面分成行和列，程序員可以創(chuàng)建嵌套行和列，設(shè)置其相對或絕對大小或者為用戶提供手動更改創(chuàng)建單元格大小的可能性。

布局組件最好的一點是，創(chuàng)建的頁面布局是一堆DIV容器，以便程序員可以在Webix小部件旁邊使用任何第三方組件。

讓我們來看看一切如何運作。如果要創(chuàng)建由三行組成的應(yīng)用程序，可以使用以下代碼：

要創(chuàng)建三列布局，可以使用幾乎相同的代碼，把行換成列就可以了：

看起來很容易嗎？我們來看一個更復(fù)雜的例子：嵌套單元格：

結(jié)果如下：

使用嵌套行和列的不同組合，程序員可以創(chuàng)建項目需要的復(fù)雜布局。使用Resizer可以使單元格邊框可拖動，用戶將能夠手動調(diào)整其大小。

完成布局創(chuàng)建之后，程序員將使用模板組件為每個單元格添加標簽，包括一些要放置的組件，該模板允許呈現(xiàn)純文本或單個數(shù)據(jù)記錄。

以下是代碼：

目前，我們已經(jīng)使用height和width屬性來定義所需的大小了。涉及的新屬性是type，它定義了布局邊框。

如果使用clean將獲得無邊框的單元格，使用wide將獲得有邊框的、有更大空間的單元格。

我們來檢查結(jié)果：

好，接下來的任務(wù)是用實際組件替換模板。

步驟2：添加工具欄

我們從工具欄組件開始，它可以包含各種元素，如按鈕或下拉菜單。

記住，要使用Webix創(chuàng)建組件，必須使用view:“component_name”代碼行，元素屬性允許選擇工具欄的內(nèi)容。

接下來是添加標簽，以便用戶了解正在處理什么：

現(xiàn)在必須將此代碼添加到應(yīng)用程序中，以替換以前創(chuàng)建的模板。

之前：

之后：

我們來檢查結(jié)果：

步驟3：添加文件夾樹

程序員可使用Tree widget進行此任務(wù)，data屬性定義了文件夾樹的結(jié)構(gòu)。以下是代碼：

每個樹節(jié)點都有唯一的ID和一個將顯示在屏幕上的值。“Contact Groups”節(jié)點具有兩個子節(jié)點。

open:true屬性將打開此分支。除了描述的屬性，注意這個代碼行：select：true。它允許選擇樹項目?，F(xiàn)在，您可以用代碼 "Tree"替換模板。

我們來檢查結(jié)果：

步驟4：添加日歷

現(xiàn)在，您可以在時間選擇器中添加一個日歷到應(yīng)用程序。這個方便的互動小部件提供了必要的時間和日期，當你想填寫一個表單或創(chuàng)建一個新的事件。該小部件用于創(chuàng)建GanttPRO應(yīng)用程序，允許用戶使用在線甘特圖：

這不是一件艱巨的任務(wù)：

在您使用代碼"Calendar" 替換模板之后，您將得到以下結(jié)果：

步驟5：使用DataTable組件顯示電子郵件列表

目前，應(yīng)用程序中已經(jīng)有了一些相當簡單的組件，因此可以繼續(xù)處理更復(fù)雜的內(nèi)容。

程序員可使用DataTable組件來顯示電子郵件列表。它是一個高級的數(shù)據(jù)組件，支持許多功能，如過濾，排序，分頁等。它支持不同的格式，如XML，JSON和CSV。至于其如何在真實的Web應(yīng)用程序中運行的示例，請查看XL報告：

對于此示例，你需要使用JSON對象作為數(shù)據(jù)源：

如您所見，電子郵件列表將包含名稱，電子郵件地址，主題和日期等信息。

請注意，你還使用了文件夾屬性，其值確定存儲特定電子郵件的文件夾。在您的實例folder：1表示郵件存儲在收件箱文件夾中。The folder：2表示W(wǎng)ebix在“發(fā)送”文件夾中存儲一個電子郵件。

現(xiàn)在可以創(chuàng)建一個新的DataTable組件：

scrollX：false代碼行禁用水平滾動條。columns屬性定義表將具有哪些列。第一列僅包含復(fù)選框。header:{ content:"masterCheckbox" }定義具有主復(fù)選框的標題，可用于選擇所有可用的電子郵件。使用“{common.checkbox（）}”，您可以在此列的每個單元格中添加一個復(fù)選框。

其他列只顯示數(shù)據(jù)源中的信息，id屬性的值定義在列（名稱，主題和日期）中顯示哪些數(shù)據(jù)。標題屬性將一個文本添加到標題。注意填充空間：fillspace:true。您已經(jīng)使用它來強制列擴展以填充未使用的空間。

現(xiàn)在，用上面的代碼替換模板：“Email list”，你會得到這樣的東西：

步驟6：使用數(shù)據(jù)綁定

現(xiàn)在你必須編寫一些可以幫助Tree和DataTable協(xié)同工作的代碼。

記住，您在DataTable創(chuàng)建過程中使用的數(shù)據(jù)數(shù)組包含來自兩個不同文件夾的郵件：Inbox和Sent。您的任務(wù)是使DataTable組件根據(jù)所選文件夾顯示正確的電子郵件。要做到這一點，可以使用稱為數(shù)據(jù)綁定的機制。

使用bind（）函數(shù)實現(xiàn)數(shù)據(jù)綁定。應(yīng)該從從屬組件調(diào)用，并將主組件作為參數(shù)。由于您希望DataTable根據(jù)所選節(jié)點樹更改其內(nèi)容，因此第一個組件將是從屬組件，第二個組件將作為主節(jié)點。

除了綁定數(shù)據(jù)，你必須告訴你的應(yīng)用程序，應(yīng)該在應(yīng)用程序加載之后選擇樹的第一個節(jié)點。要實現(xiàn)該目標，您應(yīng)該將相應(yīng)的代碼放在ready方法中，如下所示：

現(xiàn)在，電子郵件列表的內(nèi)容將根據(jù)所選文件夾進行更改：

步驟7：添加按鈕

這不是一件艱巨的任務(wù)，因為您已經(jīng)學(xué)習(xí)了創(chuàng)建組件所需的屬性。您必須創(chuàng)建三個按鈕：Reply, Create和Delete。

這是您應(yīng)該使用的代碼：

用實際的代碼替換模板后，你會得到這樣的：

用戶可能難以找到其他按鈕。為了簡化此任務(wù)，您可以給按鈕添加圖標。

Webix使用Font Awesome集合中的圖標。這些圖標是根據(jù)麻省理工學(xué)院許可證獲得許可的，有很多選擇。

要將常規(guī)按鈕轉(zhuǎn)換成帶有圖標的按鈕，您必須添加兩個屬性：

Type將定義您將使用哪種按鈕
Icon允許從收藏中選擇正確的按鈕

例如，如果要向“create”按鈕添加信封圖標，可以使用以下屬性組合：

使用相同的方法，您可以向所有按鈕添加圖標：

步驟8：顯示電子郵件內(nèi)容

由于電子郵件的正文由HTML代碼呈現(xiàn)，您可以使用模板組件進行顯示。替換模板：“消息”代碼如下：

如果沒有選擇的電子郵件，用戶將看到以下消息：No message selected。您可以使用其id屬性的值來操作此組件。例如，您有一個包含消息的變量：

要在屏幕上顯示此消息，可以使用以下代碼：

步驟9.使用Windows

最后一步是提供創(chuàng)建新消息的可能，您已經(jīng)擁有“create”按鈕，但它什么都不做。我們來改變一下：

接下來，用戶點擊此按鈕后，Webix將顯示一個窗口，該窗口的ID為“my_win”。此窗口將包含用于發(fā)送新電子郵件的表單，在顯示之前，您必須先刪除之前插入的數(shù)據(jù)。這就是為什么使用clear（）方法。

現(xiàn)在，您將定義此窗口的外觀。對于這個任務(wù)，你必須使用一個新的webix.ui（）構(gòu)造函數(shù)：

移動屬性允許移動窗口，使用head屬性，可以定義窗口的標題。The position：“center”代碼行告訴Webix，新窗口應(yīng)該出現(xiàn)在頁面的中心。body部分可能包含任何視圖。

步驟10：將窗體添加到窗口

Form widget可以以最小的努力創(chuàng)建Web窗體。

我們來看下面的例子：

無邊界屬性允許隱藏窗體的邊框。表單中最重要的是elements屬性，它定義了一組垂直排列的控件和控件組。

在您的情況下，表單將包含兩個文本字段，一個文本區(qū)域和兩個按鈕：發(fā)送和關(guān)閉。請注意，關(guān)閉按鈕使用hide（）方法關(guān)閉窗口。發(fā)送按鈕不執(zhí)行任何操作，因為您的示例沒有后端。在使用click屬性的實際應(yīng)用程序中，可以添加發(fā)送消息的代碼。

將創(chuàng)建表單的代碼添加到窗口代碼后，可以測試結(jié)果。單擊創(chuàng)建按鈕，屏幕上將出現(xiàn)一個新窗口：

Wrapping up

使用Webix，程序員可以盡可能少地為Web應(yīng)用程序創(chuàng)建用戶界面。使用Layout組件，您可以快速構(gòu)建復(fù)雜的布局。易用性允許程序員嘗試創(chuàng)建不同變體的模型，以確定哪些組件將保證更好的用戶體驗。

前端開發(fā)程序員需要做的就是在頁面上添加可用的數(shù)據(jù)組件，定義要使用的數(shù)據(jù)組件，并為其設(shè)置數(shù)據(jù)源。之后，程序員可以繼續(xù)進行配置過程，直到達到理想的結(jié)果。

在線咨詢

上一篇：HTML教程：什么是HTML？
下一篇：Express 的使用

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

僅需 5 步，用 JavaScript 直接通過前端發(fā)送電子郵件

步驟5-發(fā)送電子郵件

總結(jié)

Webix的工作原理

創(chuàng)建電子郵件客戶端

您的項目需求

僅需 5 步，用 JavaScript 直接通過前端發(fā)送電子郵件