用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>他本身就可以代表一些功能，不需要放內容

屬性

就是對標簽的描述

屬性名="屬性值"

寫的地方：雙標簽寫在第一個標簽上,屬性和屬性之間空格

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

文檔類型聲明

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">

strict 嚴格型

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

文檔聲明類型

過渡性

嚴格型

html5類型（嚴格型）

框架型（已經廢除）

不寫文檔類型可以嗎

不可以，在有些瀏覽器（IE），解析文檔的方式發生了改變，頁面結構會發生變化

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

html

網頁的根標簽，每個頁面只出現一次

lang="en" 語言屬性

en 英語

zh-CN

head 頭

給瀏覽器看的，用戶看不到

看的是網頁的設置，配置

charset 字符集

gb2312 只能簡體中文

gbk gb2312擴展版繁體加進來

unicode 萬國碼所有國家的都有

utf-8 unicode升級版

百度搜索

競價排名

點擊一下收費 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、有序列表

type

1|a|A|i|I

start 開始位置

reversed 倒序

2、無序列表

type

discircle 默認實心圓

circle 空心圓

square 實心方塊

【超鏈接】 html4標簽

a anchor 錨

href=""

1、錨點

#id

2、超鏈接

3、本地頁面（相對路徑，絕對路徑）

4、打電話（一般手機里面用）

5、發郵件

6、協議限定符（可以執行js代碼）

【div】

搭建結構

【span】

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

html5的結構化標簽

header

footer

section

nav

【特殊字符】

空格

< 小于

> 大于

【屬性】

公有屬性大多數標簽都有這個屬性

私有屬性這有這個標簽有這個屬性

在線咨詢

上一篇：404頁面如何制作，404錯誤頁面有什么用？
下一篇：前端：JS延長加載的方式有哪些？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

用Webix十步創建一個電子郵件客戶端（內附代碼與截圖）！

Webix的工作原理

創建電子郵件客戶端

您的項目需求

用Webix十步創建一個電子郵件客戶端（內附代碼與截圖）！