小编and*_*tor的帖子

我有一个包含多个文本输入和一些select2元素的表单.使用键盘在字段之间切换工作正常 - Select2元素的行为类似于表单元素,并在Tab键时获得焦点.我想知道当Select2元素获得焦点时是否可以打开下拉列表.

这是我到目前为止所尝试的:

$("#myid").select2().on('select2-focus', function(){
     $(this).select2('open');
});

但是使用此代码会在选择后再次打开下拉列表.

我正在使用一个处理日期的Angular9应用程序。它显示并更新多个<mat-datepicker>字段。

我正在使用https://www.npmjs.com/package/@angular/material-moment-adapter 中的自定义MAT_DATE_FORMATS和MomentDateAdapter( @angular/material-moment-adapter) 。

我正在使用以下代码可以正常工作：

export const APP_MOMENT_DATE_FORMATS =
{    
  parse: {},
  display: {
    dateInput: 'YYYY/MM/DD/MM',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY'
  }
};

//..
providers: [
  {
     provide: MAT_DATE_FORMATS, useValue: APP_MOMENT_DATE_FORMATS
  },
  {
    provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]
  }
]
// ..

Stackblitz 演示：https ://stackblitz.com/edit/angular-formatted-datepicker-vdtaqj ? file = app%2Fdatepicker-overview-example.ts

现在，我想知道我是否可以APP_MOMENT_DATE_FORMATS.display.dateInput 动态更新值- 例如：它可能是通过 http 请求从配置服务设置的，或者我可能会在界面中显示一个选择器。

例子： …

我正在尝试实施一个超级菜单.

菜单项的数量是可变的.默认情况下,它们必须以4列呈现,平衡(每列上的项目数应与其他列几乎相同).根据其内容,巨型菜单的高度也是可变的.

我用CSS多列布局实现了它.

这个代码是:

.menu {
  -webkit-column-count: 4;
     -moz-column-count: 4;
          column-count: 4;
 -webkit-column-gap: 32px;
    -moz-column-gap: 32px;
         column-gap: 32px;
}

我的问题是有一个特殊的菜单项类型,它应该作为一个列中断.此菜单项类型是可选的,但如果存在,则应强制浏览器启动新列以显示内容(最多可以有3个列中断).

我添加了以下css代码:

.menu-item--column-break {
    display: block;
    -webkit-column-break-before: column;
              -moz-break-before: column;
                   break-before: column;
}

但是这个CSS仅适用于Chrome:

Firefox和Safari不支持"column-break"元素的CSS规则,并将其显示为普通菜单项:

该菜单是在JavaScript中从JSON对象生成的,HTML可以更改,但我更喜欢CSS/JS-only解决方案.

您是否知道如何在所有浏览器中实现此功能？

这是完整的代码:

https://codepen.io/andreivictor/pen/ywLJKx

要么

let items = [
  {title: 'Category 1', type: 'menu-item'},
  {title: 'Category 2', type: 'menu-item'},
  {title: '---cb---', type: 'column-break'},
  {title: 'Category 3', type: 'menu-item'},
  {title: 'Category 4', type: 'menu-item'},
  {title: 'Category 5', type: 'menu-item'},
  {title: 'Category …

我正在尝试实现全屏无限滚动背景效果，它必须延伸到视口的整个高度和宽度。

这是演示。

我尝试过的解决方案是采用一个具有100vh和100vw视口的包装元素，然后div在其中放置 2 s，其高度为 100%，具有相同的背景图像和background-size: cover属性。我使用的图像的大小是：1,920px \xc3\x97 808px。

然后我在包装元素上应用了以下动画：

@keyframes infiniteScrollBg {\n  0% {\n    transform: translateY(0%);\n  }\n  100%{\n    transform: translateY(-100%);\n  }\n}\n

但问题是，在某些视口尺寸上，图像无法正确重复（由于background-size: cover属性）：

。

这是我尝试过的完整代码：

<div class="animated-scene">\n    <div class="animated-scene__frame animated-scene__frame-1"></div>\n    <div class="animated-scene__frame animated-scene__frame-2"></div>\n</div>\n

和CSS：

.animated-scene {\n    width: 100vw;\n    height: 100vh;\n    position: fixed;\n    min-height: 400px;\n    animation: infiniteScrollBg 50s linear infinite;\n }\n\n .animated-scene__frame {\n     width: 100%;\n     height: …

要求：

每次发出特定的HTTP 请求时，我都需要在 UI 上显示加载微调器。

为了获得良好的视觉效果，我决定在屏幕上显示旋转器至少1 秒，即使请求持续时间较短（事实上，它持续 0.1 秒到 3-4 分钟之间，所以最好按住旋转器至少 1 秒）。所以，条件是：

• 如果请求时间少于1 秒，微调器将显示 1 秒
• 如果请求花费的时间超过1 秒，旋转器将显示直到完成。

我知道这种方法从 UI/UX 角度来看可能存在争议 - 但我更愿意将其视为技术挑战。

我尝试过的代码：

正如在 SO 的其他实现中发现的那样，我尝试了一种方法combineLatest- 将需要 1 秒的 Observable 和用于 http 请求的 Observable 结合起来。

load() {
  this.loading = true; // this will show the spinner
  combineLatest(timer(1000), this.service.apiCall())
    .pipe(
      finalize(()=> {
        this.loading = false; // this will hide the spinner
      }),
      map(x => x[1])
    )
    .subscribe(x …

我正在尝试显示一个table显示一些分组数据的内容。

标题应该粘贴（在视口的顶部），还有一些包含组标题的表格行。

为简单起见，我在 Codepen 上创建了以下示例： https: //codepen.io/andreivictor/pen/RwZRZav

我尝试过的代码是：

td.sticky {
  background: red;
  color: white;
  position: sticky;
  top: 50px;  // this is the header height
}

它在 Chrome 和 Firefox 上运行良好。

问题是它在 Safari 中不起作用（在 Safari v14 上测试）；Safari 移动版也不行。请参阅屏幕截图： https://i.stack.imgur.com/08o4L.png - 该行是粘性的 - 但top位置不同（相对于表格顶部 - 而不是视口顶部）。

我在带有粘性标题的角度材料表上分叉了示例，并添加了更多数据。我看到标题不粘。在这里堆叠闪电战

任何人都知道标题如何保持粘性？

我正在使用角度材料树组件。我能够获取所选节点的详细信息。现在，我想要实现的是获取所选节点或整个父层次结构的父级。你知道我怎样才能做到这一点吗？

我的树在角度材料文档中看起来像这样：

https://stackblitz.com/angular/mrkvpbkolad?file=app%2Ftree-nested-overview-example.ts