前端開發(fā)：一款近年非常受歡迎、簡單的WEB彈出層組件

前端開發(fā)：一款近年非常受歡迎、簡單的WEB彈出層組件（layer）

ayer是一個開源免費(fèi)的彈出層組件，簡單易用、美觀，功能強(qiáng)大能夠滿足你對彈出層的幾乎所有需求，每一種模式都有自己的特色，調(diào)用簡單實(shí)用性強(qiáng)，可輕松實(shí)現(xiàn)Alert、Confirm、Prompt、普通提示、頁面區(qū)塊、iframe、tips等幾乎所有的彈出模式。此組件知名度高，在此僅介紹給不知道的新人，謝謝支持。

1、下載及初始化

http://layer.layui.com/

layer是一個獨(dú)立的組件，能夠在不引入layui的情況下單獨(dú)引入layer，下載文件后放到項目任意位置，在頁面輸入如下代碼引入jQuery和layerjs即可。需要注意的是jQuery必須引入1.8及以上版本。

在頁面body中添加一個按鈕，為按鈕添加id屬性<button id="test1">運(yùn)行</button>，運(yùn)行如下代碼腳本，點(diǎn)擊按鈕即可。

2、不同模式彈層的演示

layer調(diào)用不同內(nèi)置方法即可彈出不同模式的彈層，內(nèi)置多個配置屬性，可以配置標(biāo)題、內(nèi)容、皮膚、寬高、彈出位置、按鈕（包括關(guān)閉按鈕、自定義按鈕、排序等）、自動關(guān)閉時間、遮蓋、動畫、是否允許拉伸等；多種狀態(tài)監(jiān)聽事件；通過不同功能組合，就能夠?qū)崿F(xiàn)你想要的需求。下面簡單展示一下不同模式的彈層。

①基礎(chǔ)層

②詢問層

③頁面層

④Tips層

⑤加載層

⑥prompt層

⑦tab層

⑧相冊層

⑨邊緣彈出

⑩iframe層

API文檔：

http://www.layui.com/doc/modules/layer.html

layer彈層小巧簡單，但功能確一點(diǎn)也不簡單，使用方便、美觀，layer兼容所有現(xiàn)代瀏覽器及IE6+，能夠輕松應(yīng)對各種使用場景，這個組件強(qiáng)烈推舉給大家。寫這篇文章只為讓更多人知道layer，寫得不好的地方，請各位大神輕噴，再次感謝。

紹

ContentTools是一個美觀小巧的網(wǎng)頁內(nèi)容工具（一個JS庫），具備所見即所得（WYSIWYG）的編輯器功能，只需幾個簡單的步驟，即可將ContentTools添加到任何HTML頁面。如下圖所示頁面通過實(shí)時ContentTool的彈出層實(shí)現(xiàn)實(shí)時編輯功能。用小而美來形容它最好不過了！

Github地址

https://github.com/GetmeUK

特性

ContentTools是用于HTML頁面的美觀小巧的內(nèi)容編輯器。它被設(shè)計為：

與框架無關(guān)的庫不使用任何JavaScript框架（沒有JQuery），但可以很好地使用它們。
靈活的ContentTools軟件包由5個庫組成，每個庫或可以獨(dú)立使用。
可擴(kuò)展的軟件包旨在易于擴(kuò)展。
小巧完整的編輯器（JS，CSS，圖像和圖標(biāo)字體）為241kb（壓縮后為49kb）。

功能簡介

ContentTools具有字體加粗、斜體、超鏈接、對齊、列表、表格、圖片、視頻、代碼、撤銷、重做、刪除等功能

1、加粗顯示

2、斜體顯示

3、超鏈接

4、H標(biāo)題

5、正文

6、有序和無序列表

7、插入表格

8、插入圖片

9、視頻

