亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

移動(dòng)端H5日歷組件，已廢棄不在維護(hù)

Moxmi / 3751人閱讀

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

文檔維護(hù)者：孫尊路

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

適用場(chǎng)景

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

實(shí)例展示

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

示例demo源代碼(H5)：點(diǎn)擊此處進(jìn)行下載

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

【移動(dòng)OA類】 我的日程

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

依賴資源

libs/calendar_base.js 日歷組件基類js庫(kù)

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

配置和使用方法

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

一個(gè)div即可

初始化

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

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

參數(shù)說(shuō)明

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

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

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

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

calendar.refresh();

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

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

參數(shù)說(shuō)明

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

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

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

切換為下一個(gè)月，與組件內(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ù)說(shuō)明

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

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

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

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

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

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

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

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

存在的不足之處

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/94102.html

相關(guān)文章

  • 移動(dòng)端H5周歷組件

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

    incredible 評(píng)論0 收藏0

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

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

    ermaoL 評(píng)論0 收藏0

  • 關(guān)于weex

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

    chadLi 評(píng)論0 收藏0

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

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

    VincentFF 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<