Fatal编程技术网
  • javascript/
  • Javascript 我如何制作一个定制的桌面按钮

Javascript 我如何制作一个定制的桌面按钮

javascript html angularjs twitter-bootstrap

Javascript 我如何制作一个定制的桌面按钮,javascript,html,angularjs,twitter-bootstrap,angular-ui-bootstrap,Javascript,Html,Angularjs,Twitter Bootstrap,Angular Ui Bootstrap,我正在尝试向表格单元格中的按钮添加自定义输入弹出框，以便添加额外的详细信息。我使用的是angular ui引导，我不能完全让它按我想要的方式工作 下面是一个简化的示例代码 <!doctype html> <html ng-app="plunker"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>

我正在尝试向表格单元格中的按钮添加自定义输入弹出框，以便添加额外的详细信息。我使用的是angular ui引导，我不能完全让它按我想要的方式工作

下面是一个简化的示例代码

<!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>


angular.module（'plunker'，['ui.bootstrap']）；
var PopoverDemoCtrl=函数（$scope）{
$scope.slist=[{
“id”：“1”，
“姓名”：“约翰”，
“zip”：“12345”，
“密钥”：“3BC”
}, {
“id”：“2”，
“姓名”：“史蒂夫”，
“zip”：“12345”，
“键”：“A31”
}, {
“id”：“2”，
“姓名”：“乔”，
“zip”：“42345”，
“键”：“61E”
}];
$scope.dynamicpover='Hello，World！'；
$scope.dynamicPopVertile='Title'；
};
$（“.pop”）.popover({
是的，
内容：函数（）{
返回$（'#woodlog popover wrap.popover content'）.html（）；
},
标题：“Woodlog”，
模板：函数（）{
返回$（'woodlog popover wrap'）.html（）；
}
});
.popover.woodlog-popover{
最大宽度：960像素；
显示：块；
顶部：190px；
左：0px；
最小宽度：420px；
}
.popover输入{
宽度：70px；
显示：内联块；
}
.桌子{
宽度：255px
}
原木
身份证件
名称
拉链
加上…
{{unit.id}
{{unit.name}
{{unit.zip}
这是我正在尝试做的一个例子。底部的“假”弹出框是我希望弹出框的外观。

您可能需要编写自己的指令，以便将行数据对象包含在弹出框的范围内。我将如何执行此操作？本周我刚开始使用bootstrap和angular，自2010-2011年以来就没有参与过网络游戏。没有简单的答案。可以查看模态指令是如何工作的。建议阅读一些指令教程。我已经开始研究指令并使用它们，哇，这真是angular的杀手级功能。