資訊專欄INFORMATION COLUMN
摘要：默認(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)很多示例也沒有一個(gè)標(biāo)準(zhǔn)的使用文檔，感覺用起來(lái)也吃力，于是乎，自己造了一個(gè)周歷組件，文章下面有很詳細(xì)的使用說(shuō)明。 本篇結(jié)合了實(shí)際的項(xiàng)目應(yīng)用需求整理出來(lái)的，該文檔后面會(huì)持續(xù)優(yōu)化更新。若有不足，也請(qǐng)大家多多指教，小編會(huì)及時(shí)更正！
實(shí)例展示周歷示例演示，支持上一周、下一周切換等效果 注：按F12可在瀏覽器預(yù)覽
示例demo源代碼(H5)：點(diǎn)擊此處進(jìn)行下載
典型項(xiàng)目應(yīng)用案例【移動(dòng)OA類】 我的日志
依賴資源libs/calendar_base_week.js 周歷組件基類js庫(kù)，可以根據(jù)業(yè)務(wù)需求，任意個(gè)性化，從而達(dá)到設(shè)計(jì)視覺效果
配置和使用方法DOM結(jié)構(gòu)
一個(gè)div即可
初始化
以下代碼是最簡(jiǎn)單的用法，更多復(fù)雜用法請(qǐng)參考calendarweek_showcase源碼下載
var weekcalendar = new CalendarWeek({
// 默認(rèn)周歷組件容器
"container": "#weekcalendar",
// 點(diǎn)擊日期事件
"onItemClick": function(item) {
console.log(item.date + " " + item.week);
},
isDebug: false
});
參數(shù)說(shuō)明
| 參數(shù) | 參數(shù)類型 | 說(shuō)明 |
|---|---|---|
| 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 |
| 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 |
| template | Function或String | 可選，元素渲染的模板，可以是一個(gè)模板字符串，也可以是一個(gè)函數(shù)，為函數(shù)時(shí)，確保返回模板字符串，默認(rèn)組件內(nèi)置模板 |
| isDebug | Boolean | 可選是否開啟調(diào)試模式，默認(rèn)false |
生成的weekcalendar對(duì)象可以調(diào)用如下API
var weekcalendar = new CalendarWeek(...);refresh()
外部刷新方法，重洗渲染當(dāng)前周的列表數(shù)據(jù)。
weekcalendar.refresh();slidePrev()
切換為上一周，與組件內(nèi)部傳入?yún)?shù)pre作用一樣，該API支持Promise異步成功回調(diào)里處理自己的業(yè)務(wù)邏輯。
weekcalendar.slidePrev().then(...).then(...);slideNext()
切換為下一周，與組件內(nèi)部傳入?yún)?shù)next作用一樣，該API支持Promise異步成功回調(diào)里處理自己的業(yè)務(wù)邏輯。
weekcalendar.slideNext().then(...).then(...);優(yōu)點(diǎn)和好處
能夠極大方便實(shí)際項(xiàng)目上開發(fā)人員的上手使用，而且版本是不斷根據(jù)實(shí)際項(xiàng)目上的需求進(jìn)行優(yōu)化升級(jí)的，開放源碼可以讓特殊需求的項(xiàng)目開發(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://systransis.cn/yun/94491.html
摘要：手把手教你做個(gè)人火的時(shí)候，隨便一個(gè)都能賺的盆滿缽滿，但是，個(gè)人沒有服務(wù)端，沒有美工，似乎就不能開發(fā)了，真的是這樣的嗎秘密花園經(jīng)典的中文手冊(cè)。涵蓋前端知識(shí)體系知識(shí)結(jié)構(gòu)圖書推薦以及入門視頻教程，全的簡(jiǎn)直不要不要的了。 JavaScript 實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制指定區(qū)域文本 html5 的 webAPI 接口可以很輕松的使用短短的幾行代碼就實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制區(qū)域文本的功能，不需要依賴 flash。...
摘要：謝耳朵愛玩的游戲，石頭剪子布的升級(jí)版。擁有最高點(diǎn)數(shù)的玩家獲勝，其點(diǎn)數(shù)必須等于或低于點(diǎn)。在編寫這個(gè)游戲的過(guò)程中第一次引入了類概念。宇宙空間中微小的摩擦力和隕石撞擊后受到的力，都要考慮并且編入游戲中。 人人都應(yīng)該學(xué)編程嗎？隨著每個(gè)人的工作與電腦連結(jié)愈發(fā)緊密，也許這是真的。 我是游戲設(shè)計(jì)師，在分工細(xì)致的國(guó)內(nèi)網(wǎng)游業(yè)界，不需要研發(fā)或美術(shù)背景也能擔(dān)當(dāng)游戲設(shè)計(jì)重任的角色多了起來(lái)。有時(shí)候他們甚至只需...
摘要：移動(dòng)端報(bào)表使用方法安裝好插件后，在瀏覽器中調(diào)用時(shí)，需要在報(bào)表路徑后面加上參數(shù)。另外移動(dòng)端的插件，圖表是只支持顯示新圖表。 HTML5報(bào)表插件安裝及使用編輯 插件安裝插件網(wǎng)址以及設(shè)計(jì)器插件安裝方法和服務(wù)器安裝插件的方法可以官網(wǎng)上面搜索，這里就不做詳細(xì)介紹了。 移動(dòng)端HTML5報(bào)表使用方法安裝好插件后，在瀏覽器中調(diào)用時(shí)，需要在報(bào)表路徑后面加上參數(shù)op=h5。但是PC端不完全支持H5效果。移...
閱讀 1786·2023-04-26 01:41
閱讀 3085·2021-11-23 09:51
閱讀 2749·2021-10-09 09:43
閱讀 9064·2021-09-22 15:13
閱讀 2464·2021-09-07 09:59
閱讀 2636·2019-08-30 15:44
閱讀 1141·2019-08-30 12:45
閱讀 2628·2019-08-30 12:43
