當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

使用 Webix 创建 Email 客户端

發布時間：2025/6/15 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了使用 Webix 创建 Email 客户端小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Webix 是一個JavaScript UI 庫，提供了多達88個UI小部件和功能豐富的 CSS/HTML5 JavaScript 控件。使用 Webix 可以有效地加快 Web 應用的開發。文本將演示了如何通過 Webix 框架，來創建一個 Email 客戶端原型。

安裝 Webix

可以下載 Webix 的 JS、CSS 文件，但最快的方式是使用 Webix 的 CDN，如下：

<!DOCTYPE HTML> <html><head><link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css"> <script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script> </head>... </html>

快速開始

我們為我們的第一個應用創建第一個頁面 index.html。在 <body> 中定義 js 腳本，來放置 UI 配置：

接著，我們編寫 UI 配置：

webix.ui({rows: [{view: "template",type: "header", template: "我的應用!"},{view: "datatable",autoConfig: true,data: [{ title: "Way Lau", year: 1987, votes: 533848, rating: 8.9, rank: 5 },{ title: "老衛", year: 1987, votes: 53248, rating: 5.9, rank: 6 }]}] });

為了能更加友好顯示中文，我們在<head>標簽里面加上<meta charset="UTF-8">。

這樣，我們完整的第一個應用的代碼如下：

<!DOCTYPE HTML> <html><head><meta charset="UTF-8"><link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css"><script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script> </head><body><script type="text/javascript" charset="utf-8">/* UI 配置 */webix.ui({rows: [{view: "template",type: "header", template: "我的應用!"},{view: "datatable",autoConfig: true,data: [{ title: "Way Lau", year: 1987, votes: 533848, rating: 8.9, rank: 5 },{ title: "老衛", year: 1987, votes: 53248, rating: 5.9, rank: 6 }]}]});</script> </body></html>

用瀏覽器直接打開我們的index.html 頁面，可以看到如下效果：

探索項目

那么，我們來簡單介紹下 Webix 的原理。

Webix 的應用程序都是放置在 script 腳本中：

