JQuery Partition Plugin
Author: S.Cooray
This is a simple plugin to make an html partition editor widget.
Working on FF 3+, Chrome 5+, IE 7+, Safari
Download v0.2
Example
onDrag Callback Example
- Block 1: %
- Block 2: %
- Block 3: %
- Block 4: %
Usage/Code
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.partition.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#partition').partition();
});
</script>
<!-- code in body -->
<body>
...
<div id="partition"></div>
...
</body>
<script type="text/javascript" src="jquery.partition.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#partition').partition();
});
</script>
<!-- code in body -->
<body>
...
<div id="partition"></div>
...
</body>
Parameters Usage/Code
$(document).ready(function(){
$('#partition').partition({
height: 20,
width: 500,
values: [25,25,25,25],
onDrag: function(values){ show(values); },
});
});
$('#partition').partition({
height: 20,
width: 500,
values: [25,25,25,25],
onDrag: function(values){ show(values); },
});
});
Parameters
| Parameter Name | Description | Default Values |
| values | Partitions value (indicated in percentage) | [ 25, 25, 25, 25] |
| colors | Color of the bars of the rappresenting paritions ( usefull for a legend ) | [ "red", "blue", "black", "green"] |
| height | height of the partition bars (pixel) | 20 |
| width | width of the widget (pixel) | 500 |
| cursorBackgroundColor | Internal color of the cursors | #e6e6e6 |
| cursorBorderColor | Border color of the cursors | #d4d4d4 |
| onCursorStop | callback function executed when a cursor drag stops [function parameters: actual values] |
null |
| onDrag | callback function executed when a cursor is dragged (continuosly while moving) [function parameters: actual values] |
null |
| onInit | callback function executed when the widget is initialized [function parameters: actual values] |
null |