小编Tim*_*imo的帖子

我正在使用jQueryMobile的$.mobile.changePage(...)方法切换到我的项目中的不同页面.

$.mobile.changePage("#foo", {
 transition:"slide"
});

当我运行该方法时,转换工作完美,但是当我点击浏览器的返回按钮时,我看不到反向转换.

我玩了http://jquerymobile.com/test/docs/api/methods.html中描述的一些参数,但没有运气.

特别是设置reverse:true只是在向前移动到目标页面时反转了转换,但是当我按下后退按钮时仍然没有转换.

更新:似乎看到data-rel ="back"是通过<a>-tag 定义的"orginary links"的技巧但是我需要的是调用$.mobile.changePage()函数时的JavaScript等价物.

我正在寻找iScroll的替代方案来滚动div内部.

它需要支持这些操作系统:

• iOS版
• Android的
• WP8

而且我还需要pull-to-refresh功能.

有什么建议？

我们的设计师喜欢这些花哨的阴影,但我想避免使用图像精灵.相反,我只想用css3创建它.虽然用css3复制像素完美,但有点棘手:

这是我能得到的最接近但是我对结果并不满意,因为我不希望.box的额外html包装器以及左边的淡入淡出效果看起来不正确:

小提琴:https://jsfiddle.net/valmar/k8ugjwb2/3/

我的代码尝试:

HTML

<div class="boxwrap">
   <div class="box">content</div>
</div>

CSS

body{
    background: #edefed;
}

.boxwrap{
    width: 350px;
    height: 365px;
    position:relative;
}

.box{
    width: 350px;
    height: 350px;
    background: #fff;
}

.box:after{
    width: 350px;
    height: 50px;
    bottom: 26px;
    display: block;
    position:absolute;
    content: " ";
    z-index: -1;
    -webkit-box-shadow: 0px 16px 21px -10px rgba(0,0,0,0.56);
    -moz-box-shadow: 0px 16px 21px -10px rgba(0,0,0,0.56);
    box-shadow: 0px 16px 21px -10px rgba(0,0,0,0.56);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

是否有任何css大师可以创建这个投影的像素完美复制品而不需要任何额外的标记<div class="box">content</div> …

我使用CopyOnWriteArraySet来存储自定义类的一个实例,如下所示:

public class MyClass{
 String _name;

 public MyClass(String name){
  _name = name;
 }

 @Override
 public int hashCode(){
  return _name.hashCode();
 }

 @Override
 public boolean equals(Object obj){
  if (obj == this) return true;
  if ((obj instanceof MyClass) == false) return false;
  MyClass otherObject = (MyClass) obj;
  return _name.equals(otherObject._name);
 }

 @Override
 public String toString(){
  return _name;
 }
}

当我打印套装时,一切似乎都可以:

MyClass theObject = new MyClass("Object 1");
CopyOnWriteArraySet<MyClass> theSet = new CopyOnWriteArraySet();
theSet.add(theObject);

for (MyClass tmp : theSet){
 System.out.println(tmp.toString());
}

结果是:

对象1

所以,显然对象在集合中.

现在,我想从集合中删除对象:

theSet.remove(theObject); …

我有一个非常大的JavaScript文件,我想嵌入我的网站.HTTP服务器非常智能,可以在将文件传送到浏览器之前对文件进行GZIP.

但是,我测试了谷歌Chrome和Safari.

在Chrome上,它运行良好.400K压缩到100k左右:

但是 Safari压缩不起作用:

有趣的是,在gz2b.png中你可以清楚地看到内容编码被设置为"gzip".

注意:我已经阅读了Safari中的GZIP-Bug,其中文件无法以".gz"结尾,或者Safari不接受GZIP.由于我的文件没有以.gz结尾,因此这个问题应该不是问题.

我们目前正在为移动设备构建一个网站.支持的操作系统和浏览器应该是:

• Android 4.x(股票浏览器,谷歌浏览器)
• iOS6 +(Safari,谷歌浏览器)

为了支持高分辨率显示,我们评估了各种技术和库,以便用高分辨率吊坠自动替换图像:

尝试1:retina.js http://retinajs.com/

第一次尝试使用这样的普通<img>标签:<img src="foo.png">并使用retina.js让它自动用视网膜图像的名称(foo@2x.png)替换src属性.这有效但有两个缺点:首先,它会产生不必要的开销,因为原始和视网膜图像都会加载,其次,如果没有可用的视网膜图像,它将导致服务器日志上出现大量404错误我们不想要.

尝试2:picturefill.js https://github.com/scottjehl/picturefill

这个框架使用一些基于<span>元素的奇怪的html标记.对我来说,好像作者试图模仿所提议的<picture>元素而不是标准(尚未),请参阅http://picture.responsiveimages.org - 由于奇怪的标记,我不喜欢这种方法.对我来说,用语法描述带有跨度的图像是没有意义的.

尝试3:通过CSS属性background-image替换图像

我看到有时人们使用CSS媒体查询来检测视网膜显示,然后在具有更高或更低解决方案图片的div(或类似元素)上设置背景图像.我个人不喜欢这种方法,因为它完全不鼓励创建语义上好的标记<img src="foo.png">.我无法想象用div创建一个网站,然后将所有图像设置为背景图像 - 这感觉非常奇怪.

尝试4:通过CSS属性内容设置图像:url(...)

正如这里提出的那样可以在CSS中设置img标签的src属性的等价物吗？似乎可以使用属性通过CSS覆盖img标签中的src属性content:url().现在,这是计划:我们为每个图像设置了img标签,在其src属性中引用了一个透明的空白1x1 png,如下所示:<img id="img56456" src="transp_1x1.png" alt="img description">.现在这在语义上是正确的,并且对W3C验证器也有效.然后我们加载一个CSS样式表,通过Media Queries设置网站上的所有图像.

例:

#img56456{content:url(foo.png)}
@media (-webkit-min-device-pixel-ratio: 2){ 
    #img56456{content:url(foo@2x.png)}
}

现在,这种方法效果很好:

• 没有开销
• 坚实的标记
• 适用于所需的设备/浏览器
• 这里不要求SEO图像

现在,这种方法会导致我们没有想到的任何副作用吗？我只是问,因为我知道它有效,但有点"感觉"奇怪的是通过CSS设置所有图像我也发现这个方法对SO的评论是否有可能在CSS中设置img标签的src属性的等价物？:

"值得补充的是,即使在支持将内容分配给img的浏览器中,它也会改变其行为.图像开始忽略大小属性,而在Chrome/Safari中,它会丢失上下文菜单选项,如"保存图像".这是因为分配了内容有效地将img从空的替换元素转换为类似 <span><img></span>"

这可能是个问题吗？(我没有注意到任何尺寸问题,并且上下文菜单不是必需的)

有没有办法在基于 React 的项目中自动找到未使用的样式定义，就像在这个例子中一样？

前：

const styles = StyleSheet.create({
  name: {
    color: '#e5e5e5'
  }
});

const Hello = React.createClass({
  render: function() {
    return <Text style={styles.name}>Hello {this.props.name}</Text>;
  }
});

后：

开发人员已更改样式，不再需要“名称”。怎么能自动找到这种死风格的代码？

const styles = StyleSheet.create({
  name: { // Redundant now!
    color: '#e5e5e5'
  },
  foo: {
    color: '#e2e3b5'
  }
});

const Hello = React.createClass({
  render: function() {
    return <Text style={styles.foo}>Hello {this.props.name}</Text>;
  }
});

我正在创建自己的自定义选项卡组件.如果由标签标题组成,每个标题标题都有一个正文部分.单击选项卡标题时,应将相应正文的样式设置为display:block其他所有样式display:none.

由于某些原因,我收到此错误:

无法分配给只读对象的属性"样式"

我知道我不允许手动改变样式属性,因为它似乎是只读的,但我该如何修复/解决这个问题呢？

这是我的代码:

Tabs.js

import React, { Component } from 'react';

class Tabs extends Component {

  constructor() {
    super();
    this.state = {
      activeIndex: 0,
    };
    this.tabHeads = [];
  }

  // Initial composition of tab heads
  componentWillMount() {
    React.Children.map(this.props.children, (el, i) => {
      const tab = el;
      const key = `tabKey${i}`;
      this.tabHeads.push((
        <div role="button" onClick={e => this.onTabClick(e, i)} key={key}>{tab.props.title}</div>
      ));
    });
  }

  // Called when user clicks a tab head
  onTabClick(e, i) {
    this.setState({ activeIndex: …

我有一个自定义组件<item>，如下所示：

item.vue

<script>
  export default {
    render: function (c) {
      var self = this;
      const contentEl = c('div', {staticClass:'item-content', domProps: {innerHTML: self.content}});
      return c('div', {
        staticClass: 'item',
        class: {
          'item-left': self.side === 'left',
          'item-right': self.side === 'right'
        }
      }, [contentEl])
    },
    props: {
      content: String,
    }
  }
</script>

可以这样使用：

<item :content="Hello world"></item>

这将打印“ Hello world”，并且工作正常，但现在我希望该项目可按如下方式单击：

<item v-on:click="myClickEvent" :content="Hello world"></item>

问题：当<item>组件的内部<div>被单击时，如何使该组件触发单击事件？

我想转换这些字符串:

fooBar
FooBar

成:

foo-bar
-foo-bar

对于任何给定的字符串,我如何在JavaScript中以最优雅和最高效的方式执行此操作？