Le redimensionnement DIV Panneau

Je suis en train de travailler sur un projet de site web et j'ai besoin d'ajouter un redimensionnable panneau comme jsfiddle ou hotmail (hotmail a un panneau de gauche, qui comprend vos mails, et dispose d'un droit panneau de contenu que vous pouvez lire vos mails...)

J'ai regardé jQuery et j'ai essayé plusieurs fois, mais je ne peut pas définir le gestionnaire. J'ai juste besoin de faire un panneau qui peut être redimensionnable à l'horizontale.

Alors, comment puis-je faire cela? Pouvez-vous m'aider à compléter mon code (besoin d'un resizer entre les left_panel et le contenu. Resizer pour redimensionner la left_panel et bien sûr contenu sera effectuée.)

> http://jsfiddle.net/QkZL8
que voulez-vous dire par redimensionnable
C'est une fonctionnalité de l'INTERFACE utilisateur jQuery pour faire des éléments du DOM redimensionnable par l'utilisateur.
Je veux dire, je veux faire une interface comme hotmail. Avez-vous hotmail acc? Si vous avez, vous pouvez comprendre ce que je voulais dire. Ou vous n'avez pas, vous pouvez regarder jsfiddle est redimensionnable panneaux (html, css, java, résultat) merci..
Quelle est la différence entre le JQuery UI JQuery? Vous pouvez compléter mon code dans jsfiddle ? Merci.. jsfiddle.net/QkZL8
jQuery UI est une extension/plugin pour jQuery ajout d'une fonctionnalité pour faire certaines GUI tâches comme le redimensionnement, le glisser-déposer, et des éléments graphiques tels que les curseurs, etc. Ces choses ne font pas partie de jQuery et jQuery UI doit être ajouté si vous souhaitez utiliser l'une de ses fonctionnalités.

OriginalL'auteur iedmrc | 2012-09-13

  1. 15

    Le violon ne fonctionne pas parce que jQuery UI n'est pas inclus (donc jQuery UI resizable n'est pas connue), mais aussi vous avez fait une erreur de syntaxe, vous devriez faire ceci:

    $(resize).resizable({
    handles: 'w'
});

    pas ceci:

    $(resize).resizable({,,
    handles: 'w', 
});

    Comme David remarques dans les commentaires, vous devez faire le panneau lui-même redimensionnable, pas un dans entre le répartiteur de l'élément. Dans le redimensionner handler, vous pouvez redimensionner l'autre panneau, de sorte que sa largeur est complémentaire à la largeur du panneau vous sont effectivement en cours de redimensionnement.

    Mise à JOUR: Cela devrait vous mettre sur la bonne voie:

    $(resize).resizable({
    //only use the eastern handle
    handles: 'e',
    //restrict the width range
    minWidth: 120,
    maxWidth: 450,
    //resize handler updates the content panel width
    resize: function(event, ui){
        var currentWidth = ui.size.width;

        //this accounts for padding in the panels + 
        //borders, you could calculate this using jQuery
        var padding = 12; 

        //this accounts for some lag in the ui.size value, if you take this away 
        //you'll get some instable behaviour
        $(this).width(currentWidth);

        //set the content panel width
        $("#content").width(containerWidth - currentWidth - padding);            
    }
});

    Mise à jour 2: j'ai ajouté un minWidth et maxWidth option pour mon exemple, afin que vous ne pouvez redimensionner la colonne de gauche à l'intérieur de ces limites.

    Mis à JOUR le violon ici

    Aussi, la dernière virgule doit également être supprimée, même si certains navigateurs de l'ignorer, d'autres peuvent donner une erreur de syntaxe.
    Oui en effet, j'ai corrigé, merci.
    Aussi, le panneau lui-même doit être le redimensionnement de la cible, pas un peu bizarre splitter-élément dans entre. La poignée doit être à 'e' si le panneau de gauche est redimensionnée. Certains inverse synchrone redimensionner devrait être mis en place pour les deux panneaux, à moins que le balisage est radicalement changé.
    Vous êtes les bienvenus. Vérifier mon dernier montage, il rend le comportement plus stable.
    J'ai édité mon exemple si vous ne pouvez déplacer le panneau à l'intérieur de certaines limites.

    OriginalL'auteur Asciiom

  2. 2

    Ok, j'ai donc fait une petite maquette si vous êtes toujours perdu...
    donc le code est...

    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".resize").resizable();           
        });
    </script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
    <style type="text/css">
        body, html
        {
            margin: 0px;
            border: 0px;
            padding: 0px;

        }


        .resize
        {
            position: fixed;
            left: 0px;
            height: 100%;
            background: blue;
            cursor:pointer;         
            max-width: 300px;
            padding: 20px;
        }



    </style>
    </head>
    <body>