以上截圖中的功能還不完整，如果想體驗(yàn)以下完整的功能可以直接去DEMO頁面體驗(yàn)，如果需要在HTML級別上更改元素的內(nèi)容，那也是可以的。通過屬性對話框中的最后一個選項卡，可以查看所選元素的內(nèi)部HTML代碼并直接對其進(jìn)行更新。

使用

第一步是下載JS，CSS和其他關(guān)聯(lián)的項目文件：

下載倉庫并打開/ build文件夾，包括預(yù)構(gòu)建的源文件。將文件夾的內(nèi)容復(fù)制到項目的適當(dāng)位置（例如，content-tools.min.js> /www/scripts/content-tools.min.js）。但是，/ images文件夾和icons.woff字體需要復(fù)制到與content-tools.min.css相同的文件夾中，文件結(jié)構(gòu)應(yīng)類似于：

HTML

<head>
 <title>My page</title>
 <link rel="stylesheet" type="text/css" href="assets/content-tools.min.css">
 ...
</head>
<body>
 ...
 <script src="assets/content-tools.min.js"></script>
 <script src="assets/editor.js"></script>
</body>

包括一個名為editor.js的附加JS文件。包含初始化我們的編輯器的代碼，繼續(xù)

<div data-editable data-name="main-content">
 <blockquote>
 Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.
 </blockquote>
 <p>John F. Woods</p>
</div>

data-name屬性用于在保存時標(biāo)識區(qū)域（默認(rèn)情況下使用id屬性），標(biāo)記可編輯HTML時，常見的誤解是將單個元素標(biāo)記為可編輯，例如：

<h1 data-editable data-name="heading">Content</h1>

正確的使用方式如下，也就是說必須要在特定的容器元素內(nèi)

<div data-editable data-name=heading>
 <h1>Content</h1>
</div>

準(zhǔn)備CSS

ContentTools使用CSS類來對齊文本，圖像，視頻和iframe，需要在自己的CSS中為這些對齊類定義樣式，例如：

[data-editable] iframe,
[data-editable] image,
[data-editable] [data-ce-tag=img],
[data-editable] img,
[data-editable] video {
 clear: both;
 display: block;
 margin-left: auto;
 margin-right: auto;
 max-width: 100%;
}

/* 左對齊 */
[data-editable] .align-left {
 clear: initial;
 float: left;
 margin-right: 0.5em;
}

/* 右對齊 */
[data-editable].align-right {
 clear: initial;
 float: right;
 margin-left: 0.5em;
}

/* 可編輯區(qū)域中文本的對齊樣式 */
[data-editable] .text-center {
 text-align: center;
}

[data-editable] .text-left {
 text-align: left;
}

[data-editable] .text-right {
 text-align: right;
}

初始化編輯器

ContentTools提供了一個編輯器，但是在初始化它之前，我們需要配置一些東西，即：

我們希望用戶能夠?qū)SS樣式應(yīng)用于元素。
我們希望頁面的區(qū)域是可編輯的。
一種保存我們的內(nèi)容的機(jī)制。
我們可能還會配置圖像處理程序等等

將以下代碼添加到我們之前創(chuàng)建的editor.js文件中：

window.addEventListener('load', function() {
 var editor;

});

配置樣式

就像文字處理程序一樣，可以為內(nèi)容配置一系列預(yù)定義樣式。當(dāng)用戶從視口底部的檢查器欄中選擇標(biāo)簽時，這些標(biāo)簽就會出現(xiàn)。盡管可以將樣式設(shè)置為適用于所有標(biāo)簽，但是僅顯示適用于標(biāo)簽類型的樣式。

我們將添加可應(yīng)用于段落<p>標(biāo)記的單一樣式.author。在var編輯器下方聲明添加：

ContentTools.StylePalette.add([
 new ContentTools.Style('Author', 'author', ['p'])
]);

