手机邮箱导航源码|灵活定制属于你的便携邮箱

导航脚手架,灵活配置你的便携邮箱

随着社交、云存储等多种互联网服务的普及,邮箱渐渐成为联系信息、收发邮件的最常用收件箱。然而,如何在多个邮箱帐号间灵活切换、高效管理成为用户面临的难题。因此,该文结合个人实际情况,提供一种便携邮箱导航源码,彻底解决用户管理多个邮箱的烦恼。

一、准备工作:

1. 确定需求:该源代码提供的是通过“导航脚手架”快速链接各个邮箱服务的方法。编写该代码的主要原因是本人电脑上安装了各种不同类型的邮件客户端,同时拥有几个不同类型的邮箱,但是在使用过程中每次切换到不同的邮箱就会遇到不同的界面以及密码的批准等等,这让本人感到十分的麻烦;同时也十分影响工作效率。因此本代码的目的就是让使用者快速方便的链接到所需邮箱的客户端,摆脱使用的不便。

2. 准备素材:该源代码需要用到几个常见的图标,以便完成整体设计。这里我们建议使用的是Font Awesome的图标库,详情请前往Font Awesome官网自行注册账号获得使用权限。

二、编写代码

1. 初始化

我们从function和变量开始编写,变量中包含了我们需要使用到的各种参数。其中,每个邮箱客户端所需要的URL都被包括在了下方的数组中。

“`

function init() {

var a = [{

name: “QQmail”,

url: “https://mail.qq.com/”,

icon: “qq”

}, {

name: “Gmail”,

url: “https://mail.google.com/mail/ca/u/0/”,

icon: “google”

}, {

name: “163mail”,

url: “https://mail.163.com/”,

icon: “netease”

}, {

name: “Outlook”,

url: “https://outlook.live.com/owa/”,

icon: “outlook”

}, {

name: “Yahoo! Mail”,

url: “http://mail.yahoo.com/”,

icon: “yahoo”

}

];

“`

2. 生成html

接下来,我们需要给每个链接拼接上对应的图标,在列表中展示出来。具体方式为:创建一个

标签,并将所有邮箱链接都放入该标签中。

“`

var s = ‘