一、参考网址
http://www.brothercake.com/site/resources/scripts/dbx/
二、网页结构要求
1)最外层容器要求有"dbx-group"类,并且要求有唯一的ID
2)容器内,每个可以拖拽的元素,要有"dbx-box"类
3)"dbx-box"元素内部,通常包含两个部分
a.拖拽手柄(靠"dbx-handle"类来识别) 给该元素添加"dbx-handle"
b.拖拽区域的内容(靠"dbx-content"类来识别) 给内容元素添加"dbx-content"类
三、添加CSS
1、核心CSS 将dbx manual中第二部分的CoreCSS复制,在DW中粘贴,保存为单独的CSS文件,存放到站点下 注意:该核心CSS中的规则,不允许修改,不允许重载
2、根据需要添加用户定制的DBXCSS
四、添加代码
打开dbx manual第三部分“Implementing the script”
1、初始化代码
//initialise the docking boxes manager varmanager = new dbxManager(
'main', // session ID [/-_a-zA-Z0-9/]
'yes', // enable box-ID based dynamicgroups ['yes'|'no']
'yes', // hide source box while dragging['yes'|'no']
'button' // toggle button element type['link'|'button'] );
2、dbxGroup代码
//create new docking boxes group
var purple = new dbxGroup(
'purple', // container ID [/-_a-zA-Z0-9/],将来替换为自己的容器ID
'vertical', // orientation['vertical'|'horizontal'|'freeform'|'freeform-insert'|'confirm'] '7', // drag threshold ['n' pixels]
'no', // restrict drag movement tocontainer/axis ['yes'|'no']
'10', // animate re-ordering [framesper transition, or '0' for no effect] 'yes', // includeopen/close toggle buttons ['yes'|'no'],是否包含打开关闭按钮 'open', // default state ['open'|'closed'] 默认的内容状态,如果选择open则栏目默认打开,如果选择closed,栏目初始关闭
'open', // word for "open", as in "open this box" 以下内容为提示信息,可以根据需要更换为中文
'close', // word for"close", as in "close this box" 'click-down and drag to move thisbox', // sentence for "movethis box" by mouse 'click to%toggle% this box', // pattern-match sentence for"(open|close) this box" by mouse 'use the arrow keys to move thisbox. ', // sentence for"move this box" by keyboard 'press the enter key to %toggle% this box. ', // pattern-match sentence-fragment for"(open|close) this box" by keyboard '%mytitle% [%dbxtitle%]', // pattern-match syntaxfor title-attribute conflicts 'hitthe enter key to select this target', // confirm dialog sentence for "selection okay" 'sorry, this target cannot be selected' // confirm dialog sentence for"selection not okay" );
五、实现栏目展开关闭
1、要确保dbxGroup代码中,第六项为'yes'
2、栏目初始展开状态,由dbxGroup代码第七项决定
3、设置切换按钮(toggle)样式,以便该按钮在dbxhandle中正确定位
1)因为该按钮是dbx handle的子对象,而且具有.dbx-toggle 类名,所以css规则,可以写为:
.dbx-handle.dbx-toggle{ }
通常,该按钮为绝对定位,所以要设置dbx-handle元素为相对定位。
该按钮有两种状态:.dbx-toggle-open .dbx-toggle-closed 所以可以分别设置不同的背景图片,或样式,实现不同状态的按钮外观。
.dbx-toggle-open { background-position:0 0; //背景图片的位置是x=0,y=0 }
.dbx-toggle-closed { background-position:0 -20px; //背景图片的位置是x=0, y=-20px}
4、设置内容的关闭和展开样式
/* 内部内容展开 */.dbx-box-open .dbx-content { }
/* 内部内容关闭 */.dbx-box-closed .dbx-content { }
设置样式时,注意优先级,必要时可以添加!important 通常我们可以给两种状态设置不同的高度,注意关闭高度小于内容时,要添加over-flow:hidden,使其多余内容实现隐藏。
六:具体范例
<div class="dbx-group" id="purple">
<div id="XXXdbx" class="dbx-box " >
<div class=" dbx-handle ">
</div>
</div>
</div>
js引用:参见图例
下载地址:http://download.csdn.net/detail/lanfei12345/6408531