JQuery滑块和iui(iphone)之间的冲突

时间:2009-08-28 11:02:10

标签: jquery iphone slider web-applications iui

我试图在iphone网络应用上获得一个滑块,我正在使用iui来处理ui。滑块似乎与iui.js发生某种冲突,当您拖动滑块时,它会尝试打开另一个页面。但是,只需单击栏的某个部分,它就可以正常工作。我认为这是导致它的幻灯片事件,但是在这两种情况下都触发了这个事件,所以我有点卡住了。任何帮助将不胜感激。

简单的测试用例(点击以获取滑块):

<head>
    <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

    <script type="application/x-javascript" src="http://www.joehewitt.com/iui/iui/iui.js"></script>
    <link href="http://www.joehewitt.com/iui/iui/iui.css" type="text/css" rel="stylesheet" />

    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />

    <script language="javascript">
        $(document).ready(function(){
            $("#slider").slider()
        });
    </script>
</head>
<body>
    <div class="toolbar">
        <h1 id="pageTitle"></h1>
        <a id="backButton" class="button" href="#"></a>
    </div>
    <ul title="slider test" selected="true">

        <li class="group">Page 1</li>       
        <li>
            <a class="mainnav" href="#page2">page 2</a>
        </li>
</ul>
    <div id="page2" title="foo.inc">
        <div id="slide_container">
            <div id="slider"></div>
        </div>
    </div>
</body>

2 个答案:

答案 0 :(得分:2)

我不熟悉iui,但当你写道:

  

但是在这两种情况下都会触发此事件

我认为你错过了一些东西(可能很好地解释了你的问题)。如果您查看滑块的代码,您会看到鼠标拖动确实有一组不同的事件被触发;查看“_mouseCapture”和“_mouseDrag”。 _mouseDrag会触发“_slide”,但它也会先触发“_normValueFromMouse”。至于“_mouseCapture”,它并没有直接挂在滑块代码中(显然它是通过一些通用的jQuery UI代码完成的),所以我不能肯定地说它涉及到了,但是基于它的名字似乎很可能就是这样。

无论如何,_mouseDrag, _normValueFromMouse或可能_mouseCapture(或他们调用的某些函数)似乎无意中调用了某些iui函数。我的猜测是iui挂起一个与slider / jQuery UI函数同名的函数,并在jQuery UI挂起它之后这样做,因此幻灯片调用了iui函数。

想象一下,如果在jQuery UI中定义了“goSomewhere”函数,然后由_mouseDrag调用。通常它会工作正常,但如果有人(iui)定义了自己的“goSomewhere”函数,那么函数将被_mouseDrag调用。

或者,问题可能是滑块代码正在调用不会导致正常导航到另一个页面的内容,但是在iPhone中调用;但是,我怀疑情况并非如此。

希望有所帮助。

答案 1 :(得分:1)

感谢帮助machineghost。其他任何人都有这个问题,它是由iui函数'addEventListener'获取滑块上的点击引起的。它试图在标签'#'上设置所选属性,这会破坏页面。

,您可以在允许此标记继续之前检查标记是否为真实标记,而不是完美修复。