小编pan*_*fil的帖子

在纯css上具有固定标题和固定列的表

我需要创建一个带有固定标题和固定第一列的html表(或类似的东西).

到目前为止我看到的每个解决方案都使用Javascript或jQuery设置scrollTop/scrollLeft,但它在移动浏览器上无法顺利运行,所以我正在寻找一个纯CSS解决方案.

我在这里找到了一个固定列的解决方案:jsfiddle.net/C8Dtf/20/但我不知道如何增强它以使标题也得到修复.

我想让它在webkit浏览器上工作或使用一些css3功能,但我再说一遍,我不想Javascript用于滚动.

编辑:这是我想要实现的行为的示例:https://web.archive.org/web/20130829032141/http://datatables.net/release-datatables/extras/FixedColumns/css_size.html

html markup html-table css3 fixed-header-tables

78
推荐指数
7
解决办法
17万
查看次数

CSS 点领导者位于复杂背景的第一行

我需要使用 CSS 在第一行文本之后实现点引导符,以便在纹理/图像背景上使用它。

预期行为:

在此输入图像描述

我在互联网上看到了一些点领导者的实现。他们都使用以下技术之一:

  1. ::点+溢出之后
<div class=item1>
  <span class=text1>
    Text
  </span>
  <span class=price1>
    $100
  </span>
</div>
Run Code Online (Sandbox Code Playgroud)
<div class=item1>
  <span class=text1>
    Text
  </span>
  <span class=price1>
    $100
  </span>
</div>
Run Code Online (Sandbox Code Playgroud)
  1. 绝对点+白色背景
<div class=item2>
  <span class=text2>
    <span class=bg2>
      Text
    </span>
  </span>
  <span class=price2>
    <span class=bg2>
      $100
    </span>
  </span>
</div>
Run Code Online (Sandbox Code Playgroud)
.item1 {
  display: flex;
}
.text1 {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
}
.text1::after {
  content: '';
  position: absolute;
  bottom: 0;
  border-bottom: 1px dotted grey;
  width: 100%;
}
.price1 {
  align-self: flex-end;
} …
Run Code Online (Sandbox Code Playgroud)

html css flexbox

17
推荐指数
1
解决办法
672
查看次数

如何制作多个内嵌块元素来拉伸容器的整个宽度?

实现此处显示的输入字段和按钮行为的最佳方法是什么: 在此输入图像描述

html css block

14
推荐指数
2
解决办法
1万
查看次数

使用自定义JsonSerializer的Jackson @JsonUnwrapped行为

我有两个这样的课程:

public class A {
    String aProp = "aProp";

    public String getAProp() {
        return aProp;
    }
}

public class B {
    String bProp = "bProp";
    A a = new A();

    @JsonProperty("bProp")
    public String getBProp() {
        return bProp;
    }

    @JsonSerialize(using = CustomSerializer.class)
    public A getA() {
        return a;
    }     
}
Run Code Online (Sandbox Code Playgroud)

我期待得到像这样的JSON:

{
    "bProp": "bProp",         // just serizlised bProp
    "sProp1": "sProp1_aProp", // computed using aProp
    "sProp2": "sProp2_aProp"  // computed another way
}
Run Code Online (Sandbox Code Playgroud)

所以我写了这样的习惯JsonSerializer:

import com.fasterxml.jackson.core.JsonGenerator;
import com.fasterxml.jackson.databind.JsonSerializer;
import com.fasterxml.jackson.databind.SerializerProvider;

public …
Run Code Online (Sandbox Code Playgroud)

java json jackson

6
推荐指数
2
解决办法
4027
查看次数

解耦过于复杂的javascript模块

现在我正在开发相当庞大而复杂的webapp并且必须处理大量的客户端js代码,并且为了让我的生活更轻松,我正试图尽可能地解耦这些代码.

我受到Nicholas Zakas(http://www.youtube.com/watch?v=vXjVFPosQHw)和Addy Osmani(http://addyosmani.com/largescalejavascript)谈论可扩展的js架构的巨大启发,并试图应用一些他们的想法对我的工作.

我已将所有代码分隔到多个独立模块中,并使用某种介体处理所有相互通信.在大多数情况下,这种方法很有效.但在某些情况下我认为还不够.

我正在研究的其中一个模块代表了一个非常复杂的类似列表的结构.这是一些简化的例子:

很简单的例子

除了一些渲染逻辑,负责这个页面的模块应该处理:

  • 分页
  • 切换组
  • 用dnd移动元素和群体
  • 切割/复制/粘贴元素和组
  • 刷新证书组/ elems
  • elems中的一些逻辑
  • 在最近的将来可能会有更多的东西

我已经执行了所有不相关的逻辑(例如编辑和删除逻辑通过事件执行到另一个模块),但模块大小仍然很大(超过1K行代码),我不知道如何减少它.此外,我正在为我的模块使用模块模式,因此在多个文件之间分离逻辑更加困难.

所以我来到这里问有没有办法在单个模块中解耦复杂的逻辑?

更新:

我想澄清一些事情.我非常清楚如何在代码中的多个文件分离模块("模块"与模块模式) .

但我真正寻找的是在单个模块中分离问题逻辑方式(来自NKZ演示的"模块").

javascript architecture scalability module decoupling

5
推荐指数
1
解决办法
1826
查看次数