Question

我尝试将自定义输入弹出框添加到表格单元格中的按钮，以便添加额外的细节。我使用angular-ui-bootstrap，我无法按照自己的意愿使用它。

这是一个简化的示例代码

<!doctype html>
<html ng-app="plunker">
<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script>
angular.module('plunker', ['ui.bootstrap']);
var PopoverDemoCtrl = function($scope) {
  $scope.slist = [{
    'id': '1',
    'name': 'John',
    'zip': '12345',
    'key': '3BC'
  }, {
    'id': '2',
    'name': 'Steve',
    'zip': '12345',
    'key': 'A31'
  }, {
    'id': '2',
    'name': 'Joe',
    'zip': '42345',
    'key': '61E'
  }];
  $scope.dynamicPopover = 'Hello, World!';
  $scope.dynamicPopoverTitle = 'Title';
};

$(".pop").popover({
  html: true,
  content: function() {
    return $('#woodlog-popover-wrap .popover-content').html();
  },
  title: 'Woodlog',
  template: function() {
    return $('#woodlog-popover-wrap').html();
  }
});
</script>
</head>
<body>
  <style>
    .popover.woodlog-popover {
      max-width: 960px;
      display: block;
      top: 190px;
      left: 0px;
      min-width: 420px;
    }
    .popover input {
      width: 70px;
      display: inline-block;
    }
    .table {
      width: 255px
    }
  </style>


  <div ng-controller="PopoverDemoCtrl">

    <!-- My custom popover -->
    <div id="termu-popover-wrap">
      <div class="popover woodlog-popover bottom fade in" role="tooltip">
        <div class="arrow"></div>
        <h3 class="popover-title">Wood log</h3>
        <div class="popover-content">
          <input type="text" name="" id="" class="form-control" placeholder="Type">
          <input type="text" name="" id="" class="form-control" placeholder="Loct…">
          <input type="text" name="" id="" class="form-control" placeholder="Hours">
          <input type="text" name="" id="" class="form-control" placeholder="Misc…">
          <button class="btn btn-success">
            <span class="glyphicon glyphicon-ok"></span>
          </button>
          <button class="btn btn-danger">
            <span class="glyphicon glyphicon-remove"></span>
          </button>
        </div>
      </div>
    </div>

    <!-- Table displaying content -->
    <table class="table table-striped table-hover" cellspacing="0">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Zip</th>
          <th>Add…</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="unit in slist">
          <td>{{unit.id}}</td>
          <td>{{unit.name}}</td>
          <td>{{unit.zip}}</td>
          <td>
            <button class="btn btn-primary pop" popover-placement="bottom" popover-title="Wood log" popover="[......][......][......][......][OK][DEL]">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
          </td>
        </tr>
      </tbody>
    </table>

  </div>
</body>

</html>

这是我尝试做的demo。＆＃34;假＆＃34;底部的popover是我希望popovers看起来的样子。

如何在表格按钮上创建自定义弹出窗口

0 个答案: