jQuery-UI und Splitter

Mithilfe von jQuery UI, wie kann ich mit einem Splitter Art von Funktion, wie wir Sie bei
http://methvin.com/splitter/3csplitter.html?

Ich bin auch gefragt, wie ich brauche 2 Dinge umgesetzt werden, die auf meine Seite;
Portlet (Ziehbar) :: http://jqueryui.com/sortable/#portlets
und Vertikalen Splitter :: http://methvin.com/splitter/3csplitter.html

Ich bin nicht sicher, wie guter Programmierstil ist es, wenn ich bin, darunter 2 separate Bibliotheken (auch wenn beide jQuery-basierend);
wie http://host.sonspring.com/portlets/ für Portlets
und http://methvin.com/splitter/3csplitter.html für Splitter

InformationsquelleAutor testndtv | 2013-03-09
  1. 17

    Hier ist ein Beispiel, wie Sie einen splitter verwenden von jQuery UI:

    HTML:

    <div class="wrap">
    <div class="resizable resizable1"></div>
    <div class="resizable resizable2"></div>
</div>

    Skript: 

    $(function () 
{
    $(".resizable1").resizable(
    {
        autoHide: true,
        handles: 'e',
        resize: function(e, ui) 
        {
            var parent = ui.element.parent();
            var remainingSpace = parent.width() - ui.element.outerWidth(),
                divTwo = ui.element.next(),
                divTwoWidth = (remainingSpace - (divTwo.outerWidth() - divTwo.width()))/parent.width()*100+"%";
                divTwo.width(divTwoWidth);
        },
        stop: function(e, ui) 
        {
            var parent = ui.element.parent();
            ui.element.css(
            {
                width: ui.element.width()/parent.width()*100+"%",
            });
        }
    });
});

    Dies ist eine beliebte Schrift. Ich habe kleine Modifikationen für das fluid-layout.

    jsFiddle-Beispiel

    • Hahah. Ich habe mir für dieses Skript den GANZEN TAG! Danke.
    • Mit Firefox 32.0.1, die Blaue box auf die nächste Zeile umbricht, wenn die Größe. Um das zu verhindern, ersetzen Sie die Kommas mit einzelnen var Erklärungen ab var remainingSpace = ...
    • Auch fand ich, dass die folgenden beiden css-Zeilen, die erforderlich waren, um es an die Arbeit: .ui-resizable { position: relative;} und .ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; }
    InformationsquelleAutor Dmitriy
  2. 2

    Ich verwendet, Dmitriy die Antwort als Grundlage für meine Umsetzung. Beachten Sie, dass es gibt nichts stoppen, dass insbesondere die Umsetzung von Verdoppelung der bounding-box, wenn der Schieber gezogen, auf der rechten Seite.

    Ich brauchte eine einfache, nicht-bewegliche splitter für jetzt (mit dem Ziel, die Bereiche resizable in die Zukunft), und meine Bewerbung ist bereits die Verwendung von jQuery, so dass ich erreicht dies, indem ein Teil der seinen code wie folgt:

    $(function () 
{
    $(".resizable1").resizable(
    {
        autoHide: false,
        containment: "#wrap",
        ...

    Ich habe auch die css cursor-Stil (unter anderem) um zu verhindern, dass der veränderbare cursor angezeigt wird, wie folgt:

    .ui-resizable-e { 
    cursor: default; 
    ...

    Dank Dmitriy!

    InformationsquelleAutor testworks
  3. 0

    Mein Erster Gedanke war: zuerst wählen Sie alle Felder mit Ausnahme des letzten. Diese Holen Sie sich einen splitter zu Ihrer rechten Seite.
    Dann, wenn die splitter verschoben wird, nur die beiden Boxen berühren Sie die splitter angepasst werden.

    Dies ist ein Beispiel, Sie können kopieren, einfügen; es funktioniert so wie es ist.
    Dies kann verwendet werden, für eine beliebige Anzahl von Spalten; so stellen Sie sicher, dass Sie auch Anpassung der css.

    Fügte ich einige Tasten zu erweitern 1 Feld; auch eine reset-Taste.

    <!DOCTYPE HTML> 
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery UI 4-Column Splitter</title>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
    <style>
      body {
        padding: 0;
        margin: 0;
      }
      .wrap {
        width: 100%;
        white-space: nowrap;
        background-color: #c0c0c0;
      }
      .resizable {
          width: 25%;
          height: 120px;
          display: inline-block;
          overflow: hidden;
      }
      .ui-resizable-e { 
          cursor: e-resize; 
          width: 10px; 
          top: 0; 
          bottom: 0; 
          background-color: gray;
          z-index: 10;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="resizable"> HELLO  </div>
      <div class="resizable"> WORLD </div>
      <div class="resizable"> FOO </div>
      <div class="resizable"> BAR </div>
    </div>
    <div id="controls">
      <input type="button" value="expand 0" data-index="0" class="expand">
      <input type="button" value="expand 1" data-index="1" class="expand">
      <input type="button" value="expand 2" data-index="2" class="expand">
      <input type="button" value="expand 3" data-index="3" class="expand">
      <input type="button" value="reset" class="reset">
    </div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
    <style type="text/css" media="all">
    </style>
    <script type="text/javascript">
      $(function () {
        //settings
        var minWidth = 15;
        var splitterWidth = 10;  //this sh ould match the css value

        var splitter   =  $('.ui-resizable-e');
        var container =   $('.wrap');
        var boxes =       $('.resizable');

        var subBoxWidth = 0;


        $(".resizable:not(:last)").resizable({
          autoHide: false,
          handles: 'e',
          minWidth: minWidth,

          start: function(event, ui) {
            //We will take/give width from/to the next element; leaving all other divs alone.
            subBoxWidth = ui.element.width() + ui.element.next().width();
            //set maximum width
            ui.element.resizable({
              maxWidth: subBoxWidth - splitterWidth - minWidth
            });
          },

          resize: function(e, ui) {
            var index = $('.wrap').index( ui.element );
            ui.element.next().width(
              subBoxWidth - ui.element.width()
            );
          },

        });
        //collapses all the other boxes to the minimum width; expands the chosen box to what ever width is left
        $('.expand').click(function () {
          var index = $(this).data('index');
          var boxesToCollapse = boxes.length - 1;
          var widthLeft = container.width() - boxesToCollapse * (minWidth + splitterWidth);
          for (var i=0; i<boxes.length; i++) {
            boxes.eq(i).width( i==index ? widthLeft : minWidth);
          }
        });
        $('.reset').click(function () {
          boxes.removeAttr('style');
        });
      });
    </script>

  </body>
</html>
    InformationsquelleAutor Emmanuel Delay
  4. 0

    Den Splitter-Komponente Teil der Shield UI-framework ermöglicht die Verwendung einer Mischung von horizontaler und vertikaler Splitter.

    InformationsquelleAutor Vladimir Georgiev
Schreibe einen Kommentar