小编meo*_*meo的帖子

玉模板 - 动态属性

我想为一些html元素动态创建属性.

在我的情况下,我想根据设置(或不设置)禁用的属性user.role.

因此,如果user有权编辑某些字段,我不想在元素上放置禁用属性.否则,我确实想要它.

我知道我可以用这些方法做到这一点:

- 方法1 - 使用条件

if (user.role === 1)
   input(type='text', name='foo')
else
   input(type='text', name='foo', disabled)
Run Code Online (Sandbox Code Playgroud)

- 方法2 - 纯HTML

- var disabledAttr = (user.role === 1) ? "disabled" : "";
| <input type="text" name="foo" #{ disabledAttr} />
Run Code Online (Sandbox Code Playgroud)

方法1很糟糕,因为我需要重复一些代码.使用方法2我不需要重复代码,但我必须使用纯HTML而不是Jade标记.

我试过这样的事情:

input(type='text', name='foo', #{ disabledAttr} )
Run Code Online (Sandbox Code Playgroud)

但是jade会生成以下代码:

<input type="text" name="foo" disabledattr="" />
Run Code Online (Sandbox Code Playgroud)

有什么好主意吗?

templates pug

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

如何隐藏边框下方的背景

我需要修改一个网站,使所有链接的可点击区域对移动设备更大.我给所有链接提供了相同大小的透明border和负片margin,以免影响文本流.现在这就像一个魅力.但不是具有背景的元素.背景展开到透明边框.这是行为接缝在所有浏览器中保持一致.

http://jsfiddle.net/hq65C/1/这里有另一个例子:http://jsfiddle.net/DytDA/

为什么是这样?我总是认为边界不在元素之内.我怎么能解决这个问题.(我需要一个不需要修改HTML的解决方案).

css

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

如何通过CSS定位盲文/屏幕阅读器

我使用webfont在网站上显示一些图标.这很棒,因为它们可以缩放,如果我愿意,我可以打印它们......但问题是盲人将它们视为普通字母或字符.以下示例返回一个漂亮的Icon +文本.

<span>i</span> Info
<span>t</span> Contact
etc...
Run Code Online (Sandbox Code Playgroud)

一个盲人只会读:iInfo,tContact等...

有可能以某种方式仅使用CSS定位盲文和屏幕阅读器吗?

我在w3网站上发现了这个,但我不确定这部作品是否真实存在:http: //www.w3.org/TR/CSS2/media.html#media-types

有人对这个有经验么?

------ 更新 -----

:before&:after- >某些屏幕阅读器(如VoiceOver for MacOS)会大声读出"内容"部分.我亲自测试过这个.

@media braille, speech - >接缝不会对VoiceOver产生影响.它读取屏幕上可见的内容(使用safari和chrome测试)

speak: none;- >对VoiceOver或NVDA没有任何影响(https://twitter.com/#!/jcsteh/status/143848614979055616)

html css accessibility

15
推荐指数
1
解决办法
3507
查看次数

如何保护WebFonts

我有一个客户端希望在自己的服务器上托管他的webfonts.我有一个font.com帐户,字体托管到现在为止.我说明了fonts.com协议(第18点).他们说,你可以在自己的服务器上托管文件,但你必须尽可能地保护它们.

我能想到这样做的唯一途径,是通过限制对这些文件的要求同HTTP_REFERER.htaccess.

我可以做更多保护这些字体吗?做更多是否有意义,你认为这是一个充分的保护吗?

我个人并不相信技术拷贝保护,你可以随时复制你能看到的东西.但我不希望我的客户陷入法律纠纷.你有这方面的经验吗?

编辑

我也对法律方面感兴趣.如果有人可以下载并重复使用它,会发生什么?他们是否意味着我必须保护字体仅用于热链接或下载?

fonts webfonts

13
推荐指数
3
解决办法
1万
查看次数

为什么全局变量不好?

在这里使用它对我来说是完全有意义的.会有什么选择?我怎么能完全避免使用它们,最重要的是根据jsLint使用全局变量的原因.

(function($){
  $(function(){
   $body = $('body'); //this is the BAD Global

   $.each(somearray ,function(){ $body.dosomething() });

   if (something){
     $body.somethingelse();
   }

  });
}(jQuery));
Run Code Online (Sandbox Code Playgroud)

你能帮我理解一下吗?并给我一个更好的解决方案?

javascript

12
推荐指数
1
解决办法
1427
查看次数

中断/停止实际位置/状态的CSS3转换

我正在编写一个jQuery插件来通过CSS3 Transitions动画元素.在jQuery中,可以.stop()在所选元素上中断当前动画.

知道如何阻止正在运行的CSS3动画吗?是否存在处理此问题的本地方法,或者我是否需要对动画进行测量,并将动画元素的样式设置为当前位置,颜色大小或whaterver?

这是jQuery插件的当前状态:http: //jsfiddle.net/meo/r4Ppw/

我试图将"-webkit-transition-duration"设置为0/none/false.但它并没有停止动画.

javascript css3

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

如何在一个小团队中处理多个项目

我们刚开始使用scrum进行项目管理.我们是一个非常小的团队(2个开发人员,1个UI/Web-deisgner),我们一次有很多正在运行的项目.

如何在scrum模型中同时运行多个项目?大多数时候我们有一个主要项目和一些小项目.如何有效地组合多个冲刺?

编辑:不要修复scrum.我们是一个小型结构,非常灵活.Scrum只是我的出发点.如果你有其他系统对你或你的小团队有用,我完全愿意接受任何形式的输入.

project-management scrum

10
推荐指数
2
解决办法
5206
查看次数

Safari Mobile:触摸时切换内容

我正在调整一个网站,以使其在iPad上感觉原生.

该网站的导航显示了悬停时子导航的下拉列表.这就像iPad上的魅力.当您触摸subnav时,当您单击/触摸其他位置时,它会再次打开和关闭.

现在我需要在再次触摸导航点时再次关闭它.

我在想,我可以pointer-events:none为iPad 设置悬停和活动,但是这会使子导航闪烁而且不起作用......

我还尝试用前置选择器的元素集覆盖导航点并将其指针事件设置为无,但这不起作用...

任何想法,我如何才能使用CSS解决这个问题.(我不能修改HTML也不能修改JS)

PS:您可以在www.macprime.ch上重现这一点...(点击顶部的主导航,然后尝试再次关闭下拉列表)

编辑确定我尝试了几乎只有CSS可能的一切.我认为不可能.如果有人能告诉我原因,他/她将获得赏金奖励.

css mobile-safari css3

10
推荐指数
1
解决办法
1816
查看次数

基于白名单删除元素的所有属性

我需要删除在某些元素上设置的所有属性(使用vanilla JS或jQuery),除了一些手动选择的元素.让我们说我有一个图像:

<img hspace="4" border="1" vspace="4" src="someimage.jpg" alt="somealt" />
Run Code Online (Sandbox Code Playgroud)

我想要这个结果:

<img src="someimage.jpg" alt="somealt" />
Run Code Online (Sandbox Code Playgroud)

我能想到的唯一方法就是.removeAttr()每一个属性.但问题是有时元素具有W3C规范中不存在的属性.我想删除所有其他未列入白名单的属性.

你会怎么做?

jquery

9
推荐指数
1
解决办法
7112
查看次数

h1是否需要成为头标记中的第一个语义元素?

我正在使用Chrome outliner扩展来检查我的页面的语义.在文档主标题标记中的h1之前有任何结构元素似乎是一个问题.我认为顺序无关紧要,但显然它确实如此:

+Document Body
  +Header
    +nav
      +h1 Main Navigation
    +h1 MyPage
  -Section
  -Footer
Run Code Online (Sandbox Code Playgroud)

是这样的大纲:

Untitled Body
  Main Navigation
  MyPage
  etc...
Run Code Online (Sandbox Code Playgroud)

但是当h1是我标题中的第一个元素时:

+Document Body
  +Header
    +h1 MyPage
    +nav
      +h1 Main Navigation
  -Section
  -Footer
Run Code Online (Sandbox Code Playgroud)

它的轮廓如下:

MyPage
  Main Navigation
  etc...
Run Code Online (Sandbox Code Playgroud)

这是为什么?是大纲车,还是我理解HTML5语义中的错误?W3C规范似乎没有提到它:http://dev.w3.org/html5/spec/Overview.html#the-header-element

html html5 semantic-markup

9
推荐指数
1
解决办法
2931
查看次数