成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動端H5日歷組件，已廢棄不在維護

Moxmi / 3619人閱讀

摘要：默認(rèn)可選回調(diào)函數(shù)，綁定業(yè)務(wù)數(shù)據(jù)。例如某天有日程，則會在對應(yīng)日期上標(biāo)識出一個小紅點或者其他標(biāo)識，默認(rèn)傳入數(shù)據(jù)格式必選回調(diào)函數(shù)，當(dāng)你點擊或輕觸某日期后執(zhí)行。

文檔維護者：孫尊路

喜歡的話，記得star 一下噢！

適用場景

該組件目前僅適用于移動端H5頁面展示，后期高級用法中會講述到如何基于日歷基類實現(xiàn)自定義模板傳入。（即：開發(fā)者只需要傳入自己的模板即可實現(xiàn)出自己的優(yōu)美的日歷出來。） 本篇主要是帶大家入門日歷組件的使用，該文檔后面會持續(xù)優(yōu)化更新。若有不足，請大家多多指教，小編會及時更正！

實例展示

日歷示例演示，支持滑動屏幕左右切換等效果 注：按F12可在瀏覽器預(yù)覽

示例demo源代碼(H5)：點擊此處進行下載

典型項目應(yīng)用案例

【移動OA類】 我的日程

【招投標(biāo)類】 開標(biāo)日程

依賴資源

libs/calendar_base.js 日歷組件基類js庫

libs/calendar_base.css 日歷組件基類css庫，可以根據(jù)業(yè)務(wù)需求，任意個性化，從而達到設(shè)計視覺效果

配置和使用方法

DOM結(jié)構(gòu)

一個div即可

初始化

以下代碼是最簡單的用法，更多復(fù)雜用法請參考calendar_showcase源碼下載

var calendar = new Calendar({
    // 日歷容器
    container: "#calendar",
    // 點擊日期事件
    onItemClick: function(item) {
        var defaultDate = item.date;
    }
});

參數(shù)說明

參數(shù) 參數(shù)類型 說明
container string或HTMLElement 必選 Calendar容器的css選擇器，例如“#calendar”。默認(rèn)為#calendar
pre string或HTMLElement 可選 前一個月按鈕的css選擇器或HTML元素。默認(rèn).pre
next string或HTMLElement 可選后一個月按鈕的css選擇器或HTML元素。默認(rèn).next
backToToday string或HTMLElement 可選 返回今天按鈕的css選擇器或HTML元素。默認(rèn).backToToday
dataRequest Function 可選 回調(diào)函數(shù)，綁定業(yè)務(wù)數(shù)據(jù)。例如：某天有日程，則會在對應(yīng)日期上標(biāo)識出一個小紅點或者其他標(biāo)識，默認(rèn)傳入數(shù)據(jù)格式：data=[{"date":"2018-04-18"},{"date":"2018-04-17"},{"date":"2018-04-16"}]
onItemClick Function 必選 回調(diào)函數(shù)，當(dāng)你點擊或輕觸某日期 300ms后執(zhí)行?；卣{(diào)日期結(jié)果：2018-04-07
swipeCallback Function 可選 回調(diào)函數(shù)，滑塊釋放時如果觸發(fā)slider向后(左、上)切換則執(zhí)行
template Function或String 可選，元素渲染的模板，可以是一個模板字符串，也可以是一個函數(shù)，為函數(shù)時，確保返回模板字符串，默認(rèn)組件內(nèi)置模板
isDebug Boolean 可選是否開啟調(diào)試模式，默認(rèn)false
API

生成的calendar對象可以調(diào)用如下API

var calendar = new Calendar(...);
refresh()

會銷毀清空日歷容器中的數(shù)據(jù)重新進行渲染。默認(rèn)傳入?yún)?shù)為空，刷新當(dāng)前月份的日歷數(shù)據(jù)。

calendar.refresh();

同時也可以手動傳入某個日期渲染日歷數(shù)據(jù)，例如：渲染出2020-08-08的日歷如下：

calendar.refresh({
    year: "2020",
    month: "08",
    day: "08"
});

參數(shù)說明

參數(shù) 參數(shù)類型 說明
{} object 必選 日期對象必須傳入以下格式：{year:"2018",month:"04",day:"08"}
slidePrev()

切換為上一個月，與組件內(nèi)部傳入?yún)?shù)pre作用一樣，該API支持Promise異步成功回調(diào)里處理自己的業(yè)務(wù)邏輯。

calendar.slidePrev().then(...).then(...);
slideNext()

