Resizable une div avec spiltter
Bonjour,
Cherchant à effectuer un resize d'une div verticalement, je souhaiterai utiliser un genre de splitter juste en dessous de la div,
la partie resize fonctionne bien mais pas le splitter...
Je me suis aidé de cet exemple : https://codepen.io/rstrahl/pen/eJZQej
Auriez-vous une idée du problème, voici grosso modo le code que j'utilise:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<!-- JQuery UI -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<style>
.resizable
{
width: 600px;
background-color: gray;
min-Height:100;
}
.splitter-horizontal {
flex: 0 0 auto;
height: 18px;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png) center center no-repeat gray;
border: 1px solid #ccc;
cursor: row-resize;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".resizable").resizable({
handles: 's, w',
handleSelector: ".splitter-horizontal"
});
});
</script>
</head>
<body>
<div class="resizable">
texte ...
</div>
<div class="splitter-horizontal"> </div>
</body>
</html> |
Merci d'avance pour votre aide, je précise que je débute avec jquery iu merci pour votre patience... :P
