Resizable une div avec spiltter

**dominos** · 31/01/2019, 16h46

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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">&nbsp;</div>
 
</body>
</html>

Merci d'avance pour votre aide, je précise que je débute avec jquery iu merci pour votre patience...

**Toufik83** · 31/01/2019, 18h09

Et si t'enlève le <a> qui est dans la propriété background du splitter ?

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

 background: url("https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png") center center no-repeat gray;

**dominos** · 31/01/2019, 18h33

Merci mais c'est juste une erreur de saisie du post, ce que je cherche à faire c'est juste associé l'action resizable au splitter..

**Toufik83** · 31/01/2019, 18h51

je viens de tester l'exemple sur chrome et firefox, mais apparemment ça ne fonctionne que SI le curseur est en mode n-resize ou e-resize (voir l'image ci-dessous)
Pièce jointe 446518
Pièce jointe 446521

**dominos** · 31/01/2019, 19h10

Oui c'est normal celui de la div pas du splitter..

**NoSmoking** · 31/01/2019, 19h12

Bonjour,
j'ai quand même un doute, quand est-ce que tu charges le code du plugin ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>

**Toufik83** · 31/01/2019, 20h57

Je crois que j'ai trouvé la bonne réponse.
NE PAS CHARGER JQUERY-UI, il faut charger seulement jQuery (de préférence la dernière version) + le script jquery-resizable

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
  <!-- jQuery la version 3 -->
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<!--jquery-resizable -->
 <script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>

**dominos** · 31/01/2019, 21h50

Vraiment merci pour vos réponses et vos idées, en fait finalement j'ai trouvé seul, il suffit d'ajouter cette class css ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.ui-resizable-s { 
    cursor: s-resize; 
    background: url("https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png") center center no-repeat #eee;
    padding: 10px; 
}

Bonne soirée, et encore merci.

**NoSmoking** · 01/02/2019, 06h44

A l'avenir tâche de faire preuve de cohérence si tu veux une aide efficace, tu nous montres un exemple qui se base sur le plugin

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
/*
jquery-resizable
Version 0.32 - 5/5/2018
© 2015-2018 Rick Strahl, West Wind Technologies
www.west-wind.com
Licensed under MIT License
*/

et tu résous ton problème lié au plugin

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*
 * jQuery UI Resizable 1.8.9
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Resizables
 *
 * Depends:
 *	jquery.ui.core.js
 *	jquery.ui.mouse.js
 *	jquery.ui.widget.js
 */

Resizable une div avec spiltter [UI]

jQuery

Vue hybride

Discussions similaires

Partager

Partager