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 網絡卡要設定為 電源啟動...