Docking boxes 实现块拖拽移动收缩的JS

对接盒(dbx的)增加了动画拖动’块’下降,对齐网格,显示/隐藏,内容功能的任何元素组。

而我又怎能抗拒重新建立现代时代最标志性接口,以证明它了!

该脚本可以使用的行,列或物体的二维网格,任意大小和形状。正如您期望从brothercake,所有的功能是非常方便的键盘。

Docking boxes (dbx) adds animated drag ‘n’ drop, snap-to-grid, and show/hide-contents functionality to any group of elements.

And how could I resist re-creating one of the most iconic interfaces of modern times to show it off!

The script can work with rows, columns, or two-dimensional grids of objects, of any size and shape. And as you’ve come to expect from brothercake, all the functionality is fully accessible to the keyboard.

Get the script

Download the zipfile [70K] and unzip it into your site directory.

There are two main includes to put in the <head> section of your page — the main dbx script, and the stylesheet:




Then if you’re using either the rules engine or the remote controls, you will also need to include the relevant codebase in the <head> section; it can go anywhere after the main dbx.js script:





Finally, there’s a single script include that should go at the very end of the <body> section, which is the dbx configuration script:


The configuration script contains the object constructors that configure and initialize the dbx manager, and each of the dbx groups you’re using. Putting it at the end of the body is the preferred method, because this avoids the need to use any kind of load wrapper. This consequently also avoids the possibility of a flash of unsorted content, that might otherwise occur in some browsers (the momentary appearance of the boxes in their original order, before any cookie state is applied).

dbx works in the following or later browser versions: Opera 8, Firefox 2, Safari 2, Chrome, Konqueror 3, and Internet Explorer 6. To put this another way, it works in all browsers that support XMLHttpRequest.

If scripting (or this script) is not supported, you’ll get the same HTML and CSS layout, but without dynamic behaviors.

http://www.brothercake.com/site/resources/scripts/dbx/

Leave a Reply