小编DA.*_*DA.的帖子

我在iPhone上玩touchstart和touchend事件.我构建了一个具有div的示例页面,如果您触摸它并滚动页面,它应该返回开始和结束位置的y坐标.

链接:http://jsbin.com/ibemom/2

jQuery:

var touchStartPos;

$('.theDiv')
  .bind('touchstart', function(e){
    touchStartPos = e.pageY;
  })
  .bind('touchend', function(e){
    alert(touchStartPos + ' | ' + e.pageY)
  })   

但是,当我在iPhone上加载该页面时,警报会将两个值都报告为零.有人看到我有什么问题吗？

更新:

我偶然发现了jQuery Mobile项目中的这段代码:https://github.com/jquery/jquery-mobile/issues/734

它的评论突出:

 // (in iOS event.pageX and event.pageY are always 0 )

它没有说明为什么会这样,但至少我发现其他人看到了同样的事情.将挖掘该页面上的示例代码以查看解决方案是否存在.

更新II:

好吧,在查看上面链接中的示例代码后,看起来这将返回一个实际值:

e.originalEvent.touches[0].pageY

问题是,我现在意识到这不是我需要的.它将我附加事件的对象触摸区域的Y偏移返回到与HTML文档相关的...而不是浏览器窗口.

我的目标是弄清楚触摸开始的位置和结束位置......然后比较值.如果它们有点不同,那么我们就会进行滑动...而不是触摸.

更新III:

我也找到了这些例子的参考:

e.originalEvent.touches[0].pageX

event.targetTouches[0].pageY

虽然我似乎无法让那些工作.两者都返回未定义的错误.

更新IV:

看起来一种解决方案是跟踪文档本身的offset().我可以将touchend事件应用于文档,然后检查它的偏移量.

这个问题是我的touchend事件将首先触发我页面上的元素,然后它会在文档上触发它(冒泡).因此,在我需要弄清楚如何对象touchend事件之前,我无法确定它是触摸还是滑动.

还在思考这一个......

使用jQuery,我试图更改SELECT元素中的选定选项以匹配另一个输入值:

$('#mySelect')
    .find('option')
        .filter(function() {
            return this.text == $('#selectedRejectReason').val(); 
        }).attr('selected', true)

当页面呈现时,这个JS运行,我可以看到它在Safari的Web检查器中更新DOM很好:

<select>    
    <option value="label">Select Reason</option>
<option value="Wrong Amount" selected="true">Wrong Amount</option>
<option value="Wrong Time">Wrong Time</option>
<option value="Wrong Place">Wrong Place</option>
</select>

当页面加载时,默认情况下,OPTIONS都没有SELECTED属性......所以第一个项目正在显示.jQuery触发,DOM被更新,看起来就像上面那样,但在Safari中,它仍然在页面上显示"SELECT REASON".这在Firefox中运行得很好.

有什么想法吗？好像是一个Safari bug.唉,它在iPhone上破坏了我们的网站.

在进行一些搜索时,有些人似乎通过从jQuery 1.6升级到1.7来解决这个问题.唉,我现在没有那么奢侈.但如果这是修复,任何人都知道改变了什么修复了这个？

jQuery的一个好处是语法(例如链接时)允许您的脚本跨越多个换行符以便于格式化和可读性.

当添加大量HTML时,是否存在等效/首选方法？

