小编CLL*_*CLL的帖子

我正在使用CSS类将SVG URL加载到网页中.这适用于我测试的每个浏览器,除了Firefox 35.0.1(可能还有早期版本的Firefox).我注意到当使用实际颜色名称(例如白色)作为笔划时,它按预期工作,但是当我使用十六进制值时,例如#ffffff,它根本不显示笔划.根据MDN,支持十六进制值.

所以,这很好用:

.ui-stroke-icon .ui-icon-head:after,
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 540 540" enable-background="new 0 0 540 540" xml:space="preserve"><path fill="none" stroke="white" stroke-width="8" stroke-miterlimit="10" d="...svg coordinates here..."/></svg>

但这不是:

.ui-stroke-icon .ui-icon-head:after,
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 540 540" enable-background="new 0 0 540 540" xml:space="preserve"><path fill="none" stroke="#ffffff" stroke-width="8" stroke-miterlimit="10" d="...svg coordinates here..."/></svg>

有什么办法可以在这里使用十六进制值吗？这真的有助于保持我的Sass尽可能干燥.

使用webpack 3并做出反应,我可以导入这样的文件:

import(`src/Main.sass`).then(...do something)

我有一个导入文件的加载器,它根据查询字符串更改模块内容,我可以成功导入这样的文件:

import(`src/Main.sass?theme=themename`).then(...do something)

但是当查询字符串是变量时:

const themeQuery = '?theme=themename';
import(`src/Main.sass${themeQuery}`).then(...do something);

要么

const theme = 'themename';
import(`src/Main.sass?theme=${theme}`).then(...do something);

我收到错误:

Error: Cannot find module '.src/Main.sass?theme=themename'.

我希望这可以根据这里的信息工作:

完全动态的语句(例如import(foo))将失败,因为webpack至少需要一些文件位置信息.这是因为foo可能是系统或项目中任何文件的任何路径.import()必须至少包含有关模块所在位置的一些信息,因此捆绑可以限制在特定目录或文件集中.

和

包含可能在import()调用上请求的每个模块.例如,import(./locale/${language}.json)将导致./locale目录中的每个.json文件都捆绑到新的块中.在运行时,当计算了变量语言时,可以使用诸如english.json或german.json之类的任何文件.

这不是一个完全动态的语句,它有完整的文件路径(位置信息),可以导入,没有问题sans查询字符串.

编辑:我已经创建了一个可以复制的测试仓库.使用prop定义的查询字符串src/Main.js导入.当使用此组件时,您可以看到,但是,使用完整字符串(包括查询)导入时,导入的文件没有任何问题.这可以通过使用作为组件来看出.Main.component.sassthemeName<Main/>src/App.jsCannot find module './Main.module.sass?theme=themename' error.src/Main-no-var.js<Main>

这是用于此示例的webpack配置.

我有一个使用HTML和CSS的2列布局。在这些列中，我有一个选择菜单，将在单击这些列表项之一时显示。我需要相对于单击的项目放置此选择菜单，而不要像传统的选择选项菜单一样影响其周围元素的布局。但是，我不能使用传统选择，因为这是自动建议的输入/菜单。因此，我正在相对放置的父项中为菜单容器使用绝对放置的项。

我想要的是：

我的问题是，绝对定位的项目就像列中的一部分一样在破裂。这违背了我所了解的一切position: absolute，但似乎符合规范。更令人沮丧的是，浏览器会按我的意图显示绝对定位的项目（只要我没有position: relative在父对象上设置），但是我需要position: relative在父对象或选择菜单上设置（作为绝对定位的项目）不会总是显示与其相应元素相邻的元素。

我得到的是：

我还尝试了使用flexbox进行类似列的布局，但是，当我需要按顺序从上到下显示项目时，项目从左到右显示，就像在传统的列式布局中那样。我可以将flexbox与一起使用flex-flow: column wrap，但这将要求我知道/设置容器元素的高度，而我不能这样做。CSS列无需设置高度即可很好地包装列表。

我认为最简单的解决方案是以某种方式伪造绝对定位或使flexbox在不显式设置容器高度的情况下按顺序（从上到下）显示项目。我都尝试了两次，都没有令人满意的结果。我愿意使用JavaScript解决方案，但我会尽力避免使用它，而仅使用CSS来解决。

.columns-two {
  column-count: 2;
  column-width: 300px;
  -moz-column-count: 2;
  -moz-column-width: 300px;
}
.parent {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  position: relative;
}
.highlight {
  background-color: #FFF8DC;
}
.absolute-element {
  width: 200px;
  position: absolute;
  background: #ffffff;
  border: 1px solid #cccccc;
  padding: 15px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

<ul class="columns-two">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li> …

我正在使用jquery.validate.js来验证表单中的多个字段以及smizek 的 signature_pad。我想验证是否在 html 画布（签名板）上绘制了某些内容，同时验证了所有其他输入字段。

不幸的是，向 jquery 验证提交处理程序添加一个函数来检查画布是否具有签名是不够的，因为这仅在满足所有其他必需字段后才会触发。我可以向 jquery 验证器添加方法，但我很确定这些方法只能用于验证输入的内容，而不是画布。

我可以使用“signaturePad.isEmpty()”检查签名是否存在。理想情况下，有一种方法可以添加这样的函数，该函数与任何验证同时发生：

    var errorExists = false;
    if( signaturePad.isEmpty()){
      if (errorExists == false){
        $( "#signature-pad" ).append( "<div id="sig-error">A signature is required</div>" );
        errorExists = true;
      }
    }else if( !signaturePad.isEmpty()) {
      if (errorExists == true){
        $('#sig-error').remove();
      }
    }

...并且只有在满足 jquery 验证和签名的情况下才继续实际提交表单。

有没有办法在其他验证发生的同时触发一个函数——而不是在之后？除非满足我的两个条件 - 不仅仅是 jquery 验证，否则如何阻止表单提交？