StylePalette.add方法使我們可以向編輯器添加樣式列表。每種樣式均聲明為一個Style實(shí)例，該實(shí)例使用顯示名稱，CSS類和可以應(yīng)用該樣式的標(biāo)簽列表初始化。我們需要添加相關(guān)的CSS來支持這種樣式，因此在HTML的開頭添加：

<head>
 ...
 <style>
 .author {
 font-style: italic;
 font-weight: bold;
 }
 </style>
</head>

選擇可編輯區(qū)域

接下來，我們需要初始化編輯器，并讓它知道頁面上的哪些元素是可編輯的。為此，將以下代碼添加到editor.js中：

editor=ContentTools.EditorApp.get();
editor.init('*[data-editable]', 'data-name');

我們使用用于頁面可編輯區(qū)域的CSS選擇器和屬性名稱（“數(shù)據(jù)名稱”）來初始化編輯器，以告知編輯器元素的哪個屬性包含其區(qū)域名稱。區(qū)域名稱在同一頁面中必須唯一。

保存更改

最后，我們希望在用戶保存頁面時得到通知，以便我們可以將每個區(qū)域的更新內(nèi)容存儲在文件或數(shù)據(jù)庫中。為此，我們監(jiān)聽由編輯器觸發(fā)的保存事件。在editor.init語句之后，將以下代碼添加到editor.js中：

editor.addEventListener('saved', function (ev) {
 var name, payload, regions, xhr;

 // 檢查是否已更改
 regions=ev.detail().regions;
 if (Object.keys(regions).length==0) {
 return;
 }

 // 保存更改時將編輯器設(shè)置為忙
 this.busy(true);

 // 將每個區(qū)域的內(nèi)容收集到一個FormData實(shí)例中
 payload=new FormData();
 for (name in regions) {
 if (regions.hasOwnProperty(name)) {
 payload.append(name, regions[name]);
 }
 }

 // 將更新內(nèi)容發(fā)送到要保存的服務(wù)器
 function onStateChange(ev) {
 // 檢查請求是否完成
 if (ev.target.readyState==4) {
 editor.busy(false);
 if (ev.target.status=='200') {
 // 保存成功，通知前臺
 new ContentTools.FlashUI('保存成功');
 } else {
 // 保存失敗，通知前臺
 new ContentTools.FlashUI('保存失敗');
 }
 }
 };

 xhr=new XMLHttpRequest();
 xhr.addEventListener('readystatechange', onStateChange);
 xhr.open('POST', '/save-my-page');
 xhr.send(payload);
});

當(dāng)用戶保存頁面時，我們可以使用AJAX將每個區(qū)域的內(nèi)容發(fā)送到服務(wù)器進(jìn)行保存。在瀏覽器中打開頁面，尋找左上方的藍(lán)色編輯按鈕，然后單擊它以開始編輯。

總結(jié)

這樣一個美觀且強(qiáng)大的即時編輯器可謂是非常的實(shí)用，特別是對于一些內(nèi)容編輯網(wǎng)站，如CMS、靜態(tài)文檔網(wǎng)站、博客等內(nèi)容型網(wǎng)站尤其有用，希望對你有所幫助，Enjoy it！

動手封裝。前兩天學(xué)習(xí)了一個新的事件animationEnd，一下子解決了我很多痛點(diǎn)。最近會陸續(xù)封裝一下移動端和pc端用到的小demo，歡迎一起討論。

效果如下：在輸入框輸入文字按“確定”按鈕就彈出輸入的消息提示

實(shí)現(xiàn)代碼：

html:

css:

js:

在線咨詢

上一篇：跟 PronHub 學(xué) Web前端！P站強(qiáng)推 pic
下一篇：nginx的http塊配置項有哪些？

您的項目需求

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

整合營銷服務(wù)商

前端開發(fā)：一款近年非常受歡迎、簡單的WEB彈出層組件

紹

Github地址

特性

功能簡介

使用

總結(jié)

您的項目需求

前端開發(fā)：一款近年非常受歡迎、簡單的WEB彈出層組件