例如,做这样的事情会很好:

 $("#theObject")
    .doSomething()
    .append("
        <div>
             <div>
                  Hello World
             </div>
        </div>
    ")

这不起作用,但有什么类似的东西,以便更容易阅读在jQuery脚本中格式化的HTML？

我有一个函数将一些HTML附加到元素.它可能不止一次被调用,所以我只希望它将HTML附加到尚未添加HTML的元素中.

例:

<div class="divToAppendTo"></div>
<div class="divToAppendTo"><span class="myAppendedMarkup"></span></div>

因此,我想选择没有.myAppendedMarkup的直接孩子的所有.divToAppendTo

我对它的刺痛似乎不起作用:

$(".divToAppendTo:not(>span.myAppendedMarkup)")

它总是在我打电话时附加(从而复制内容).

示例标记:

<div class="wrapper">
    <h2>Trigger</h2>
    <div>This is some content</div>
</div>
<div class="wrapper">
    <h2>Trigger</h2>
    <div>This is some content</div>
</div>
<div class="wrapper">
    <h2>Trigger</h2>
    <div>This is some content</div>
</div> 

CSS示例:

.wrapper {z-index: 1}
.wrapper div {display: none; position: absolute;}

通过javascript(jQuery)我将一个click事件附加到每个h2,然后将内容div切换为display:block.

目的是这些是可扩展的内容块,将与页面上的任何其他内容重叠.

问题是,我希望第一个与第二个重叠,如果所有这些都打开,它将与第三个重叠.

但是,由于每一个都在前一个渲染之后渲染,因此实际的堆叠顺序是相反的(最后一个内容div创建的结尾覆盖了先前创建的一次).

有没有一种聪明的方法来逆转CSS/HTML的这种行为？或者是让页面呈现的解决方案,然后通过javascript,按顺序获取所有内容div并以相反的顺序给它们每个z-index？

更新:

这是一些更具体的标记:

<div style="padding: 10px;">Hello World
    <div style="position: relative; top: -5px;">
        <div style="position: absolute; background: yellow;"><p>This</p><p>is</p><p>overlapping</p></div>
    </div>
</div>
<div style="padding: 10px;">Hello World
    <div style="position: relative; top: -5px;">
        <div style="position: absolute; background: orange;"><p>This</p><p>is</p><p>overlapping</p></div>
    </div>
</div>
<div style="padding: 10px;">Hello World
    <div style="position: …

在过去的一年中,我成为BluePrint.css的粉丝,负责管理更大的Web应用程序项目.我也看了960和YUI的产品.一切都很好(虽然我有一些关于YUI的抱怨).

我现在正在开发移动项目,并且考虑到我们需要适应各种屏幕尺寸,我认为css网格框架是重新开始的方式.

我可能会大量修改BluePrint逻辑和/或从头开始构建一个,但在我这样做之前,我想知道是否有人使用过特定的移动框架并且会为移动设备推荐一个特定的框架.

我看过Less和cssgrid

http://lessframework.com/

http://cssgrid.net/

两者都很好.较少使用一致的列宽并更改列数.Cssgrid使用流体柱来适应屏幕尺寸.另一方面,我正在设想另一种方法,我们使用固定数量的列,然后根据屏幕宽度动态调整宽度.我更喜欢这个选项,因为我发现流体网格很难通过大量嵌套来管理.我应该先看看其他任何选项吗？

澄清:我目前不一定需要一个完整的UI框架.我们肯定会得到一个,无论是jQuery还是我们自己的,但现在的主要目标是找到和/或构建一个CSS框架来处理跨多个移动设备屏幕分辨率和方向的一般页面布局和定位.

使用phoneGap使用Canvas实现绘图.我们遇到的问题是画布需要特定的像素尺寸.这很好,除了iPhone 4的Retina显示器,来自CSS/Webkit POV仍然是320px宽,即使技术上有640个实际的屏幕像素.

无论如何使用Canvas on Webkit来容纳视网膜显示器,同时保持与非视网膜显示器的兼容性？

请检查下面的CSS.

 /*rex is the container of ex,ex2,ex3*/
div.rex{
height:200px;
border:0px;
margin:60px auto;
padding: 0;
vertical-align:top;
}

div.ex{
width:34%;
height:200px;
background-color:#4f443a;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}

div.ex2{
width:0.5%;
height:200px;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}


div.ex3{
width:65.5%;
height:200px;
background-color:#7e8547;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}

浏览器中的结果:

我需要的:

我正在尝试设置一个可以通过箭头键导航的菜单.我在Firefox中有这个工作片.

试图让它在IE8中工作并经过一番努力后,发现这是因为IE8不会在箭头上注册一个按键.去测试:

$(document).keypress(function (eh){ 
    alert(eh.keyCode);
};

在Firefox中,按任意箭头键将触发37,38,39或40的警报.

在IE8中,什么都没有.标准QWERTY键盘上的任何其他键都会注册,但不会注册箭头键.

这是我的Javascript的问题吗？浏览器设置？Windows设置？

在我的JavaScript中,我倾向于成为分号的多产用户:

var x = 1;
var y = 2;
if (x==y){do something};

我最近注意到我在查看很多没有分号后跟if语句的JavaScript.然后我发现我甚至不知道JS中分号的首选语法,并且在一些谷歌搜索后(相当令人惊讶地)除了分裂一行语句之外根本不需要分号.

所以,问题是......人们使用分号的这种习惯来自哪里？它是JavaScript中发挥作用时使用的一些流行语言的残余吗？一般的好习惯？只有我吗？

我可能会坚持使用它,因为在编写jQuery链以轻松发现结束时,这是非常好的.

更新:

感谢所有的答案,大家!总而言之,我们在JS中看到很多分号的原因,即使不需要,也来自各种变量:

• 如果你没有插入分号,那么较旧的JS minimalizer会产生破碎的代码
• 许多其他语言都使用它们,所以它是一种残留的习惯
• 有时,分号CAN可以改变逻辑
• 有些人喜欢用它们来使代码更具人性化