web-dev-qa-db-fra.com

Une mise en page complète avec des volets redimensionnables à l'aide de l'interface utilisateur jQuery

J'essaie de créer la mise en page globale d'une webapp. L'application est en plein écran et a un en-tête fixe et trois colonnes/volets. Le volet central se compose de deux lignes:

app wireframe layout

Les volets doivent être redimensionnables en faisant glisser les bords du volet avec la souris (voir les flèches dans l'image ci-dessus).

Les volets individuels doivent avoir des barres de défilement verticales en cas de contenu débordant, c'est-à-dire aucune barre de défilement de la fenêtre du navigateur global.

En utilisant jQuery et jQuery UI Resizable, j'ai créé ceci (partiellement fonctionnel) JSFiddle .

HTML:

<div class="header">
  Fixed header    
</div>
<div class="wrapper">
   <div class="inner-wrapper">
       <div class="left pane">Left</div>
       <div class="center pane">
           <div class="inner">
               <div class="top">Center top</div>
               <div class="bottom">Center bottom</div>
           </div>
       </div>
       <div class="right pane">Right</div>
   </div>
</div>

CSS:

html, body {
    height: 100%;
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background-color: moccasin;  
}
.wrapper {
    position:absolute;
    top: 21px;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: Fuchsia;
}
.inner-wrapper,
.center.pane .inner {
    display: table;
    width: 100%;
    height: 100%;
}
.pane {
    display: table-cell;
}
.left.pane {
   background-color: olivedrab; 
}
.center.pane {
    background-color: lightblue;
}
.center.pane .inner .top,
.center.pane .inner .bottom{
    display: table-row;  
}
.center.pane .inner .top {
    background-color: lightcoral;   
}
.center.pane .inner .bottom {   
    background-color: orange;
    height: 100%;
    width: 100%;
}
.right.pane {
    background-color: #999;
}

JavaScript:

$(function () {
    $(".left.pane").resizable({
        handles: "e, w"
    });
    $(".right.pane").resizable({
        handles: "e, w"
    });
    $(".center.pane .inner .bottom").resizable({
        handles: "n, s"
    });
});

Il présente plusieurs problèmes, notamment:

  • Lors du redimensionnement de la gauche, la droite est également redimensionnée (ce qui ne devrait pas être le cas)
  • Lors du redimensionnement de la gauche vers la pleine largeur, le contenu central est masqué sous la droite
  • Lors du redimensionnement à droite, l'emballage (de couleur fuchsia) est partiellement visible
  • Le bas du centre est redimensionné par le haut du haut du centre, pas par son propre haut

Je connais le plugin jQuery Layout, mais pour autant que je sache, il n'offre pas tout à fait la mise en page que je recherche. Aussi, je veux que ce soit aussi simple que possible.

De plus, j'ai essayé le plugin Splitter Methvins, mais je n'ai pas pu le faire fonctionner.

Ma question:

Toutes les suggestions sur la façon de créer une mise en page comme dans l'image de jQuery UI Resizable et ce que j'ai dans le JSFiddle ?

jquery-uiweb-applicationsjquery-ui-resizable
22
agibsen

Il existe des plugins plus appropriés, basés sur jQuery pour obtenir ce que vous voulez.

OPTION 1 :

J'ai personnellement utilisé dans mon projet Disposition de l'interface utilisateur .

C'est un projet presque ancien (il y a 6 ans), mais mi-2014 son développement est relancé, même s'il n'y a plus d'informations après septembre 2014.

En fait, la dernière version stable est 1.4.3, sortie en septembre '14. Le nouveau site Web est:

OPTION 2 :

Si vous avez besoin d'une solution plus complète, vous pouvez penser à jEasy UI , c'est un framework complet qui

[...] vous aide à créer facilement vos pages Web

C'est une sorte de remplacement de jQuery UI , avec des widgets similaires (dialogues, accordéons, ...) et quelque chose d'exclusif, comme Module de mise en page , déjà lié dans ma réponse.

OPTION 3 : La solution analogique à la précédente est Zino UI , un autre framework d'interface utilisateur complet qui a un composant spécifique dédié à " Split Layout "

OPTION 4 : jQWidgets est une autre bibliothèque , avec des objectifs similaires aux précédents, et pourrait spécifiquement être intéressant jqxSplitter module.

Alternative associée (similaire) :

Il existe également une autre alternative, qui permet de découper les panneaux dans les fenêtres du navigateur mais permet en outre de glisser-déposer des panneaux simples créant différents onglets et des sous-fenêtres côte à côte.

Cela s'appelle ( Mise en page dorée . C'est différent des précédents, pour de nombreuses raisons aussi plus puissant mais sûrement pour le moment il n'a pas le support Touch ...

30
Luca Detomi

J'en ai trouvé un qui semble acceptable pour cette exigence, si vous recherchez quelque chose de plus minimaliste par rapport à l'interface utilisateur jEasy. :)

