- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
使用gridstack.io,我想动态地拥有一个可以“添加小部件”到特定区域的按钮。我有一个要动态添加到网格中的组件“”。
给定我对gridstack的以下定义,我该如何做,如果我添加一个按钮,当您单击它时,在左上角添加一个新指令,我该如何实现?
我有以下指令:
grid-stack-directive.ts:
import { Directive, OnInit, Input, ElementRef, Renderer } from '@angular/core';
declare var $: any; // JQuery
@Directive({
selector: '[gridStack]'
})
export class GridStackDirective implements OnInit {
@Input() w: number;
@Input() animate: boolean;
constructor(
private el: ElementRef,
private renderer: Renderer
) {
renderer.setElementAttribute(el.nativeElement, "class", "grid-stack");
}
ngOnInit() {
let renderer = this.renderer;
let nativeElement = this.el.nativeElement;
let animate: string = this.animate ? "yes" : "no";
renderer.setElementAttribute(nativeElement, "data-gs-width", String(this.w));
if(animate == "yes") {
renderer.setElementAttribute(nativeElement, "data-gs-animate", animate);
}
let options = {
cellHeight: 80,
verticalMargin: 10
};
// TODO: listen to an event here instead of just waiting for the time to expire
setTimeout(function () {
$('.grid-stack').gridstack(options);
}, 300);
}
}
import { Directive, ElementRef, Input, Renderer, OnInit } from '@angular/core';
@Directive({
selector: '[gridStackItem]'
})
export class GridStackItemDirective {
@Input() x: number;
@Input() y: number;
@Input() w: number;
@Input() h: number;
@Input() minWidth: number;
@Input() canResize: boolean;
constructor(
private el: ElementRef,
private renderer: Renderer
) {
renderer.setElementAttribute(el.nativeElement, "class", "grid-stack-item");
}
ngOnInit(): void {
let renderer = this.renderer;
let nativeElement = this.el.nativeElement;
let cannotResize: string = this.canResize ? "yes" : "no";
let elementText: string = '<div class="grid-stack-item-content">' + nativeElement.innerHTML + '</div>';
// TODO: Find the Angular(tm) way to do this ...
nativeElement.innerHTML = elementText;
renderer.setElementAttribute(nativeElement, "data-gs-x", String(this.x));
renderer.setElementAttribute(nativeElement, "data-gs-y", String(this.y));
renderer.setElementAttribute(nativeElement, "data-gs-width", String(this.w));
renderer.setElementAttribute(nativeElement, "data-gs-height", String(this.h));
if(this.minWidth) {
renderer.setElementAttribute(nativeElement, "data-gs-min-width", String(this.minWidth));
}
if(cannotResize == "yes") {
renderer.setElementAttribute(nativeElement, "data-gs-no-resize", cannotResize);
}
}
}
app.component.html:
<h1>My First Grid Stack Angular 2 App</h1>
<section id="demo" class="darklue">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Demo</h2>
<hr class="star-light">
</div>
</div>
<div gridStack w="12" animate="true">
<div gridStackItem x="0" y="0" w="4" h="2">1</div>
<div gridStackItem x="4" y="0" w="4" h="4">2</div>
<div gridStackItem x="8" y="0" w="2" h="2" canResize="false" minWidth="2">
<span class="fa fa-hand-o-up"></span> Drag me!
</div>
<div gridStackItem x="10" y="0" w="2" h="2">4</div>
<div gridStackItem x="0" y="2" w="2" h="2">5</div>
<div gridStackItem x="2" y="2" w="2" h="4">6</div>
<div gridStackItem x="8" y="2" w="4" h="2">7</div>
<div gridStackItem x="0" y="4" w="2" h="2">8</div>
<div gridStackItem x="4" y="4" w="4" h="2">9</div>
<div gridStackItem x="8" y="4" w="2" h="2">10</div>
<div gridStackItem x="10" y="4" w="2" h="2">11</div>
</div>
</div>
</section>
<html>
<head>
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel='stylesheet' type='text/css'>
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<!-- jquery -->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/jquery-ui-dist/jquery-ui.min.js"></script>
<script src="node_modules/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>
<script src="node_modules/jquery-easing/dist/jquery.easing.1.3.umd.min.js"></script>
<!-- underscore and gridstack -->
<script src="node_modules/underscore/underscore-min.js"></script>
<script src="node_modules/gridstack/dist/gridstack.js"></script>
<link rel="stylesheet" href="node_modules/gridstack/dist/gridstack.min.css">
<link rel="stylesheet" href="node_modules/gridstack/dist/gridstack-extra.min.css">
<link rel="stylesheet" href="app/css/gridstack-demo.css">
<!-- bootstrap -->
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<!-- freelancer stuff -->
<script src="app/js/freelancer.js"></script>
<link rel="stylesheet" href="app/css/freelancer.css">
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
最佳答案
您可以在gridStack
指令中创建一个“路由器”-它会得到一个表示所需组件类型的字符串,并用ngIf
加载它
<div customGridStackItem1 *ngIf="itemType == 'stackItem1'"></div>
<div customGridStackItem2 *ngIf="itemType == 'stackItem2'"></div>
<div anotherGridStackItem *ngIf="itemType == 'anotherStackItem'"></div>
关于gridstack - 如何使用指令添加新的gridstackitem?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41968574/
我正在使用 Angular2 (2.3.1) 和 gridstack.js (gridstack.js 0.3.0) 以及 jquery 1.11.1。尝试按照这个例子 https://stackov
所以,我一直在使用 Gridstack,想知道是否有关于如何将内容添加到新添加的小部件的指南。 我已经测试了在按钮单击时添加小部件的示例。 [Knockout.js 演示][1] [1]: http:
使用gridstack.io,我想动态地拥有一个可以“添加小部件”到特定区域的按钮。我有一个要动态添加到网格中的组件“”。 给定我对gridstack的以下定义,我该如何做,如果我添加一个按钮,当您单
我正在使用 gridstack 来显示我的小部件。拖动和调整大小适用于 gridstack 卡,但当我将卡拖到底部时,卡的容器不会滚动。我想在拖动卡片时滚动那个容器。该容器只是一个 div 元素,所有
我正在尝试使网格静态。一点动静都没有。 我尝试过: var options = { staticGrid: true, }; $('.grid-stack').grid
如标题所示,我在禁用移动或拖动网格小部件时遇到问题。我尝试使用 data-gs-no-move、data-gs-locked 和 data-gs-no-resize,如 GridStack 中所列文件
这是我使用 Knockout 绑定(bind)的 Gridstack 布局示例。问题是我的 View 没有在应该更新的时候根据模型更新。 按下 Delete me 后,控制台输出显示 widgets
我正在尝试创建此行为,但不确定 Gridstack 是否支持它。我有 3 个 Gridstack 网格:Grid1、Grid2 和 Grid3。 Grid1 是一个独立的网格,Grid3 嵌套在 Gr
我正在使用 GridStack.js 库,我必须使用它来实现键盘。问题是,如果我将屏幕宽度(在 Chrome DevTools 中)设置为小于 800-1000px,那么所有网格元素的宽度都会更改为
我的每个 GridStack 项目(想想图表)中都有一些元素,当 gridstack 项目(单元格)大小发生变化时,这些元素需要重新渲染。我想使用 GridStack 上的更改事件来识别已更改的项目,
我正在尝试使用 gridstack.js 存储框在页面上显示的顺序 目前,它们按照 HTML 中显示的方式排序,而不是按照它们在页面上的布局方式排序。这是进一步解释我想要做的事情的图片: 我用来设置订
使用 RactiveJS、Redux 和 Gridstack 制作的应用程序。 当添加新的小部件时,一切都很好,并且小部件也可以移动/调整大小。但是,当我删除所有小部件并添加两个新小部件时,例如: 小
我正在使用 Gridstack js 为仪表板创建可拖动/可调整大小的小部件。图片显示了一个示例小部件。我按原样保留了默认的可拖动值,并且可以通过双击小部件内的任意位置来拖动它。我想做的是仅通过单击灰
我正在使用 gridstack.js并且需要在调整大小时保持纵横比。我尝试了很多在谷歌上找到的方法,但没有任何效果。以下是我为演示该问题而制作的 JSFiddle 链接: jsFiddle var o
真的是菜鸟问题,但我不明白我在这里做错了什么? azazfaz
我希望 gridstack 团队 body 健康..!我只是希望能够在我移动一个小部件时让其他小部件不会向上移动以填充它的空位..!相反,更像是我希望其他小部件在我移动一个小部件时留在它们的位置并且不
因为我正在使用 gridstack.js http://gridstackjs.com/ 。因为我在调整屏幕底部小部件的大小时遇到问题。那就是滚动没有移动并且调整大小已被阻止。任何人都可以建议我任
我正在尝试将小部件添加到 gridstack(动态),但遇到了一些问题: 我需要获取所有元素 ID、位置 X、位置 Y、宽度和高度,以便存储网格小部件的位置。我设法做到了(也许不是更好的方法),但我总
场景 我有一个仪表板,其中包含一些小部件,这些小部件被分组到用户可以点击的选项卡中。这些小部件具有默认的起始位置,包括高度和宽度,但如果用户移动它们或调整它们的大小(使用 gridstack.js),
我是第一次使用 gridstack,我在水平边距方面遇到了问题。显然,我的 CSS 中有些东西使我的元素太宽。 我在演示中看到 gridstack.css 已分别将左右设置为 10px,并且我使用的是
我是一名优秀的程序员,十分优秀!