Draggable Divider Bar (DDBar) Javascript Package
User Guide
User Guide
To use DDBar package, you need the following two lines to include its CSS and js files inside the head part of your web page like:
<head> ...... <link rel="stylesheet" href="css/ddbar.css" type="text/css" /link> <script type="text/javascript" src="js/ddbar.js" /script> ...... </head>
The ddbar.js file has been compressed to a much smaller version ddbar_min.js. The version requires character set iso-8859-1. For small foot print, DDBar source file ddbar.js can be replaced with ddbar_min.js and so the following three lines can replace the previous two lines:
<head> ...... <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="css/ddbar.css" type="text/css" /link> <script type="text/javascript" src="js/ddbar_min.js" /script> ...... </head>
DDBar package has two functions: divideV and divideH, responsible for the creation of vertical and horizontal draggable divider bars, respectively. They both have the last argument to receive a setting object containing a collection of options for the divider bar and partition elements. In your javascript codes, you create divider bars by calling these functions. The next line will vertically divide element with id='area' into two partition elements with id='left' and id='right'.
DDBar.divideV('area','left','right');
With the next two lines, you can further vertically divide element with id='left' into two partition elements with id='left1' and id='right1' and horizontally divide element with id='right' into two partition elements with id='rightTop' and id='rightBottom'.
DDBar.divideV('left','left1','right1');
DDBar.divideH('right','rightTop','rightBottom');
DDBar package create divider bar to divide html element into two partition elements and the created divider bar can be dragged to resize the partition elements. When a divider bar resizes its two partition elements, DDBar codes will raise RESIZE event to both partition elements. You can listen to RESIZE event by assigning your event handler function to partition element's onresize attribute.
Multiple divider bars can be nested on a web page, When a divider bar resizes a partition element and the partition element is further divided into sub- partition elements. The sub-partition element might also receive RESIZE event since its size could be changed at the same time.
create a vertical divider bar to divide a html element into two partitions: left element and right element.
id of the html element to be divided. This parent html element must exist before calling this function. Its width and height must be given already.
id for the html element that will locate on the left side of the divider bar. The left element can exist before calling this function. Otherwise it will be created together with the divider bar. If it existed, this function could change its CSS properties like position, top, bottom, left, right, width, and height, to give it correct location and size.
id for the html element that will locate on the right side of the divider bar. The right element can exist before calling this function. Otherwise it will be created together with the divider bar. If it existed, this function could change its CSS properties like position, top, bottom, left, right, width and height, to give it correct location and size.
This is optional argument and is a DDBarVSettings object containing a collection of parameters for the divider bar and partition elements.
A positive integer value to specify the distance from parent element's left side to left side of the divider bar after it was created. When it is given a zero value, divider bar's left side will be at the center of the parent element. The default value is zero.
A positive integer value to specify the width of the divider bar in pixel unit. The default value is 12.
A CSS class name that will be passed to class attribute of the divider bar to be created. DDBar package will decide location and size of the divider bar, the CSS rules inside this class should not change position, top, bottom, left, and right properties. Basically, this CSS class is used to determine background and border only.
There are six pre-defined CSS classes for divider bar in ddbar.css file. One of them ddbar_v_default will be used by default. You can follow these classes to create your own styles for the divider bar.
A positive integer value to specify the minimal width of the left element while user is drag the divider bar. That is, user can not drag the divider bar into this width from parent element's left side. Because the divider bar's initial location can not be within this width eighth, the initial location value should be greater than this value, otherwise DDbar will do nothing but issue a warning message. The default value is 10.
A positive integer value to specify the minimal width of the right element while user is dragging the divider bar. That is, user can not drag the divider bar into this width from parent element's right side. Because the divider bar's initial location can not be within this width either, the initial location value should be not smaller than parent element's width minus this value, otherwise DDbar will do nothing but issue a warning message. The default value is 10.
A CSS class name that will be passed to class attribute of the left element when it is created. The default value is empty string. Since DDBar package will decide location and size of the left element, so the CSS rules inside the class should not change position, top, bottom, left, right, width and height properties. Basically, the CSS class is used to determine background and border only. If the left element existed before calling this function, the parameter will be ignored. You can assign class name to the element in your codes outside DDbar package.
A CSS class name that will be passed to class attribute of the right element when it is created. The default value is empty string. Since DDBar package will decide location and size of the right element, so the CSS rules inside the class should not change position, top, bottom, left, right, width and height properties. Basically, the CSS class is used to determine background and border only. If the right element existed before calling this function, the parameter will be ignored. You can assign class name to the element in your codes outside DDbar package.
create a horizontal divider bar to divide a html element into two partitions: top element and bottom element.
id of the html element to be divided. This parent html element must exist before calling this function. Its width and height must be given already.
id for the html element that will locate on top of the divider bar. The top element can exist before calling this function. Otherwise it will be created together with the divider bar. If it existed, this function could change its CSS properties like position, top, bottom, left, right, width, and height, to give it correct location and size.
id for the html element that will locate under the divider bar. The bottom element can exist before calling this function. Otherwise it will be created together with the divider bar. If it existed, this function could change its CSS properties like position, top, bottom, left, right, width and height, to give it correct location and size.
This is optional argument and is a DDBarHSettings object containing a collection of parameters for the divider bar and partition elements.
A positive integer value to specify the distance from parent element's top to the top of the divider bar after it was created. When it is given a zero value, divider bar's top will be at the middle of the parent element. The default value is zero.
A positive integer value to specify the height of the divider bar in pixel unit. The default value is 12.
A CSS class name that will be passed to class attribute of the divider bar to be created. DDBar package will decide location and size of the divider bar, the CSS rules inside this class should not change position, top, bottom, left, and right properties. Basically, this CSS class is used to determine background and border only.
There are six pre-defined CSS classes for divider bar in ddbar.css file. One of them ddbar_h_default will be used by default. You can follow these classes to create your own styles for the divider bar.
A positive integer value to specify minimal height of the top element while user is dragging the divider bar. That is, user can not drag the divider bar into this height under parent element's top. Because the divider bar's initial location can not be within this height either, the initial location value should be greater than this value, otherwise DDbar will do nothing but issue a warning message. The default value is 10.
A positive integer value to specify minimal height of the bottom element while user is dragging the divider bar. That is, user can not drag the divider bar into this height above parent element's bottom. Because the divider bar's initial location can not be within this height either, the initial location value should be not smaller than parent element's height minus this value, otherwise DDbar will do nothing but issue a warning message. The default value is 10.
A CSS class name that will be passed to class attribute of the top element when it is created. The default value is empty string. Since DDBar package will decide location and size to the top element, the CSS rules inside this class should not change position, top, bottom, left, right, width and height properties. If the top element existed before calling this function, this parameter will be ignored. You can assign CSS class name to the element in your codes outside DDBar package.
A CSS class name that will be passed to class attribute of the bottom element when it is created. The default value is empty string. Since DDBar package will decide location and size to the bottom element, the CSS rules inside this class should not change position, top, bottom, left, right, width and height properties. If the bottom element existed before calling this function, this parameter will be ignored. You can assign CSS class name to the element in your codes outside DDBar package.