Skalierbare Spalten mit Angularjs

Ich habe zwei Spalten, die möchte ich in der Größe veränderbar sein (wobei der eine breiter der andere schmäler), aber ich bin mir nicht wirklich sicher wie Sie gehen über es. Ich habe das setup diese Geige: http://jsfiddle.net/4kyoyazq/

Ich habe drei Spalten in dem moment, mit den sogenannten "handle", der sitzt oben (z-index) die andere.

//left col
#content {
  position:absolute;
  left:0;
  right:250px;
  bottom:30px;
  top:50px;
  background:red;
  z-index:0;
  overflow-y:scroll;
}

//right col
#menu {
  position:absolute;
  right:0;
  top:50px;
  width:250px;
  bottom:30px;
  background:#yellow;
}

#handle {
  position:absolute;
  right:250px;
  top:50px;
  width:10px;
  bottom:30px;
  background:blue;
  cursor: col-resize;
  z-index:5;
}

Meine Richtlinie ist im moment leer auf der Geige - wie kann ich das Ziel der zwei Spalten-divs, die in der Richtlinie so, dass, wenn ich ziehen Sie den Griff, div ändern kann ich die Breite der zwei Spalten?

var myApp = angular.module('myApp', []);

myApp.directive("draggable", function(){
    return {
          restrict: 'A',
          link: function (scope, element, attrs) {
              element.on('click', function () {
                  //do something here
              });
          }
      };
});
Sie bedeuten, dass die Richtlinie Teil? das ist, wo ich stecken geblieben bin - ein paar Hinweise wären hilfreich

InformationsquelleAutor tommyd456 | 2014-08-26

  1. 12

    Dies ist möglicherweise nicht genau das, was Sie suchen. Aber in meiner app es funktioniert ziemlich gut.

    Die Richtlinie ist ein wrapper für das jquery plugin: colResizeable

    Es arbeitet mit einem table layout anstelle der divs.

    Die Richtlinie für eckige ist:

    myApp.directive('colResizeable', function() {
  return {
    restrict: 'A',
    link: function(scope, elem) {
      setTimeout(function() {
        elem.colResizable({
          liveDrag: true,
          gripInnerHtml: "<div class='grip'></div>",
          draggingClass: "dragging",
          onDrag: function() {
            //trigger a resize event, so width dependent stuff will be updated
            $(window).trigger('resize');
          }
        });
      });
    }
  };

    Und der html-Teil ist:

    <body>
  <table style="width: 100%;height:300px" col-resizeable>
    <tr>
      <td style="background:red">content</td>
      <td style="background:blue;width:100px">menu</td>
    </tr>
  </table>
</body>

    Haben Sie einen Blick auf die css auch. (Griff/Griff-Symbol wird zufällig generiert in diesem Beispiel)

    Einen funktionierenden plunker ist hier

    Haben Sie eine Lösung für die Tabelle dynamisch erstellt (<tr ng-repeat> ) und mit Daten aus der asynchronen request plnkr.co/Bearbeiten/1OF8Uv4VlXRfeosvt9HV?p=Album Vorhören
    Es funktioniert eckig ? wie ng - repeat ??
    Hallo haben Sie diese Arbeit mit div-Tabellen ?

    InformationsquelleAutor mainguy

Schreibe einen Kommentar