LayerMobile：輕量級移動端彈層解決方案

一、基本介紹

LayerMobile是一個輕量級的移動端彈層解決方案，其核心是移動端彈層的組件化封裝，依賴jQuery，並使用LESS進行樣式組織。它能夠支持常見的彈出框、提示框、選擇框等，提供豐富的選項和配置，同時易於二次開發和定製，適用於各種移動端場景，性能表現也非常出色。

二、核心功能

1、彈出框：可以在頁面中央、底部、頂部等位置彈出一個盒子，可以設置自定義大小、標題、內容、按鈕等參數。

2、提示框：可以在頁面頂部或底部固定位置彈出一個提示框，可以設置自定義類型、圖標、內容等參數。

3、選擇框：可以彈出一個選擇列表，可以設置自定義數據源、標題、確認、取消等參數。

三、使用說明

1、引入LayerMobile的js和css文件。

<link rel="stylesheet" href="path/to/layermobile.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/layermobile.js"></script>

2、調用LayerMobile的方法並設置相關參數。

layermobile.alert({
    title: '提示', // 彈層標題
    content: '這是一個提示', // 彈層內容
    btn: '確定', // 按鈕文本
    yes: function(){ // 點擊「確定」的回調函數
        // do something
    }
});

3、LayerMobile的API介紹：

a、alert(options)：彈出框。

b、confirm(options)：確認框。

c、msg(options)：提示框。

d、toast(options)：輕提示。

e、loading(options)：載入中。

f、actionsheet(options)：底部菜單。

g、pop(options)：彈層。

h、open(options)：彈窗。

i、close(layero)：關閉彈窗。

四、示例代碼

彈出框：

layermobile.alert({
    title: '提示',
    content: '這是一個提示框。',
    btn: '確定',
    yes: function(){
        console.log('你點擊了確定按鈕！');
    }
});

確認框：

layermobile.confirm({
    title: '確認框',
    content: '你確定要刪除嗎？',
    btn: ['確定', '取消'],
    yes: function(){
        console.log('你點擊了確定按鈕！');
    },
    no: function(){
        console.log('你點擊了取消按鈕！');
    }
});

提示框：

layermobile.msg('這是一個提示框。');

輕提示：

layermobile.toast('這是一個輕提示。');

載入中：

var loadingIndex = layermobile.loading('載入中...');
setTimeout(function () {
    layermobile.close(loadingIndex);
}, 3000);

底部菜單：

layermobile.actionsheet({
    title: '請選擇',
    menus: ['選項1', '選項2', '選項3'],
    cancel: '取消',
    itemClick: function(index){
        console.log('你點擊了第' + (index + 1) + '個選項！');
    },
    cancelClick: function(){
        console.log('你點擊了取消按鈕！');
    }
});

自定義彈層：

var html = '<div class="layer"><p>這是一個自定義的彈層。</p></div>';
layermobile.pop({
    title: false,
    content: html,
    closeBtn: false,
    shadeClose: true
});

自定義彈窗：

var html = '<div class="layer"><p>這是一個自定義的彈窗。</p></div>';
layermobile.open({
    type: 1,
    title: false,
    area: ['80%', '80%'],
    content: html,
    closeBtn: false,
    shadeClose: true
});