webix.ui({// 組件 });

需要注意的是，如果想讓 Webix 腳本在 HTML 文檔加載完了再執行，可以使用 webix.ready(function(){ ....}) 來包裹我們的 Webix，用法如下：

webix.ready(function(){webix.ui({....}); });

下面代碼是用 Webix 中的 view 來定義一個視圖組件，多個 view 可以實現復雜的應用布局結構：

rows: [{view: "template",type: "header", template: "我的應用!"},{view: "datatable",autoConfig: true,data: [{ title: "Way Lau", year: 1987, votes: 533848, rating: 8.9, rank: 5 },{ title: "老衛", year: 1987, votes: 53248, rating: 5.9, rank: 6 }]} ]

在上述例子中，我們用到了兩種類型的 view，其中，

rows 代碼垂直布局的多個列，這個，我們每個行（row）就是一個view；
ui.template 是一個用于包裹 HTML 內容的容器。這里我們用來類型為header的template來說明這個是應用頭。更多 template 的類型，可以自行參閱https://docs.webix.com/samples/80_docs/template_types.html；
ui.datatable 是一個功能豐富的數據表格組件；
- autoConfig 設置為 true，表明表格會根據數據來自適應；
- data 就是表格中放置的數據

進階

在快速了解 Webix 的相關概念之后，我們就要來創建一個稍微復雜一點的應用，就是本文的主要內容“Email 客戶端”。

布局

從大布局開始，再逐步求精，是構建前端應用的基本思路。我們創建了如下布局結構：

webix.ui({type: "space",rows: [/* 1st row. Toolbar */{template: "Toolbar",height: 45,},/* 2nd row. The rest of application */{type: "wide", cols: [/* 1st column of the second row./* Folder tree and Calendar */{type: "clean",rows: [{template: "Tree",width: 280},{template: "Calendar"}]},/* 2nd column of the second row./* Email list, Buttons, and Message reader */{type: "wide", rows: [{ template: "Email List" },{height: 45, cols: [{ template: "Button1" },{ template: "Button2" },{},{ template: "Button 3" }]},{ template: "Message" }]}]}] });

其中：

cols 就是列，每行（row）可能包含了多個列（col）；
height 和 width 屬性來定義視圖所需的大小了
type，它定義了布局邊框。如果使用clean將獲得無邊框的單元格，使用wide將獲得有邊框的、有更大空間的單元格。

實現 Toolbar

Toolbar（工具欄）可以包含各種元素，如按鈕或下拉菜單等。

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

... {view: "toolbar",height: 45,elements:[{view: "label", label: "Webix Email 客戶端"}] }, ...

elements 用來放置子的view組件。
label 就是顯示普通的文本標簽

這里，我們使用了 ui.chart，來創建圖表。

實現 Tree

創建菜單目錄樹：

... {view:"tree",id: "my_tree",select: true,width:280,data:[{ id:"1", value:"收件箱"},{ id:"2", value:"已發送"},{ id:"3", value:"草稿箱"},{ id:"4", value:"垃圾箱"},{ id:"5", value:"通訊錄", open:true, data:[{ id:"5-1", value:"好友"},{ id:"5-2", value:"家人"}]}] }, ...

其中:

tree 是一個功能豐富的樹形組件；
open 設置為 true，來讓我們的樹在初始化時就處于打開狀態。

最終效果如下：

實現 Calendar

創建日歷組件：

... {view:"calendar",timepicker:true }, ...

其中:

calendar 是一個功能豐富的日歷組件；
timepicker 設置為 true，在日歷上顯示時間選擇器。

最終效果如下：

實現 Email 列表

還記得我們的在“快速開始”部分的那個表格嗎？這里同樣需要用表格來實現 Email 列表：

創建Email 列表：

...{id: "my_datatable",view: "datatable",scrollX: false,columns: [{id: "checked", header: { content: "masterCheckbox" },template: "{common.checkbox()}", width: 40},{ id: "name", width: 250, header: "發件人" },{ id: "subject", header: "主題", fillspace: true },{ id: "date", header: "時間", width: 150 }],data: [{id: 1, folder: 1, name: "Way Lau",email: "waylau521@gmail.com", subject: "Invitation",date: "25/07/2017 12:30:20"},{ id: 2, folder: 1, name: "老衛",email: "waylau521@163.com", subject: "Report",date: "25/07/2017 16:10:07"},{id: 11, folder: 2, name: "Way Lau",email: "waylau521@gmail.com", subject: "Re: Forecast",date: "25/07/2017 14:10:45"},{id: 12, folder: 2, name: "老衛",email: "waylau521@163.com", subject: "Party invitation",date: "25/07/2017 17:05:10"}]}, ...

其中:

columns 用來定義表頭；
header:{ content:"masterCheckbox" } 定義了可以全選列表的 checkbox；
template:"{common.checkbox()}" 設置每個列表項都會帶有一個 checkbox；
scrollX 設置為 false，意味著禁用了水平的滾動條。
fillspace 設置為 true，意味可以自動填充寬度。

最終效果如下：

事件處理

事件，讓組件具備交互功能：

... // 綁定事件 $$("my_datatable").bind($$("my_tree"),function(obj,filter){return obj.folder == filter.id; });// 選中第一個節點 $$("my_tree").select(1); ...

其中：

"my_datatable" 為 datatable 組件的 id。綁定了"my_tree"的點擊事件；
$$("my_tree").select(1) 意味著樹節點會選中第一個節點。

最終效果如下：

按鈕實現

按鈕實現如下：

... {height: 45, cols: [{view:"button",label:"回復",width: 95},{view:"button",label:"創建",width: 95},{},{view:"button",label:"刪除",width: 95}] }, ...

其中：

"my_datatable" 為 datatable 組件的 id。綁定了"my_tree"的點擊事件；
$$("my_tree").select(1) 意味著樹節點會選中第一個節點。

最終效果如下：

展示 Email 正文

展示 Email 正文實現如下：

... {id:"details",template:"No message selected" }, ...

如果想顯示文本，可以編寫如下腳本：

var message = "大道至簡 https://waylau.com";$$("details").define("template",message); $$("details").render();

最終效果如下：

編輯窗口

發送郵件，我們需要有一個編輯窗口：

webix.ui({view:"window",move: true,id:"my_win",width:400,head:"創建新郵件",position: "center",body: {view:"form",borderless:true,elements: [{ view:"text", label:'收件人:', name:"address" },{ view:"text", label:'主題:', name:"subject" },{ view:"textarea", height:200, label:"內容:", name:"message"},{ cols: [{ view:"button", value: "發送", },{ view:"button", value: "關閉", click:("$$('my_win').hide();") }]},],} });

然后在“創建”的按鈕上，添加彈出窗口的事件：

... {view:"button",label:"創建",width: 95,click:function(){$$("my_win").getBody().clear();$$("my_win").show();} }, ...

最終效果如下：

源碼

https://github.com/waylau/webix-tutorial

參考文獻

https://opensource.com/article/17/5/10-step-guide-webix-framework
https://docs.webix.com/tutorials__quick_start.html
本文同步至https://waylau.com/email-client-with-webix

轉載于:https://my.oschina.net/waylau/blog/1027097

總結

以上是生活随笔為你收集整理的使用 Webix 创建 Email 客户端的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： scalikejdbc 学习笔记(4)
下一篇：安装Kubernetes-Dashboa