<div class="resize">
    <p>
       Nullam vitae eros sapien. Nulla sit amet ipsum sagittis felis lobortis imperdiet eget eu est. Pellentesque tincidunt dictum libero, vitae sagittis augue interdum ac. Nam cursus, ante eget consequat mollis, mauris justo consequat tellus, at rutrum justo dolor ut tellus. Curabitur interdum, augue a aliquam tempus, neque lectus rhoncus lorem, sed mattis velit purus eu nibh. Donec adipiscing condimentum eros ac convallis. Morbi purus felis, condimentum at rutrum nec, auctor quis mi. Sed odio turpis, blandit vitae sagittis a, accumsan rutrum risus. Sed ultricies congue quam, consectetur porttitor augue ultrices non. Mauris cursus quam sed eros fermentum scelerisque. Mauris nisi purus, iaculis ac pulvinar ac, rhoncus a est. Quisque vitae mollis lacu
    </p>
</div>
<div class="noneresize">
    <p> 
        This element is not the resizing one
    </p>
</div>



    </body>
</html>
​

    Cela fonctionne dans les deux sens horizontal et vertical .

    Modifier
    un autre exemple

    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".resize").resizable();           
        });
    </script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
    <style type="text/css">
        body, html
        {
            margin: 0px;
            border: 0px;
            padding: 0px;

        }

        .holder div
        {
            float: left;            
        }

        .resize
        {
            position: relative;
            height: 100%;
            background: blue;
            cursor:pointer;         
            max-width: 300px;
            padding: 20px;
        }


        .holder
        {
            position: relative;
            width: 100%;
            height: 100%;

        }

    </style>
    </head>
    <body>
<div class="holder">
    <div class="resize">
        <p>
           Nullam vitae eros sapien. Nulla sit amet ipsum sagittis felis lobortis imperdiet eget eu est. Pellentesque tincidunt dictum libero, vitae sagittis augue interdum ac. Nam cursus, ante eget consequat mollis, mauris justo consequat tellus, at rutrum justo dolor ut tellus. Curabitur interdum, augue a aliquam tempus, neque lectus rhoncus lorem, sed mattis velit purus eu nibh. Donec adipiscing condimentum eros ac convallis. Morbi purus felis, condimentum at rutrum nec, auctor quis mi. Sed odio turpis, blandit vitae sagittis a, accumsan rutrum risus. Sed ultricies congue quam, consectetur porttitor augue ultrices non. Mauris cursus quam sed eros fermentum scelerisque. Mauris nisi purus, iaculis ac pulvinar ac, rhoncus a est. Quisque vitae mollis lacu
        </p>
    </div>
    <div class="noneresize">
        <p> 
            This element is not the resizing one
        </p>
    </div>
</div>


    </body>
</html>
​
    Mais.. je ne peux pas l'exécuter. Quel est le problème avec moi? jsfiddle.net/DYbkX
    jsfiddle cant exécuter jquery ui, alors essayez-le sur votre ordinateur
    Je l'ai fait, monsieur. Mais toujours pas de travail. Et j'ai besoin de 2 div. resizer pour redimensionner ma gauche div. Comme un séparateur @david slavik écrit
    Ok j'ai voulu le faire vérifier de nouveau
    Bonne, mais j'ai besoin d'un peu d'aide. Comment puis-je mettre noneresize élément à droite de resizer. Et noneresize sera grande ou petite à savoir sera effectuée à partir de resizer. J'espère que je peux expliquer. Merci.

    OriginalL'auteur ryanc1256

  3. 1

    qu'en utiliser quoi que ce soit terminé comme le Kendo splitter: http://demos.kendoui.com/web/splitter/index.html

    -David

    Oh oui.. C'est bon, mais je veux redimensionner div en même temps. Ce splitter largeur de l'appareil après que j'ai mis le séparateur de droite ou de gauche.. Pouvez-vous avoir une idée de sir?

    OriginalL'auteur David Slavík