Muuri使用心得

2021-08-25 11:55:29 字數 1831 閱讀 2629

muuri是一款響應式,可排序,可過濾和可拖動的網格布局的外掛程式;

首先使用它要引用(不可以用import方法引用):

web-animations.js||web-animation.min.js

hammer.js||hammer.min.js

muuri.js||murri.min.js

記住最後呼叫的js檔案最先引用,引入muuri前必須先引用hammer(不然會發生hammer未定義的錯誤)

有些框架可能會發生引入js錯誤,引入muuri錯誤或提示muuri未定義則刪除如圖兩行。(murri.js)

引入hammer未定義問題需要刪除如圖紅框內(hammer.js檔案最後),注意大中小括號,以免出現語法錯誤。

我主要使用了他的kanban樣式。

以下是kanban樣式的js**:

document.addeventlistener('domcontentloaded', function () );

itemcontainers.foreach(function (container) ,

dragsortinterval: 0,

dragcontainer: document.body,

dragreleaseduration: 400,

dragreleaseeasing: 'ease'

}).on('dragstart', function (item) )

.on('dragend', function (item)

}).on('dragreleaseend', function (item) );

}).on('layoutstart', function () );

columngrids.push(muuri);

});boardgrid = new muuri(board, ,

dragreleaseduration: 400,

dragreleaseeasing: 'ease'

});});

css**(自己根據需求改了一些,和官網不太一樣):

.board 

.board-column

.board-column.muuri-item-releasing

.board-column.muuri-item-dragging

.board-column-header

@media (max-width: 600px)

}.board-column.todo .board-column-header

.board-column.working .board-column-header

.board-column.done .board-column-header

.board-column-content

.board-item

.board-item.muuri-item-releasing

.board-item.muuri-item-dragging

.board-item.muuri-item-hidden

.board-item-content

@media (max-width: 600px)

.board-item-content span

}

frameset 使用心得

欲明白本篇 html徹底剖析 之標記分類,請看 標記一覽 也請先明白圍堵標記與空標記的分別,請看 html概念 框架概念 謂框架便是網頁畫面分成幾個框窗,同時取得多個 url。只需要 即可,面所有框架標記需要放在乙個總起的 html 檔,這個檔案只記錄了該框架如何分割 不會顯示任何資料,所以不必放入...

Access使用心得

今天臨時用access做資料庫,長期用sql server開發習慣了,總結一下現在為止用到的比較大的差異,以後有新的再補了 1 返回字串長度 len s lenb s 前者返回字元數,後者返回位元組數,並且access中text型別字元統一為2位元組,與sql2000不同。2 join的使用 acc...

vmware使用心得

成功在winxp環境中安裝了vista business版本,反之,亦然。可以建立工作組網路連線了,虛擬機器也可以訪問網際網路了。安裝說明 在安裝嚮導中,無論使用哪種網路連線形式,都不影響正確安裝。安裝後,可以編輯本地機和虛擬機器之間的網路連線形式。需要注意三個細節問題 1 網絡卡要設定為 電源啟動...