切換為下一個月，與組件內(nèi)部傳入?yún)?shù)next作用一樣，該API支持Promise異步成功回調(diào)里處理自己的業(yè)務(wù)邏輯。

calendar.slideNext().then(...).then(...);
addActiveStyleFordate()

給特定日期新增選中激活樣式,比如：把日期2018-08-21標(biāo)記位已選中狀態(tài)。

calendar.addActiveStyleFordate("2018-08-21");

參數(shù)說明

參數(shù) 參數(shù)類型 說明
"2018-08-21" String 必選 日期格式必須符合以下格式：2018-08-21
refreshData()

會獲取整個月的日歷數(shù)據(jù)（6 * 7 = 42方格的日期），可根據(jù)該API自行個性化開發(fā)自己的日歷組件，例如：

calendar.refreshData({
    year: "2018",
    month: "04",
    day: "08"
},
function(output, data) {
    console.log("==某個月的日歷渲染數(shù)據(jù)：==" + JSON.stringify(data));
    console.log("==組件自帶模板==" + output);
});

輸出日歷數(shù)據(jù)格式：

[{"day":25,"lunar":"初九","date":"2018-03-25","isforbid":"0"}]

輸出內(nèi)置組件模板格式：

25
初九
優(yōu)點和好處

能夠極大方便實際項目上開發(fā)人員的上手使用，而且版本是不斷根據(jù)實際項目上的需求進行優(yōu)化升級的，開放源碼可以讓特殊需求的項目開發(fā)人員進行修改、補充和完善。

存在的不足之處

目前依賴js庫有多個（mustache.min.js、mui.min.js）主要是一些常用的移動端js庫（無可厚非），包含組件的核心庫，或許有人認(rèn)為影響加載速度之類的，其實已經(jīng)有很多項目在應(yīng)用效果還可以，當(dāng)然了小編也正在努力剝離第三方j(luò)s庫,思路已經(jīng)有了，只不過需要一點時間進行代碼重構(gòu)，若在此之前給你帶來的不便，還請多多包涵，畢竟優(yōu)化組件確實需要花費大量時間的。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94102.html

相關(guān)文章

  • 移動端H5周歷組件

    摘要：默認(rèn)可選回調(diào)函數(shù)，綁定業(yè)務(wù)數(shù)據(jù)。切換為下一周，與組件內(nèi)部傳入?yún)?shù)作用一樣，該支持異步成功回調(diào)里處理自己的業(yè)務(wù)邏輯。 文檔維護者：孫尊路 喜歡的話，記得star 一下噢！ 適用場景 前些陣子，寫了一篇《日歷組件實現(xiàn)》的使用在線文檔，遇到一個需求：實現(xiàn)一個H5周歷來填寫每周的工作日志，去網(wǎng)上查閱資料，發(fā)現(xiàn)很多示例也沒有一個標(biāo)準(zhǔn)的使用文檔，感覺用起來也吃力，于是乎，自己造了一個周歷組件，文...

    incredible 評論0 收藏0

  • 精彩文章大合集- 收藏集 - 掘金

    摘要：發(fā)布應(yīng)用市場的平臺搶紅包工具紅包精靈開源啦掘金紅包精靈，如果喜歡，點個開源不易。作者將原素材文章進行了新內(nèi)容的添加和重新排列，但是因為文章高效的代碼編寫技巧總結(jié)前端掘金本文總結(jié)了代碼編寫技巧，來提升你的和代碼。 收藏安卓開發(fā)中非常實用優(yōu)秀的庫! 有圖有真相! - Android - 掘金本來是打算收藏工具類的,但轉(zhuǎn)念一想,已經(jīng)有這么多優(yōu)秀的庫了,就沒必要再去重復(fù)造輪子了,便歸納工作中比...

    ermaoL 評論0 收藏0

  • 關(guān)于weex

    摘要：在最上面的，阿里一般稱之為文件，通過轉(zhuǎn)換成，再部署到服務(wù)器，這樣服務(wù)端就完成了。例如，通過安裝了業(yè)界的工具庫用上和如今前端的開發(fā)，一般離不開預(yù)處理器，比如和。在默認(rèn)的文件中，即使有的助力，這類預(yù)處理器也是對其無能為力的。 生命周期 module.exports = { data: {}, methods: {}, init: function () { ...

    chadLi 評論0 收藏0

  • H5 input[type='date'] 優(yōu)化 pc端和移動端的使用

    標(biāo)簽在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url新屬性。本篇記錄在開發(fā)中使用date屬性，遇到的一些問題，以及功能擴展： 獲取當(dāng)前日期，并顯示在input[type=date]上 html: js: $(function(...

    VincentFF 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<