Je vais essayer. Je voulais juste partager cela, pour faire gagner du temps aux autres, espérons-le.

7
fentas

Il y a eu quelques petits problèmes qui ont causé le comportement que vous n'aimez pas.

Celles-ci ont été corrigées dans ce Fiddle

Les problèmes étaient les suivants:

Lors du redimensionnement de la gauche, la droite est également redimensionnée (ce qu'elle ne devrait pas)

Fixé en définissant une largeur initiale (en pourcentage)

Lors du redimensionnement de la gauche vers la pleine largeur, le contenu du centre est masqué sous la droite

Impossible de reproduire

Lors du redimensionnement à droite, l'enveloppe (de couleur fuchsia) est partiellement visible Le bas du centre est redimensionné par le haut du haut du centre, pas par son propre haut

Corrigé en mettant la gauche à 0 pendant le redimensionnement.

$(".right.pane").resizable({
    handles: "e, w",
    resize: function(event, ui) {
      ui.position.left = 0;
    }
  });

Le bas du centre est redimensionné par le haut du haut du centre, pas par son propre haut

Cela est dû au fait que JQuery UI Resizable utilise un positionnement relatif qui ne fonctionne pas dans les cellules du tableau. Corrigé en ajoutant une div de contenu qui gère le redimensionnement.

<div class="top pane"> 
   <div class="top-content">Center top</div>
</div>
3
Richard Houltz

Vous pouvez utiliser Gridstack Il est facile à utiliser et puissant.

1
bensadiz

J'ai moi-même trouvé la réponse à cela, même si au final cela m'a pris plus d'un an de développement! Le résultat est un widget de disposition de panneau moderne, réactif construit en utilisant jQuery et jQuery UI widget factory.

http://www.silvercore.co.uk/widgets/propanellayout/

La meilleure solution au moment où la question a été posée était sans aucun doute jQuery UI.Layout, mais au fil du temps, ce projet a stagné et le plugin ne fonctionne pas avec jQuery 2. Malgré le code publié sur GitHub, son sort est inconnu, ce qui rend son utilisation comme fondement d'un projet à long terme discutable.

Certains des autres liens affichés ici sont morts maintenant et si vous ne voulez pas ou n'avez pas besoin d'un cadre d'application complet, vos choix sont limités.

1
Stephen Blair

je utilise ce plugin avec jquery

http://www.bramstein.com/projects/jlayout/jquery-plugin.html

1
Gerardo Pacheco

OK, j'espère que mon dernier montage. Je suis passé par un tas de ceux-ci et je me suis retrouvé avec la disposition de l'interface utilisateur jQuery.

Goldenlayout est sympa, mais vous devez réellement ajouter le code HTML dans chaque volet via javascript. Si vous avez tous vos trucs dans les composants React, je suppose que cela pourrait être bien, mais pas pour mon cas d'utilisation.

la disposition de l'interface utilisateur jQuery semble être assez robuste et vient d'être mise à jour en 2014.

0
Greg Blass