Créer un splitter avec jquery ui

Le splitter est un élément qui permet de séparer deux colonnes ou lignes et en cliquant sur ce séparateur on peut le déplacer. Ce qui a pour effet d’agrandir et réduire les deux colonnes (ou lignes). Voici comment les mettre en place…

Pour cela, on va utiliser « resizable »de jquery ui comme ça a pu être mis en place sur ce site : http://www.aidstar-one.com/sites/all/modules/jquery_ui/jquery.ui/demos/real-world/splitpane/

Il faut déjà appeler les lib jquery :

<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-1.0.0.min.js"></script>

Puis les lib jquery ui « core » et « resizable » :

<script src="js/ui.core.js"></script>
<script src="js/ui.resizable.js"></script>

On met en place les divs dans un tableau, mais ce sont les divs les plus importants :

<div id="wrapper">
        <table id="container">
            <tr>
                <td class="ui-split-side-box">
				<div class="ui-split-side">
                                    cchkgchg gv</div>
                </td>
                <td class="ui-split-main-box">
                    <div class="ui-split-main1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum commodo mollis tortor. Ut dapibus turpis consequat quam. Nulla lacinia. Donec nunc. Donec sollicitudin. Vivamus orci. Pellentesque tempus velit vitae odio. Maecenas enim arcu, volutpat ac, viverra id, bibendum eu, felis. Vestibulum imperdiet arcu. Ut nisi. Cras vel lectus consectetuer mauris luctus ultrices. Duis fringilla pellentesque sapien.
</div>
                </td>
                <td class="ui-split-main-box">
                    <div class="ui-split-main2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum commodo mollis tortor. Ut dapibus turpis consequat quam. Nulla lacinia. Donec nunc. Donec sollicitudin. Vivamus orci. Pe</div>
                </td>
                <td class="ui-split-main-box">
                    <div class="ui-split-main3">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum commodo mollis tortor. Ut dapibus turpis consequat quam. Nulla lacinia. Donec nunc. Donec sollicitudin. Vivamus orci. Pe</div>
                </td>
            </tr>
        </table>
        </div>

Un peu de mise en forme :

<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}

#container {
    height: 500px;
    border: 5px solid #E8EEF7;
    padding: 0px;
}
#container table, #container tbody, #container tr {
    margin: 0;
    padding: 0;
}
#container td {
    overflow: hidden;
}
#container td div {
    overflow: hidden;
    padding: 0 15px 0 10px;
    background: #fff;
    height:475px;
    font-size: 90%;
}
#container .ui-split-side-box {
    width: 200px;

}

#container .ui-split-side {
    overflow: hidden;
}
#container .ui-split-side ul {
    margin: 0; padding: 0; padding-top: 3px;
}
#container .ui-split-side li {
    margin: 0; padding: 0;	border: 0; outline: 0;
    list-style: none;
}
#container .ui-split-side li a {
    height: 15px;
    display:block;
    padding: 3px 3px 3px 12px;
    border-bottom: 1px solid #E8EEF7;
    color: #000;
    font-size: 90%;
    text-decoration: none;
}
#container .ui-split-side li a:hover {
    background: #E8EEF7;

    border-color: #C3D9FF;
}
#container .ui-split-side {
    background-color: #E8EEF7;
}

#container .ui-resizable-e {
    padding: 0;
    width: 1px;
}

div#ui-split-main1 {
    /*background:#000 url(handle.png) no-repeat right center;*/
    background-color: red;
    width: 100px;
    height: 50px;
}
#ui-split-main2 {
    background-color: #00b4cc;
    width: 1000px;
    height: 50px;
}
#ui-split-main3 {
    background-color: #00b4cc;
    width: 1000px;
    height: 50px;
}
#ui-split-side {
    background-color: #600;
    width: 1000px;
    height: 50px;
 }
</style>

Et enfin le plus important, le js qui permet de faire fonctionner le splitter et de prendre toute la hauteur de la fenêtre :

<script type="text/javascript">
        <!--
$(document).ready(function(){
$(function() {

		$('div.ui-split-main1, div.ui-split-main2').resizable({
			handles: 'e',
			minWidth: 200,
			maxWidth: 800
		});

		$('div.ui-split-side').resizable({
			handles: 'e',
			proxy: 'proxy',
			//minWidth: 200,
			maxWidth: 300
		});

                var s = $('.ui-resizable-e').attr('style');
                $('.ui-resizable-e').attr('style', s + 'width:1px;');

                $(window).bind('resize', function (e){
                    var h = $(window).height ();
                    h = h-10;
                    $('div.ui-split-main1, div.ui-split-main2, .ui-split-side').height(h);
                }).trigger('resize');

	});

});
</script>

Maintenant essayons de comprendre rapidement ce qui est important dans ce code.

le handle nous informe du sens du « resize » avec « e :

handles: 'e',

Toute cette partie permet d’avoir une hauteur plein pot tout le temps même si « resize » la fenêtre :

$(window).bind('resize', function (e){
                    var h = $(window).height ();
                    h = h-10;
                    $('div.ui-split-main1, div.ui-split-main2, .ui-split-side').height(h);
}).trigger('resize');

Après toute le reste n’est que mise en forme. 🙂